/* LucidChallenge — challenge page (rendered in the FluentCommunity Frame). * Uses Craftaholic Witch design tokens (--cw-*) with safe fallbacks. */ .lucidchallenge { --lc-radius: var(--cw-radius-card, 16px); --lc-border: var(--cw-border, #e2e2e8); --lc-surface: #ffffff; --lc-text: var(--cw-ink, #1a1c20); --lc-muted: var(--cw-ink-light, #3f4948); --lc-primary: var(--cw-clay, #c67560); --lc-primary-dark: var(--cw-clay-dark, #914a38); --lc-clay-tint: var(--cw-clay-tint, rgba(198, 117, 96, 0.1)); --lc-teal: var(--cw-teal, #4a9494); --lc-teal-dark: var(--cw-teal-dark, #0f6667); --lc-teal-tint: var(--cw-teal-tint, rgba(74, 148, 148, 0.08)); --lc-teal-light: var(--cw-teal-light, #ccf5f5); --lc-shadow: var(--cw-shadow-card, 0 2px 12px rgba(45, 45, 53, 0.06)); --lc-shadow-raised: var(--cw-shadow-raised, 0 8px 32px rgba(45, 45, 53, 0.12)); color: var(--lc-text); line-height: 1.55; } .lc-page { max-width: 100%; } /* Flatten the theme's content card so only our own white cards show. Every * selector is guarded by :has(.lucidchallenge) so these overrides apply ONLY * to the challenge page — never to other FluentCommunity pages, even while * this stylesheet lingers in during SPA navigation. Removes the double * "card within a card" / extra padding layer. */ .entry.content-bg:has(.lucidchallenge) { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } .entry-content-wrap:has(.lucidchallenge), .entry-content:has(> .lucidchallenge) { padding: 0 !important; margin: 0 !important; } /* Remove Kadence single-content top padding when hosting the challenge page. */ .single-content:has(> .lucidchallenge) { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Prevent Kadence content spacing rules from adding top margin to the wrapper. */ .single-content > .lucidchallenge { margin-top: 0 !important; margin-bottom: 0 !important; } /* ---- Hero ---- */ .lc-hero { border-radius: var(--lc-radius); background: linear-gradient(120deg, var(--lc-teal-light) 0%, #eef3f4 45%, var(--lc-clay-tint) 100%); padding: 40px 24px; text-align: center; margin-bottom: 18px; } .lc-hero-eyebrow { display: block; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 700; color: var(--lc-teal-dark); margin-bottom: 12px; } .lc-hero-title { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; font-weight: 600; } /* Override Kadence's .single-content h* margin rules (0,1,1) — our 0,2,0 wins. */ .single-content .lc-hero-title, .single-content .lc-info-title, .single-content .lc-gate-title, .single-content .lc-makes-title, .single-content .lc-card-title { margin-top: 0; } .lc-hero-sub { margin: 0 auto; max-width: 520px; color: var(--lc-muted); font-size: 1.05rem; } .lc-hero-cta, .lc-hero-cta:link, .lc-hero-cta:visited, .lc-hero-cta:hover, .lc-hero-cta:focus, .lc-hero-cta:active { margin-top: 20px; color: #fff; } /* ---- Cards ---- */ .lc-card { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); box-shadow: none; padding: 20px; margin-bottom: 35px; } /* ---- Info card ---- */ .lc-pill { display: inline-block; border-radius: 999px; padding: 6px 16px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 16px; } .lc-pill.is-open { background: var(--lc-clay-tint); color: var(--lc-primary-dark); } .lc-pill.is-closed { background: var(--cw-fog, #f0f0f6); color: var(--lc-muted); } .lc-info-title { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; } .lc-info-desc { color: var(--lc-muted); font-size: 1.05rem; margin-bottom: 22px; } .lc-info-desc p:last-child { margin-bottom: 0; } /* Stat chips */ .lc-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; } .lc-chip { background: var(--lc-teal-tint); border-radius: 14px; padding: 16px 18px; } .lc-chip.is-accent { background: var(--lc-clay-tint); } .lc-chip-label { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; color: var(--lc-teal-dark); margin-bottom: 6px; } .lc-chip.is-accent .lc-chip-label { color: var(--lc-primary-dark); } .lc-chip-value { display: block; font-size: 1.02rem; font-weight: 600; color: var(--lc-text); } /* ---- Prize block ---- */ .lc-prize { background: var(--lc-clay-tint); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; } .lc-prize.has-photo { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: stretch; padding: 0; overflow: hidden; } .lc-prize-media { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 150px; } .lc-prize.has-photo .lc-prize-body { padding: 18px 20px 18px 0; align-self: center; } .lc-prize-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; color: var(--lc-primary-dark); margin-bottom: 8px; } .lc-prize-value { font-size: 1.1rem; font-weight: 600; color: var(--lc-text); line-height: 1.45; } .lc-prize-value p { margin: 0 0 6px; } .lc-prize-value p:last-child { margin-bottom: 0; } .lc-prize-value a { color: var(--lc-primary-dark); text-decoration: underline; } .lc-prize-value a:hover, .lc-prize-value a:focus { color: var(--lc-primary); } /* Reduced date row sits two-up under the prize block. */ .lc-chips--dates { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .lc-vote-note { margin: 0; padding: 14px 16px; background: var(--cw-fog, #f0f0f6); border-radius: 12px; font-size: 0.95rem; color: var(--lc-muted); } .lc-vote-note p { margin: 0; } .lc-vote-note p + p { margin-top: 6px; } .lc-vote-note a { color: var(--lc-teal-dark); text-decoration: underline; } .lc-vote-note a:hover { color: var(--lc-teal); } /* ---- Your entry ---- */ .lc-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; font-weight: 700; color: var(--lc-muted); margin-bottom: 14px; } .lc-gate-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; } .lc-gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 4px; } /* Eligibility clarifier under the sign-in actions (gated challenges). */ .lc-gate .lc-vote-note { margin-top: 16px; } .lc-vote-free { margin: 14px 0 0; color: var(--lc-muted); font-size: 0.95rem; } .lc-vote-free strong { color: var(--lc-teal); } /* Premium upgrade gate — free member viewing a members-only challenge. */ .lc-upgrade { background: var(--lc-clay-tint); border: 1px solid rgba(198, 117, 96, 0.22); border-radius: 14px; padding: 18px 20px; } .lc-upgrade-badge { display: inline-block; background: var(--lc-primary); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; } .lc-upgrade .lc-gate-title { color: var(--lc-primary-dark); } .lc-upgrade .lc-vote-free { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(198, 117, 96, 0.18); } .lc-muted { color: var(--lc-muted); } /* ---- Buttons (Craftaholic clay pill) ---- */ .lc-btn { display: inline-block; background: var(--lc-primary); color: #fff; border: none; border-radius: 999px; padding: 12px 28px; font-size: 0.98rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, transform 0.15s ease; } .lc-btn:hover, .lc-btn:focus { background: var(--lc-primary-dark); color: #fff; transform: translateY(-1px); } .lc-btn-ghost { background: transparent; color: var(--lc-teal-dark); border: 1.5px solid var(--lc-teal); } .lc-btn-ghost:hover, .lc-btn-ghost:focus { background: var(--lc-teal-tint); color: var(--lc-teal-dark); } /* ================================================================ * Locked entry — blurred composer preview behind a lock card. * Used for every gated state: login, role, upcoming, closed. * Grid-stacked so the card and the ghost share one cell and the * container grows to the taller of the two (no overflow). * ================================================================ */ .lc-entry-locked { display: grid; position: relative; } .lc-entry-locked > .lc-entry-ghost, .lc-entry-locked > .lc-lock-card { grid-area: 1 / 1; } /* The decorative composer preview — blurred, dimmed, non-interactive. */ .lc-entry-ghost { filter: blur(3px); opacity: 0.5; pointer-events: none; user-select: none; } .lc-ghost-composer { padding: 4px 2px; } .lc-ghost-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .lc-ghost-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--lc-teal-tint); display: flex; align-items: center; justify-content: center; color: var(--lc-teal); font-size: 1.05rem; } .lc-ghost-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lc-ghost-name { font-size: 0.97rem; font-weight: 700; color: var(--lc-text); } .lc-ghost-sub { font-size: 0.82rem; color: var(--lc-muted); } .lc-ghost-box { background: var(--cw-fog, #f3f4f6); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 11px; } .lc-ghost-line { height: 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.1); } .lc-ghost-line--title { height: 14px; width: 55%; background: rgba(0, 0, 0, 0.16); } .lc-ghost-line--short { width: 38%; } .lc-ghost-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .lc-ghost-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, 0.1); } .lc-ghost-btn { background: var(--lc-primary); color: #fff; border-radius: 999px; padding: 10px 24px; font-size: 0.95rem; font-weight: 600; } /* The floating lock card. */ .lc-lock-card { place-self: center; z-index: 2; width: min(100%, 420px); box-sizing: border-box; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow-raised); padding: 28px 26px; text-align: center; } .lc-lock-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cw-fog, #f3f4f6); color: var(--lc-muted); margin-bottom: 14px; } .lc-lock-title { margin: 0 0 8px; font-size: 1.3rem; font-weight: 600; color: var(--lc-text); } .lc-lock-body { margin: 0 auto; max-width: 32ch; color: var(--lc-muted); } .lc-lock-body strong { color: var(--lc-text); } .lc-lock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 0; } /* Pin button text colors — the FluentCommunity frame's link color overrides * .lc-btn. Solid pills stay white; ghost pills stay teal. */ .lc-lock-actions .lc-btn, .lc-lock-actions .lc-btn:link, .lc-lock-actions .lc-btn:visited, .lc-lock-actions .lc-btn:hover, .lc-lock-actions .lc-btn:focus { color: #fff !important; } .lc-lock-actions .lc-btn-ghost, .lc-lock-actions .lc-btn-ghost:link, .lc-lock-actions .lc-btn-ghost:visited, .lc-lock-actions .lc-btn-ghost:hover, .lc-lock-actions .lc-btn-ghost:focus { color: var(--lc-teal-dark) !important; } @media (max-width: 480px) { .lc-lock-card { padding: 22px 18px; } .lc-lock-actions .lc-btn { flex: 1 1 auto; text-align: center; } } /* ================================================================ * Winner reveal card — shown once a challenge is closed. * ================================================================ */ .lc-winner-reveal { overflow: hidden; } .lc-winner-eyebrow { display: block; margin-bottom: 14px; color: var(--lc-primary-dark); } .lc-winner-media { margin: 0 0 18px; height: clamp(180px, 38vw, 260px); border-radius: 14px; background-size: cover; background-position: center; background-color: var(--lc-teal-tint); } /* Maker identity row — avatar + name + make title. */ .lc-winner-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .lc-winner-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--lc-teal-tint); } .lc-winner-avatar.lc-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--lc-teal-dark); text-transform: uppercase; } .lc-winner-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lc-winner-name { font-size: 1.05rem; font-weight: 700; color: var(--lc-text); line-height: 1.25; } .lc-winner-make { font-size: 0.9rem; font-style: italic; color: var(--lc-muted); line-height: 1.35; } .lc-winner-blurb { margin: 0 0 18px; color: var(--lc-muted); } .lc-winner-blurb p { margin: 0 0 8px; } .lc-winner-blurb p:last-child { margin-bottom: 0; } /* Pin white text — the FluentCommunity frame's link color overrides .lc-btn. */ .lc-winner-link, .lc-winner-link:link, .lc-winner-link:visited, .lc-winner-link:hover, .lc-winner-link:focus, .lc-winner-link:active { color: #fff !important; } /* ================================================================ * Composer — unified community-post style * JS adds .lc-entry--composer to the outer card when eligible. * ================================================================ */ /* ---- Submitted state (one_entry_per_member, user already entered) ---- */ .lc-entry--submitted { background: var(--lc-surface); padding: 0; overflow: hidden; } .lc-entry--submitted .lc-eyebrow { display: block; padding: 18px 20px 12px; margin-bottom: 0; } .lc-submitted { display: flex; flex-direction: column; } /* Identity row: avatar · name + challenge · "view entry" pill */ .lc-composer-head { display: flex; align-items: center; gap: 12px; padding: 0 20px 16px; border-bottom: 1px solid var(--lc-border); } .lc-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--lc-teal-tint); } .lc-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; color: var(--lc-teal-dark); text-transform: uppercase; } .lc-composer-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lc-composer-title { font-size: 0.98rem; font-weight: 700; color: var(--lc-text); line-height: 1.25; } .lc-composer-sub { font-size: 0.85rem; color: var(--lc-muted); line-height: 1.3; } /* "View your entry →" pill in the header row */ .lc-submitted-pill { margin-left: auto; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--lc-primary, #c67560); border: 1.5px solid rgba(198, 117, 96, 0.4); border-radius: 999px; padding: 6px 14px; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .lc-submitted-pill:hover { background: var(--lc-clay-tint); border-color: var(--lc-primary, #c67560); text-decoration: none; } /* Success confirmation panel below the identity row */ .lc-submitted-body { margin: 16px 20px 20px; padding: 16px 18px; background: var(--lc-teal-tint); border: 1px solid var(--lc-teal-light); border-radius: 14px; } .lc-submitted-headline { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--lc-teal-dark, #0f6667); } .lc-submitted-icon { flex-shrink: 0; color: var(--lc-teal-dark, #0f6667); } .lc-submitted-text { margin: 0; font-size: 0.9rem; color: var(--lc-text, #374151); line-height: 1.55; } .lc-submitted-text a { color: var(--lc-primary, #c67560); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lc-submitted-text a:hover { color: var(--lc-primary-dark, #914a38); } /* Stack the identity row on narrow screens so the pill never crushes the name */ @media (max-width: 480px) { .lc-composer-head { flex-wrap: wrap; } .lc-submitted-pill { margin-left: 56px; order: 3; } } /* Composer mode: white card, no padding — FC's own markup provides internal layout. */ .lc-entry--composer { background: var(--lc-surface, #ffffff); padding: 0; overflow: hidden; } /* "YOUR ENTRY" eyebrow is hidden in composer mode — the FC card is self-explanatory. */ .lc-entry--composer > .lc-eyebrow { display: none; } /* ---- FC composer layout bridge — * FC's own CSS is scoped to its own component context and does not * cascade into our card. These rules replicate the layout explicitly. * ----------------------------------------------------------------- */ .lc-entry--composer .create_header { display: flex; align-items: flex-start; gap: 10px; padding: 16px 16px 0; } .lc-entry--composer .person_avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .lc-entry--composer .person_avatar img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; display: block; } /* Fallback initial circle for users without a profile photo. */ .lc-entry--composer .person_avatar .lc-avatar-initial { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; border: 2px dashed #d1d5db; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--lc-muted, #6b7280); } .lc-entry--composer .create_header_content { flex: 1; min-width: 0; } .lc-entry--composer .fcom_create_status_box_header { padding: 2px 0 8px; } /* Break the composer (gray box + toolbar + submit) out of the avatar's * indent so it spans the card's full width, aligned to the avatar's left * edge. The header (name/timestamp) stays beside the avatar. The 50px * offset = avatar (40px) + .create_header gap (10px). */ .lc-entry--composer .fcom_text_composer { padding: 0 !important; margin: 0 0 0 -50px !important; width: calc(100% + 50px); box-sizing: border-box; } .lc-entry--composer .fcom_editor { background: transparent !important; padding: 0 !important; margin: 0 !important; width: 100%; box-sizing: border-box; } /* Gray rounded box — JS moves only title + description into .lc-fields-box. */ .lc-entry--composer .lc-fields-box { background: var(--cw-fog, #f3f4f6); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; width: 100%; box-sizing: border-box; } .lc-entry--composer .feed_user_name { font-size: 0.97rem; font-weight: 700; color: var(--lc-text); line-height: 1.3; } .lc-entry--composer .feed_timestamp { display: block; color: #9ca3af; font-size: 0.82rem; margin-top: 1px; } /* ---- Inner form — no card-within-card ---- */ .lc-form { margin-top: 0; } .lc-form form { border: none !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; overflow: visible; width: 100%; box-sizing: border-box; } .lc-form .ff-el-group { margin: 0; padding: 2px 20px; } /* Visually hide field labels — placeholders do the work (a11y kept). */ .lc-form .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* No dividers between fields — seamless FC composer look. */ .lc-form .ff-el-group + .ff-el-group { border-top: none; } .lc-form input[type="text"], .lc-form input[type="email"], .lc-form textarea, .lc-form select { border: none !important; background: transparent !important; box-shadow: none !important; width: 100%; font-size: 0.98rem !important; color: var(--lc-text) !important; padding: 13px 0 !important; } /* Title field — slightly bolder */ .lc-form input[type="text"] { font-weight: 600; font-size: 1rem !important; } .lc-form input::placeholder, .lc-form textarea::placeholder { color: #9ca3af; font-weight: 400; } /* Title placeholder slightly bolder to signal it's the title slot */ .lc-form input[type="text"]::placeholder { font-weight: 500; } .lc-form textarea { min-height: 110px; resize: none; /* fixed height feels cleaner in a composer */ } /* No focus ring on the composer fields — the inputs sit inside the gray * box, which is the visual focus affordance. */ .lc-form input:focus, .lc-form textarea:focus, .lc-form select:focus, .lc-form input:focus-visible, .lc-form textarea:focus-visible, .lc-form select:focus-visible { outline: none !important; box-shadow: none !important; } /* Select — native chevron, transparent background */ .lc-form select { -webkit-appearance: auto; appearance: auto; cursor: pointer; } /* ---- Upload group — height-collapsed in flow, FluentForms JS still owns it ---- */ .lc-form .lc-upload-group-hidden { height: 0 !important; overflow: hidden !important; padding: 0 !important; border: none !important; margin: 0 !important; opacity: 0; pointer-events: none; } /* ---- Toolbar row (bottom of form) ---- */ .lc-form .ff-el-group:has(.ff-btn-submit), .lc-form .ff_submit_btn_wrapper { display: flex !important; align-items: center !important; padding: 10px 1px 14px !important; background: transparent !important; text-align: left !important; } /* Left: icon buttons */ .lc-toolbar-left { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } /* Icon button — 34 × 34, rounded square, muted color */ .lc-toolbar-btn { width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 8px !important; background: transparent !important; color: #9ca3af !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: background 0.15s ease, color 0.12s ease !important; font-size: 0 !important; line-height: 0 !important; box-shadow: none !important; flex-shrink: 0 !important; } .lc-toolbar-btn:hover { background: rgba(0, 0, 0, 0.06) !important; color: #6b7280 !important; } /* Photo selected — teal tint to confirm */ .lc-toolbar-btn.has-file { color: var(--lc-teal-dark, #0f6667) !important; background: var(--lc-teal-tint, rgba(74, 148, 148, 0.12)) !important; } /* SVG inherits color from button */ .lc-toolbar-btn svg { display: block; flex-shrink: 0; } /* ---- Photo preview thumbnails — own row between gray box and toolbar ---- */ .lc-photo-previews { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; padding: 8px 16px 4px; } .lc-photo-previews:empty { display: none; } .lc-photo-thumb { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1.5px solid rgba(0, 0, 0, 0.1); } .lc-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lc-photo-thumb__remove { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; font-size: 0; transition: background 0.12s; } .lc-photo-thumb__remove:hover { background: rgba(0, 0, 0, 0.85); } .lc-photo-thumb__remove svg { display: block; flex-shrink: 0; } /* Hashtag label — spacer + label before the submit */ .lc-hashtag-label { flex: 1; text-align: right; color: #9ca3af; font-size: 0.82rem; font-weight: 500; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Submit button ---- */ .lc-form .ff-btn-submit { flex-shrink: 0 !important; border-radius: 999px !important; background: var(--lc-primary) !important; border: none !important; color: #fff !important; font-weight: 600 !important; font-size: 0.88rem !important; padding: 11px 22px !important; min-height: 44px !important; box-shadow: none !important; cursor: pointer !important; transition: background 0.15s ease !important; } .lc-form .ff-btn-submit:hover { background: var(--lc-primary-dark) !important; } /* FluentForm success/error messages on-brand */ .lc-form .ff-message-success { background: var(--lc-teal-tint) !important; border: 1px solid var(--lc-teal-light) !important; border-radius: 12px !important; color: var(--lc-text) !important; } /* ---- Photo-required notice ---- */ .lc-photo-notice { display: flex; align-items: center; gap: 8px; padding: 9px 20px; margin: 0; background: rgba( 198, 117, 96, 0.09 ); border-top: 1px solid rgba( 198, 117, 96, 0.25 ); font-size: 0.83rem; color: var( --lc-primary-dark, #914a38 ); animation: lc-slide-in 0.18s ease; } .lc-photo-notice svg { flex-shrink: 0; } .lc-toolbar-btn.needs-photo { color: var( --lc-primary, #c67560 ) !important; animation: lc-btn-shake 0.35s ease; } @keyframes lc-btn-shake { 0%, 100% { transform: translateX( 0 ); } 20% { transform: translateX( -4px ) rotate( -4deg ); } 60% { transform: translateX( 4px ) rotate( 4deg ); } 80% { transform: translateX( -2px ); } } @keyframes lc-slide-in { from { opacity: 0; transform: translateY( -5px ); } to { opacity: 1; transform: translateY( 0 ); } } /* ---- Modal (popup mode) ---- */ .lc-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; } .lc-modal[hidden] { display: none; } .lc-modal-backdrop { position: fixed; inset: 0; background: rgba(26, 28, 32, 0.55); } .lc-modal-card { position: relative; background: var(--lc-surface); border-radius: var(--lc-radius); max-width: 640px; width: 100%; padding: 30px 26px 26px; box-shadow: var(--lc-shadow-raised); } .lc-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--lc-muted); } .lc-title { margin: 0 0 6px; font-size: 1.3rem; font-weight: 700; } /* ---- This month's makes ---- */ .lc-makes { margin-top: 6px; } .lc-makes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .lc-makes-title { margin: 0; font-size: 1.4rem; font-weight: 600; } .lc-sort { display: inline-flex; gap: 4px; background: var(--cw-fog, #f0f0f6); border-radius: 999px; padding: 4px; } .lc-sort-btn { border: none; background: transparent; border-radius: 999px; padding: 7px 16px; font-size: 0.85rem; font-weight: 600; color: var(--lc-muted); cursor: pointer; } .lc-sort-btn.is-active { background: #fff; color: var(--lc-text); box-shadow: var(--lc-shadow); } /* Make cards are links — keep them looking like cards, not links. */ a.lc-make-card { text-decoration: none; color: inherit; display: block; } .lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .lc-make-card { padding: 0; overflow: hidden; margin-bottom: 0; transition: box-shadow 0.15s ease, transform 0.15s ease; } .lc-make-card:hover { box-shadow: var(--lc-shadow-raised); transform: translateY(-2px); } .lc-card-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--cw-fog, #f0f0f6); } .lc-card-body { padding: 14px 16px; } .lc-card-title { margin: 4px 0 8px; font-size: 1.02rem; font-weight: 600; } .lc-react { color: var(--lc-muted); font-size: 0.85rem; } .lc-winner { display: inline-block; background: #fff4cc; color: #8a6d00; border-radius: 999px; padding: 3px 12px; font-size: 0.75rem; font-weight: 700; } .lc-empty { padding: 8px 0; } @media (max-width: 640px) { /* Tighten FluentCommunity's portal padding — scoped to this page only via * :has(), so no other FC page is affected. */ .feeds_main.fcom_wp_content:has(.lucidchallenge) { padding: 0 0.5rem 5rem !important; } /* Page: no extra side padding — Kadence content-area provides natural spacing */ .lc-page { padding: 0; } /* Hero: sits inline with the cards, same rounded corners. */ .lc-hero { padding: 24px 16px; border-radius: var(--lc-radius); margin-bottom: 8px; } /* Cards: slim inset, 25px gap between stacked cards */ .lc-card { padding: 10px 8px; margin: 0 0 25px; } /* Info title: fluid on small screens */ .lc-info-title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); } /* Chips: single column */ .lc-chips { grid-template-columns: 1fr; gap: 10px; } /* Date row stays two-up even on mobile (short values). */ .lc-chips--dates { grid-template-columns: 1fr 1fr; } .lc-chip { padding: 12px 14px; } /* Prize: stack photo above copy. */ .lc-prize.has-photo { grid-template-columns: 1fr; } .lc-prize-media { min-height: 180px; } .lc-prize.has-photo .lc-prize-body { padding: 16px 16px 18px; } /* Touch target: photo button meets 44px minimum */ .lc-toolbar-btn { width: 44px !important; height: 44px !important; } /* Composer: tighten the header row on mobile */ .lc-entry--composer .create_header { padding: 12px 12px 0; } /* Form fields: less horizontal padding so inputs aren't cramped */ .lc-form .ff-el-group { padding: 2px 12px; } /* Toolbar row: tighter, submit stretches to fill */ .lc-form .ff-el-group:has(.ff-btn-submit), .lc-form .ff_submit_btn_wrapper { padding: 8px 12px 12px !important; } .lc-form .ff-btn-submit { flex: 1 !important; text-align: center !important; } /* Gate actions: full-width stack */ .lc-gate-actions { flex-direction: column; } .lc-gate-actions .lc-btn { width: 100%; box-sizing: border-box; text-align: center; } /* Makes: stack sort below title */ .lc-makes-head { flex-direction: column; gap: 8px; align-items: flex-start; } .lc-sort { width: 100%; } /* Gallery: single column */ .lc-grid { grid-template-columns: 1fr; } /* Modal (popup mode): tighter spacing so form isn't cramped */ .lc-modal { padding: 2vh 8px; } .lc-modal-card { padding: 20px 16px 16px; } }