/* ========================================== FLAG ON THE POST The BUCS Breakdown ========================================== */ /* Was `html, body { overflow-x: clip; }`. This stylesheet is linked site-wide from default.hbs (every page loads it, not just this one), so setting overflow-x on html/body leaked a clipped/scrolling root onto every other page -- including the homepage -- and that is what was silently breaking position:sticky everywhere (once carries its own explicit overflow value, the browser stops treating 's overflow as the page's real scroller, and everything that depends on sticky positioning relative to that scroller stops sticking, in every browser). The clip was only ever needed to hide the sub-pixel edge from this page's own 100vw full-bleed sections (see .fotp-hero / .fotp-content below), so it belongs on .fotp-page -- the actual top-level wrapper of this template -- not on html/body. */ .fotp-page { max-width: 1100px !important; margin: 0 auto !important; padding: 90px 30px !important; overflow-x: clip; } /* HERO */ .fotp-hero { text-align: center !important; margin: 0 auto 70px !important; } .fotp-logo { display: block !important; width: min(620px, 90%) !important; height: auto !important; margin: 0 auto 45px !important; } .fotp-tagline { margin: 30px auto 45px !important; max-width: 700px !important; text-align: center !important; } .fotp-tagline p { font-size: 1.6rem !important; margin: 0 !important; line-height: 1.35 !important; color: #222 !important; text-align: center !important; } .fotp-tagline h2 { font-family: "Thunder", sans-serif !important; color: #D50A0A !important; font-size: 5rem !important; letter-spacing: .55rem !important; margin: 15px 0 !important; text-transform: uppercase !important; text-align: center !important; } .fotp-date { display: inline-block !important; margin-top: 30px !important; padding: 12px 24px !important; border: 2px solid #D50A0A !important; border-radius: 999px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12rem !important; color: #111 !important; text-align: center !important; } /* CONTENT WRAPPER */ .fotp-content { max-width: 900px !important; margin: 0 auto !important; text-align: center !important; } /* PENALTY TRACKER */ .fotp-tracker { background: #34302f !important; color: #fff !important; border-radius: 18px !important; padding: 34px !important; margin: 0 auto 70px !important; box-shadow: 0 18px 40px rgba(0,0,0,.18) !important; text-align: center !important; } .fotp-tracker h2 { margin: 0 0 24px !important; color: #fff !important; font-size: 1rem !important; text-transform: uppercase !important; letter-spacing: .18em !important; text-align: center !important; } .fotp-tracker nav { display: grid !important; gap: 14px !important; } .fotp-tracker a { display: grid !important; grid-template-columns: 48px 1fr !important; gap: 18px !important; align-items: center !important; color: #fff !important; text-decoration: none !important; font-size: 1.25rem !important; line-height: 1.25 !important; padding: 14px 0 !important; border-top: 1px solid rgba(255,255,255,.14) !important; text-align: left !important; } .fotp-tracker a span { color: #D50A0A !important; font-weight: 900 !important; letter-spacing: .08em !important; } .fotp-tracker a:hover { color: #f4c542 !important; } /* FOOTBALL FIELD */ .fotp-zone { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 70px 54px !important; box-sizing: border-box !important; } .fotp-zone { position: relative !important; /* LEFT + RIGHT SIDELINES */ box-shadow: inset 4px 0 0 rgba(255,255,255,.88), inset -4px 0 0 rgba(255,255,255,.88); } .fotp-zone-dark { background: #275937 !important; } .fotp-zone-light { background: #2f6741 !important; } .fotp-field { position: relative !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 55px !important; margin-bottom: 0 !important; padding: 70px 54px 90px !important; border-radius: 0 !important; overflow: hidden !important; background: #275937 !important; box-shadow: inset 0 0 70px rgba(0,0,0,.28), 0 20px 55px rgba(0,0,0,.12) !important; } .fotp-field::before, .fotp-field::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: rgba(255,255,255,.78) !important; z-index: 0 !important; } .fotp-field::before { left: 22px !important; } .fotp-field::after { right: 22px !important; } .fotp-field > * { position: relative !important; z-index: 1 !important; } .fotp-field .fotp-entry-title { color: #fff !important; text-shadow: 0 3px 10px rgba(0,0,0,.45) !important; } .fotp-field .fotp-entry-commentary { color: rgba(255,255,255,.92) !important; } .fotp-field .fotp-source { color: #FF7900 !important; } /* ENTRY */ .fotp-entry { margin: 45px auto 20px !important; text-align: center !important; } .fotp-field .fotp-entry { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; } .fotp-entry-title { font-family: "Thunder", sans-serif !important; font-size: clamp(3rem, 7vw, 6rem) !important; line-height: .85 !important; margin: 0 auto 24px !important; color: #111 !important; text-transform: uppercase !important; text-align: center !important; } .fotp-entry-screenshot { margin: 0 auto 38px !important; text-align: center !important; } .fotp-entry-screenshot img { display: block !important; width: 100% !important; height: auto !important; border-radius: 14px !important; box-shadow: 0 18px 45px rgba(0,0,0,.18) !important; margin: 0 auto !important; } /* PENALTY BADGE */ .fotp-call { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 18px !important; min-width: 420px !important; max-width: 90% !important; color: #fff !important; padding: 18px 28px !important; border-radius: 14px !important; margin: 40px auto 34px !important; box-shadow: 0 14px 30px rgba(0,0,0,.18) !important; text-align: center !important; } /* FOTP CALL VARIANTS */ .fotp-call-yellow { background: #f4c542 !important; color: #fff !important; } .fotp-call-good { background: #0A0A08 !important; color: #FF7900 !important; } .fotp-call.fotp-call-good strong { color: #FF7900 !important; } .fotp-call-challenge { background: #D50A0A !important; color: #fff !important; } .fotp-call-icon { width: 100px !important; height: 82px !important; object-fit: contain !important; flex: 0 0 auto !important; } .fotp-call-icon[src=""], .fotp-call-icon:not([src]), .fotp-call-icon[src="BADGE-ILLUSTRATION-URL-HERE"] { display: none !important; } .fotp-call strong { font-family: "Thunder", sans-serif !important; font-size: 2.8rem !important; line-height: .9 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #fff !important; text-align: center !important; } /* COMMENTARY */ .fotp-entry-commentary { max-width: 760px !important; margin: 28px auto !important; font-size: 1.25rem !important; line-height: 1.55 !important; color: #333 !important; text-align: center !important; } .fotp-entry-commentary p { text-align: center !important; } .fotp-content .fotp-field .fotp-entry-commentary, .fotp-content .fotp-field .fotp-entry-commentary p { color: rgba(255,255,255,.90) !important; } /* SOURCE LINK */ .fotp-source { display: inline-block !important; margin: 18px auto 0 !important; color: #D50A0A !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .08em !important; text-decoration: none !important; border-bottom: 2px solid #D50A0A !important; text-align: center !important; } .fotp-source:hover { color: #111 !important; border-color: #111 !important; } /* FIELD MARKER */ .fotp-yard-marker { position: relative !important; display: block !important; width: calc(100% + 64px) !important; margin-left: -32px !important; margin-right: -32px !important; height: 0 !important; min-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; z-index: 5 !important; } .fotp-yard-marker::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 4px !important; background: rgba(255,255,255,.88) !important; } .fotp-yard-marker span { position: absolute !important; z-index: 2 !important; left: 55px !important; top: -38px !important; padding: 0 !important; background: transparent !important; font-family: "Thunder", sans-serif !important; font-size: 4rem !important; line-height: 1 !important; color: #fff !important; letter-spacing: .08em !important; text-shadow: 0 3px 8px rgba(0,0,0,.45) !important; transform: rotate(90deg) !important; } /* RIGHT-SIDE YARD NUMBER */ .fotp-yard-marker::after { content: attr(data-yard) !important; position: absolute !important; z-index: 2 !important; right: 55px !important; top: -38px !important; font-family: "Thunder", sans-serif !important; font-size: 4rem !important; line-height: 1 !important; color: #fff !important; letter-spacing: .08em !important; text-shadow: 0 3px 8px rgba(0,0,0,.45) !important; transform: rotate(-90deg) !important; pointer-events: none !important; } /* MOBILE */ @media (max-width: 700px) { .fotp-page { padding: 60px 20px !important; } .fotp-logo { width: 90% !important; margin-bottom: 35px !important; } .fotp-tagline h2 { font-size: 3.8rem !important; letter-spacing: .35rem !important; } .fotp-tracker { padding: 26px 22px !important; } .fotp-tracker a { grid-template-columns: 40px 1fr !important; font-size: 1.05rem !important; } .fotp-call { min-width: 0 !important; width: 100% !important; flex-direction: column !important; gap: 12px !important; } .fotp-call strong { font-size: 2.3rem !important; } .fotp-yard-marker { gap: 20px !important; } .fotp-yard-marker span { font-size: 3rem !important; } } /* ================================================== FLAG ON THE POST — FINALE / FOOTER ================================================== */ .fotp-finale { position: relative; left: 50%; width: 100vw; margin: 5rem 0 0 -50vw; padding: 3.5rem 2rem; box-sizing: border-box; text-align: center; background: linear-gradient( 180deg, rgba(10,10,8,.88), rgba(10,10,8,.98) ); border-top: 4px solid #ffb612; border-bottom: 1px solid rgba(255,255,255,.14); } .fotp-finale-inner { width: min(100%, 980px); margin: 0 auto; } /* Buccaneers disappointment GIF */ .fotp-finale-gif { width: min(100%, 760px); margin: 0 auto 2.5rem; overflow: hidden; background: #0a0a08; border: 3px solid #34302b; box-shadow: 0 0 0 1px rgba(255, 182, 18, 0.28), 0 18px 45px rgba(0, 0, 0, 0.45); } .fotp-finale-gif img { display: block; width: 100%; height: auto; object-fit: cover; } /* Closing title */ .fotp-finale-title { margin: 0; color: #ffffff; font-size: clamp(1.85rem, 4vw, 3.25rem); font-weight: 900; line-height: 1.05; letter-spacing: 0.035em; text-transform: uppercase; } .fotp-finale-title span { display: block; margin-top: 0.45rem; color: #ffb612; } /* Submission message */ .fotp-finale-message { margin: 2rem auto 1.25rem; color: #ffffff; font-size: clamp(0.95rem, 2vw, 1.2rem); font-weight: 800; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; } /* ================================================== BLOW THE WHISTLE CTA ================================================== */ .fotp-whistle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; min-width: 270px; margin-top: 0.75rem; padding: 0.9rem 1.6rem; color: #ffffff; background: #c8102e; border: 2px solid #c8102e; border-radius: 0; font-size: 1rem; font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; box-shadow: 6px 6px 0 #0a0a08; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease; } .fotp-whistle-icon { display: block; width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; } .fotp-whistle-btn span { display: block; white-space: nowrap; } .fotp-whistle-btn:hover, .fotp-whistle-btn:focus-visible { color: #0a0a08; background: #ffb612; border-color: #ffb612; box-shadow: 3px 3px 0 #0a0a08; transform: translate(3px, 3px); } .fotp-whistle-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; } /* ========================================================= FLAG ON THE POST — INLINE SUBMISSION FORM ========================================================= */ .fotp-whistle-section { width: min(100%, 980px); margin: 54px auto 46px; padding: 0 22px; text-align: center; box-sizing: border-box; } /* Yellow penalty flag divider */ .fotp-flag-divider { display: grid; grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr); align-items: center; gap: 18px; width: min(100%, 760px); margin: 0 auto 24px; } .fotp-divider-line { display: block; height: 3px; background: linear-gradient( 90deg, transparent 0%, #c99b21 12%, #ffcc38 48%, #c99b21 88%, transparent 100% ); box-shadow: 0 0 9px rgba(255, 204, 56, 0.25); } .fotp-penalty-flag { display: block; width: clamp(66px, 9vw, 105px); height: auto; transform: rotate(-7deg); filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(255, 196, 30, 0.18)); } /* See something heading */ .fotp-see-something { margin: 0 0 27px; color: #fff; font-size: clamp(1.5rem, 4vw, 2.65rem); font-weight: 950; line-height: 0.98; letter-spacing: 0.045em; text-transform: uppercase; text-shadow: 3px 3px 0 #000, 0 0 12px rgba(255, 255, 255, 0.1); } .fotp-see-something span { display: inline-block; margin-top: 7px; color: #ffcc38; } /* Blow the Whistle toggle button */ .fotp-whistle-toggle { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; width: min(100%, 610px); min-height: 92px; margin: 0 auto; padding: 13px 22px 13px 15px; border: 2px solid #ffcc38; border-radius: 0; background: linear-gradient( 135deg, #d50a0a 0%, #b90909 53%, #8e0505 100% ); color: #fff; box-shadow: 8px 9px 0 #080808, 0 0 0 1px rgba(255, 255, 255, 0.07) inset; cursor: pointer; overflow: hidden; text-align: left; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } .fotp-whistle-toggle::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.23; background: repeating-linear-gradient( -18deg, transparent 0, transparent 9px, rgba(0, 0, 0, 0.22) 10px, transparent 12px ); } .fotp-whistle-toggle:hover { transform: translate(-2px, -2px); box-shadow: 11px 12px 0 #080808, 0 0 18px rgba(213, 10, 10, 0.35); filter: brightness(1.07); } .fotp-whistle-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 5px; } .fotp-whistle-image-wrap { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 62px; border-right: 2px solid rgba(255, 204, 56, 0.75); padding-right: 13px; } .fotp-whistle-image { display: block; max-width: 58px; max-height: 56px; object-fit: contain; filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, 0.7)); } .fotp-whistle-button-copy { position: relative; z-index: 1; display: flex; flex-direction: column; line-height: 1; } .fotp-whistle-button-copy strong { font-size: clamp(1.38rem, 4vw, 2.15rem); font-weight: 950; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 3px 3px 0 #000; } .fotp-whistle-button-copy small { margin-top: 8px; color: #ffcc38; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .fotp-toggle-indicator { position: relative; z-index: 1; display: grid; place-items: center; width: 35px; height: 35px; border: 2px solid #ffcc38; color: #ffcc38; font-size: 1.75rem; font-weight: 700; line-height: 1; transition: transform 220ms ease; } .fotp-whistle-toggle[aria-expanded="true"] .fotp-toggle-indicator { transform: rotate(45deg); } /* Expandable form panel */ .fotp-submission-panel { width: min(100%, 760px); margin: 34px auto 0; padding: clamp(24px, 5vw, 46px); border-top: 5px solid #ffcc38; background: linear-gradient( 145deg, rgba(22, 22, 20, 0.99), rgba(5, 5, 5, 0.99) ); box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; box-sizing: border-box; text-align: left; } .fotp-submission-panel[hidden] { display: none; } .fotp-submission-panel.fotp-panel-opening { animation: fotp-panel-reveal 320ms ease both; } @keyframes fotp-panel-reveal { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } } /* Form heading */ .fotp-form-heading { margin-bottom: 31px; text-align: center; } .fotp-form-kicker { margin: 0 0 8px; color: #ffcc38; font-size: 0.78rem; font-weight: 950; letter-spacing: 0.2em; text-transform: uppercase; } .fotp-form-heading h3 { margin: 0; color: #fff; font-size: clamp(1.55rem, 4vw, 2.45rem); font-weight: 950; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 3px 3px 0 #000; } .fotp-form-heading > p:last-child { max-width: 620px; margin: 15px auto 0; color: #c9c7c2; font-size: 0.97rem; line-height: 1.55; } /* Form layout */ .fotp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 19px; } .fotp-field { min-width: 0; } .fotp-field-full { grid-column: 1 / -1; } .fotp-field label { display: block; margin-bottom: 8px; color: #fff; font-size: 0.81rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .fotp-field label > span { color: #ffcc38; } .fotp-field input, .fotp-field select, .fotp-field textarea { display: block; width: 100%; box-sizing: border-box; border: 2px solid #4b4945; border-radius: 0; background: #11110f; color: #fff; font: inherit; line-height: 1.4; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .fotp-field input, .fotp-field select { min-height: 51px; padding: 12px 14px; } .fotp-field textarea { min-height: 155px; padding: 14px; resize: vertical; } .fotp-field input::placeholder, .fotp-field textarea::placeholder { color: #7f7c76; } .fotp-field input:focus, .fotp-field select:focus, .fotp-field textarea:focus { border-color: #ffcc38; background: #181713; box-shadow: 0 0 0 3px rgba(255, 204, 56, 0.13); } .fotp-field input[type="file"] { padding: 10px; color: #bbb8b1; } .fotp-field input[type="file"]::file-selector-button { margin-right: 13px; padding: 9px 13px; border: 0; border-radius: 0; background: #34302b; color: #fff; font-weight: 850; cursor: pointer; text-transform: uppercase; } .fotp-field small { display: block; margin-top: 7px; color: #8f8c86; font-size: 0.76rem; line-height: 1.4; } .fotp-character-row { display: flex; justify-content: space-between; gap: 15px; } /* Checkbox */ .fotp-checkbox-label { display: flex !important; align-items: flex-start; gap: 11px; margin: 3px 0 0 !important; color: #c8c5bf !important; font-size: 0.77rem !important; font-weight: 700 !important; line-height: 1.45; letter-spacing: 0.025em !important; text-transform: none !important; cursor: pointer; } .fotp-checkbox-label input { flex: 0 0 auto; width: 19px; height: 19px; min-height: 0; margin: 1px 0 0; accent-color: #d50a0a; } /* Submit button */ .fotp-submit-button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 400px); min-height: 72px; margin: 31px auto 0; padding: 12px 25px; border: 2px solid #ffcc38; border-radius: 0; background: #d50a0a; color: #fff; box-shadow: 7px 8px 0 #000; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .fotp-submit-button:hover { transform: translate(-2px, -2px); box-shadow: 10px 11px 0 #000; filter: brightness(1.09); } .fotp-submit-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .fotp-submit-button:disabled { cursor: wait; filter: grayscale(0.5); opacity: 0.7; } .fotp-submit-main { font-size: 1.25rem; font-weight: 950; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; text-shadow: 2px 2px 0 #000; } .fotp-submit-sub { margin-top: 7px; color: #ffcc38; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; } /* Status messages */ .fotp-form-message { display: none; margin-top: 25px; padding: 15px 17px; border-left: 5px solid #ffcc38; background: #171613; color: #fff; font-size: 0.9rem; font-weight: 700; line-height: 1.45; text-align: center; } .fotp-form-message.is-visible { display: block; } .fotp-form-message.is-success { border-left-color: #ffcc38; } .fotp-form-message.is-error { border-left-color: #d50a0a; } /* Honeypot */ .fotp-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Mobile */ @media (max-width: 640px) { .fotp-whistle-section { padding: 0 13px; } .fotp-flag-divider { gap: 10px; } .fotp-whistle-toggle { grid-template-columns: auto 1fr auto; gap: 11px; min-height: 82px; padding: 11px 12px; } .fotp-whistle-image-wrap { width: 50px; height: 51px; padding-right: 9px; } .fotp-whistle-image { max-width: 43px; max-height: 46px; } .fotp-whistle-button-copy strong { font-size: 1.18rem; } .fotp-whistle-button-copy small { margin-top: 6px; font-size: 0.55rem; letter-spacing: 0.1em; } .fotp-toggle-indicator { width: 29px; height: 29px; font-size: 1.4rem; } .fotp-submission-panel { padding: 26px 17px; } .fotp-form-grid { grid-template-columns: 1fr; } .fotp-field-full { grid-column: auto; } .fotp-character-row { flex-direction: column; gap: 0; } } /* ================================================== INSTANT REPLAY CONTROLS ================================================== */ .fotp-replay-controls { position: relative; left: 50%; width: 100vw; margin: 0 0 0 -50vw; box-sizing: border-box; background: #0a0a08; border-bottom: 4px solid #34302b; } .fotp-page { margin-bottom: 0; padding-bottom: 0; } .fotp-replay-inner { width: min(100%, 1280px); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; } .fotp-replay-inner a { color: #ffffff; font-size: 0.9rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.035em; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease, opacity 180ms ease; } .fotp-prev { justify-self: start; text-align: left; } .fotp-home { justify-self: center; color: #d50a0a !important; text-align: center; } .fotp-next { justify-self: end; text-align: right; } /* Replay-control hover motion */ .fotp-prev:hover, .fotp-prev:focus-visible { color: #ffb612; transform: translateX(-5px); } .fotp-next:hover, .fotp-next:focus-visible { color: #ffb612; transform: translateX(5px); } .fotp-home:hover, .fotp-home:focus-visible { color: #ffffff !important; text-shadow: 0 0 7px rgba(213, 10, 10, 0.9), 0 0 15px rgba(213, 10, 10, 0.55); } /* Newest edition — inactive next link */ .fotp-replay-controls .disabled { opacity: 0.48; cursor: default; pointer-events: none; } /* ================================================== MOBILE ================================================== */ @media (max-width: 720px) { .fotp-finale { margin-top: 3.5rem; padding: 2.5rem 1.1rem; } .fotp-finale-gif { margin-bottom: 2rem; } .fotp-finale-title { font-size: clamp(1.65rem, 8vw, 2.35rem); } .fotp-finale-message { margin-top: 1.65rem; letter-spacing: 0.08em; } .fotp-whistle-btn { width: min(100%, 310px); } .fotp-replay-controls { grid-template-columns: 1fr; gap: 1.15rem; padding: 1.5rem 1rem; text-align: center; } .fotp-prev, .fotp-home, .fotp-next { justify-self: center; text-align: center; } .fotp-home { order: -1; } .fotp-prev:hover, .fotp-prev:focus-visible, .fotp-next:hover, .fotp-next:focus-visible { transform: none; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .fotp-whistle-btn, .fotp-replay-controls a { transition: none; } /* ========================================================= FLAG ON THE POST Footer & Submission Module v2.0 ========================================================= */ .fotp-footer-module { --fotp-orange: #ff7900; --fotp-red: #d50a0a; --fotp-deep-red: #c8102e; --fotp-black: #0a0a08; --fotp-dark: #34302b; --fotp-pewter: #696158; --fotp-yellow: #ffcc00; --fotp-white: #ffffff; --fotp-muted: #b8b4af; width: 100%; margin: 5rem auto 0; color: var(--fotp-white); text-align: center; } /* ========================================================= EDITION FINALE ========================================================= */ .fotp-finale { margin-bottom: 2.5rem; } .fotp-finale-message { margin: 0; font-size: clamp(1rem, 2.4vw, 1.35rem); font-weight: 900; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .fotp-edition-date { display: block; margin-top: 0.35rem; color: var(--fotp-orange); font-size: clamp(1.25rem, 3vw, 2rem); } .fotp-penalty-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; width: min(100%, 760px); margin: 2rem auto 0; } .fotp-penalty-divider-line { flex: 1; height: 2px; background: linear-gradient( 90deg, transparent, var(--fotp-yellow) ); } .fotp-penalty-divider-line:last-child { background: linear-gradient( 90deg, var(--fotp-yellow), transparent ); } .fotp-penalty-artwork-placeholder { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; min-height: 54px; padding: 0.6rem 0.8rem; border: 2px dashed rgba(255, 204, 0, 0.75); color: var(--fotp-yellow); font-size: 0.63rem; font-weight: 900; line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-4deg); } /* ========================================================= COMMUNITY CTA ========================================================= */ .fotp-community-callout { width: min(100%, 920px); margin: 0 auto; } .fotp-community-heading { margin: 0; font-size: clamp(1.65rem, 5vw, 3.4rem); font-weight: 950; line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase; } .fotp-community-heading span { display: block; color: #FFFFFF; } .fotp-community-heading strong { display: block; color: var(--fotp-yellow); } .fotp-community-intro { width: min(100%, 720px); margin: 1.25rem auto 2rem; color: #ddd9d4; font-size: clamp(1rem, 2.1vw, 1.15rem); line-height: 1.7; } /* ========================================================= WHISTLE TOGGLE ========================================================= */ .fotp-whistle-toggle { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: min(100%, 650px); margin: 0 auto; padding: 1rem 1.2rem; border: 2px solid var(--fotp-yellow); border-radius: 8px; background: linear-gradient( 145deg, #171714, var(--fotp-black) ); color: var(--fotp-white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 35px rgba(0, 0, 0, 0.35); cursor: pointer; text-align: left; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .fotp-whistle-toggle:hover { transform: translateY(-2px); border-color: var(--fotp-orange); box-shadow: 0 0 25px rgba(255, 121, 0, 0.18), 0 16px 38px rgba(0, 0, 0, 0.42); } .fotp-whistle-toggle:focus-visible { outline: 3px solid var(--fotp-orange); outline-offset: 4px; } .fotp-whistle-toggle[aria-expanded="true"] { border-color: var(--fotp-orange); background: linear-gradient( 145deg, #21140b, var(--fotp-black) ); } .fotp-whistle-artwork { display: inline-flex; align-items: center; justify-content: center; width: 82px; min-height: 64px; padding: 0.45rem; border: 1px dashed rgba(255, 204, 0, 0.7); color: var(--fotp-yellow); font-size: 0.58rem; font-weight: 900; line-height: 1.15; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .fotp-whistle-button-copy { display: flex; flex-direction: column; gap: 0.2rem; } .fotp-whistle-button-copy strong { color: var(--fotp-white); font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 950; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; } .fotp-whistle-button-copy small { color: var(--fotp-yellow); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.18em; text-transform: uppercase; } .fotp-toggle-indicator { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--fotp-yellow); font-size: 2rem; font-weight: 400; line-height: 1; transition: color 180ms ease, transform 280ms ease; } .fotp-whistle-toggle[aria-expanded="true"] .fotp-toggle-indicator { color: var(--fotp-orange); transform: rotate(180deg); } /* ========================================================= EXPANDABLE PANEL ========================================================= */ .fotp-submission-panel { display: grid; grid-template-rows: 0fr; width: min(100%, 820px); margin: 0 auto; opacity: 0; visibility: hidden; transition: grid-template-rows 420ms ease, opacity 260ms ease, visibility 0s linear 420ms; } .fotp-submission-panel.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 420ms ease, opacity 320ms ease 80ms, visibility 0s; } .fotp-submission-panel-inner { min-height: 0; overflow: hidden; } .fotp-submission-form, .fotp-confirmation { margin-top: 1rem; padding: clamp(1.2rem, 4vw, 2.25rem); border: 1px solid rgba(255, 204, 0, 0.38); border-top: 4px solid var(--fotp-yellow); border-radius: 7px; background: linear-gradient( 155deg, rgba(52, 48, 43, 0.97), rgba(10, 10, 8, 0.99) ); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38); text-align: left; } /* ========================================================= FORM LAYOUT ========================================================= */ .fotp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; } .fotp-field { min-width: 0; } .fotp-field-full { grid-column: 1 / -1; } .fotp-field label:not(.fotp-checkbox-label) { display: block; margin-bottom: 0.5rem; color: var(--fotp-white); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.09em; line-height: 1.35; text-transform: uppercase; } .fotp-required { color: var(--fotp-yellow); } .fotp-field input, .fotp-field select, .fotp-field textarea { width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; background: rgba(5, 5, 4, 0.82); color: var(--fotp-white); font: inherit; line-height: 1.45; transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease; } .fotp-field input, .fotp-field select { min-height: 50px; padding: 0.75rem 0.85rem; } .fotp-field textarea { min-height: 170px; padding: 0.9rem; resize: vertical; } .fotp-field input:focus, .fotp-field select:focus, .fotp-field textarea:focus { outline: none; border-color: var(--fotp-orange); background: var(--fotp-black); box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.16); } .fotp-field input::placeholder, .fotp-field textarea::placeholder { color: #8e8983; } .fotp-field input[type="file"] { padding: 0.7rem; cursor: pointer; } .fotp-field small { display: block; margin-top: 0.45rem; color: var(--fotp-muted); font-size: 0.77rem; line-height: 1.5; } .fotp-character-row { display: flex; justify-content: space-between; gap: 1rem; } .fotp-character-count-wrap { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .fotp-character-count-wrap.is-near-limit { color: var(--fotp-yellow); } .fotp-character-count-wrap.is-at-limit { color: #ff6868; } /* ========================================================= SCREENSHOT FILE LIST ========================================================= */ .fotp-file-list { display: grid; gap: 0.45rem; margin-top: 0.75rem; } .fotp-file-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--fotp-yellow); background: rgba(255, 255, 255, 0.055); color: #e8e5e1; font-size: 0.78rem; line-height: 1.35; } .fotp-file-item-name { min-width: 0; overflow-wrap: anywhere; } .fotp-file-item-size { flex: 0 0 auto; color: var(--fotp-muted); } .fotp-inline-message, .fotp-form-message { display: none; margin-top: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 4px; font-size: 0.82rem; font-weight: 750; line-height: 1.45; } .fotp-inline-message.is-visible, .fotp-form-message.is-visible { display: block; } .fotp-inline-message.is-error, .fotp-form-message.is-error { border: 1px solid rgba(255, 78, 78, 0.55); background: rgba(213, 10, 10, 0.14); color: #ffd0d0; } .fotp-inline-message.is-success, .fotp-form-message.is-success { border: 1px solid rgba(255, 204, 0, 0.45); background: rgba(255, 204, 0, 0.09); color: #fff1a8; } /* ========================================================= RULEBOOK / YOUR CALL CARD ========================================================= */ .fotp-call-card { position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 1.3rem 1.2rem; border-top: 2px solid var(--fotp-yellow); border-bottom: 2px solid var(--fotp-yellow); background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 7px, transparent 7px, transparent 14px ), rgba(0, 0, 0, 0.28); text-align: center; } .fotp-call-card-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; min-height: 36px; margin-bottom: 0.2rem; padding: 0.35rem 0.55rem; border: 1px dashed var(--fotp-yellow); color: var(--fotp-yellow); font-size: 0.55rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-3deg); } .fotp-call-card-kicker { color: var(--fotp-muted); font-size: 0.67rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .fotp-call-card-title { color: var(--fotp-yellow); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 950; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; } .fotp-call-card-definition { width: min(100%, 620px); margin: 0.35rem auto 0; color: #e4e0db; font-size: 0.92rem; line-height: 1.65; } /* ========================================================= ATTRIBUTION ========================================================= */ .fotp-attribution-preview { display: grid; justify-items: center; gap: 0.25rem; padding: 1rem; border: 1px solid rgba(255, 121, 0, 0.38); background: rgba(255, 121, 0, 0.055); text-align: center; } .fotp-attribution-label { color: var(--fotp-orange); font-size: 0.68rem; font-weight: 950; letter-spacing: 0.18em; text-transform: uppercase; } .fotp-attribution-name { color: var(--fotp-white); font-size: 1rem; font-weight: 900; overflow-wrap: anywhere; text-transform: uppercase; } /* ========================================================= CONSENT ========================================================= */ .fotp-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; text-align: left; } .fotp-checkbox-label input { flex: 0 0 auto; width: 19px; height: 19px; min-height: 0; margin-top: 0.15rem; accent-color: var(--fotp-orange); } .fotp-checkbox-label span { color: #dedad5; font-size: 0.86rem; line-height: 1.55; } /* ========================================================= SUBMIT BUTTON ========================================================= */ .fotp-submit-button, .fotp-submit-another { display: flex; align-items: center; justify-content: center; flex-direction: column; width: min(100%, 430px); min-height: 68px; margin: 1.75rem auto 0; padding: 0.85rem 1.25rem; border: 2px solid var(--fotp-yellow); border-radius: 5px; background: linear-gradient( 135deg, #181816, var(--fotp-black) ); color: var(--fotp-white); box-shadow: 0 9px 0 #050504, 0 15px 28px rgba(0, 0, 0, 0.32); cursor: pointer; text-transform: uppercase; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .fotp-submit-button:hover, .fotp-submit-another:hover { transform: translateY(-2px) rotate(-0.25deg); border-color: var(--fotp-orange); box-shadow: 0 11px 0 #050504, 0 18px 34px rgba(0, 0, 0, 0.4); } .fotp-submit-button:active, .fotp-submit-another:active { transform: translateY(5px); box-shadow: 0 4px 0 #050504, 0 9px 18px rgba(0, 0, 0, 0.32); } .fotp-submit-button:focus-visible, .fotp-submit-another:focus-visible { outline: 3px solid var(--fotp-orange); outline-offset: 4px; } .fotp-submit-button:disabled { cursor: wait; opacity: 0.72; } .fotp-submit-main { color: var(--fotp-white); font-size: 1.18rem; font-weight: 950; letter-spacing: 0.08em; line-height: 1.1; } .fotp-submit-sub { margin-top: 0.25rem; color: var(--fotp-yellow); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.2em; } /* ========================================================= CONFIRMATION STATE ========================================================= */ .fotp-confirmation { text-align: center; } .fotp-confirmation[hidden] { display: none; } .fotp-confirmation-artwork { display: inline-flex; align-items: center; justify-content: center; width: 115px; min-height: 66px; margin-bottom: 1rem; padding: 0.6rem; border: 2px dashed rgba(255, 204, 0, 0.75); color: var(--fotp-yellow); font-size: 0.62rem; font-weight: 950; line-height: 1.15; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-4deg); } .fotp-confirmation-kicker { margin: 0; color: var(--fotp-yellow); font-size: 0.78rem; font-weight: 950; letter-spacing: 0.2em; text-transform: uppercase; } .fotp-confirmation h3 { margin: 0.55rem 0 1rem; color: var(--fotp-white); font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 950; line-height: 1.05; text-transform: uppercase; } .fotp-confirmation p { width: min(100%, 650px); margin: 0.75rem auto; color: #dedad5; line-height: 1.65; } .fotp-confirmation-signoff { display: block; margin-top: 1.3rem; color: var(--fotp-orange); font-size: 1.2rem; font-weight: 950; letter-spacing: 0.08em; } .fotp-submit-another { flex-direction: row; color: var(--fotp-yellow); font-size: 0.82rem; font-weight: 950; letter-spacing: 0.12em; } /* ========================================================= REPLAY / EDITION NAVIGATION ========================================================= */ .fotp-replay-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; width: min(100%, 1000px); margin: 3rem auto 0; } .fotp-replay-link { display: flex; min-height: 105px; padding: 1rem; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(10, 10, 8, 0.8); color: var(--fotp-white); text-decoration: none; transition: transform 170ms ease, border-color 170ms ease, background 170ms ease; } a.fotp-replay-link:hover { transform: translateY(-2px); border-color: var(--fotp-orange); background: rgba(255, 121, 0, 0.08); } .fotp-replay-label { margin-bottom: 0.35rem; color: var(--fotp-pewter); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; } .fotp-replay-link strong { font-size: 0.87rem; font-weight: 950; line-height: 1.3; text-transform: uppercase; } .fotp-replay-home { border-color: rgba(255, 121, 0, 0.48); } .fotp-replay-next.is-disabled { color: #77736e; cursor: default; } /* ========================================================= HONEYPOT ========================================================= */ .fotp-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 720px) { .fotp-form-grid { grid-template-columns: 1fr; } .fotp-field-full { grid-column: auto; } .fotp-whistle-toggle { grid-template-columns: 68px 1fr auto; gap: 0.75rem; padding: 0.85rem; } .fotp-whistle-artwork { width: 68px; min-height: 58px; } .fotp-replay-controls { grid-template-columns: 1fr; } .fotp-replay-link { min-height: 86px; } } @media (max-width: 460px) { .fotp-community-heading { font-size: 1.75rem; } .fotp-whistle-toggle { grid-template-columns: 1fr auto; } .fotp-whistle-artwork { display: none; } .fotp-whistle-button-copy strong { font-size: 1.15rem; } .fotp-character-row { align-items: flex-start; flex-direction: column; gap: 0; } .fotp-file-item { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .fotp-submit-button, .fotp-submit-another { width: 100%; } } /* Respect reduced-motion accessibility settings. */ @media (prefers-reduced-motion: reduce) { .fotp-footer-module *, .fotp-footer-module *::before, .fotp-footer-module *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }