/* ========================================================================== MARY'S 50TH PHOTO CHALLENGE — THE JAX CHALLENGE Standalone luxury Houston-night companion to the main itinerary. Palette and font choices intentionally echo the itinerary's own design system (deep plum/aubergine glass, champagne-gold hairlines) so the Challenge feels like the same world without sharing any files with it. Mobile-first: base rules target phones, larger screens layer on top. ========================================================================== */ :root { --plum-deep: #170c22; --plum: #2c1638; --aubergine: #3a1d45; --wine: #4a1730; --ink: #0f0816; --ivory: #f6efe4; --ivory-soft: rgba(246, 239, 228, 0.78); --ivory-faint: rgba(246, 239, 228, 0.56); --blush: #e79bc0; --champagne: #e9cd9a; --champagne-soft: rgba(233, 205, 154, 0.8); --champagne-dim: rgba(233, 205, 154, 0.32); --glass-fill: linear-gradient(155deg, rgba(58, 29, 69, 0.55) 0%, rgba(23, 12, 34, 0.68) 100%); --glass-border: rgba(233, 205, 154, 0.3); --glass-border-strong: rgba(233, 205, 154, 0.6); --glass-shadow: 0 24px 54px -24px rgba(6, 3, 10, 0.8), 0 2px 10px -2px rgba(6, 3, 10, 0.5); /* Bonus Challenge cards — a warm champagne / dusty rose-gold glass, distinct from the cooler plum glass used everywhere else, but built from the same palette (--wine, --champagne) so it still reads as part of one luxury system. */ --bonus-glow: radial-gradient(120% 140% at 50% -14%, rgba(233, 205, 154, 0.2) 0%, rgba(233, 205, 154, 0) 48%); --bonus-glass-fill: linear-gradient(155deg, rgba(163, 100, 80, 0.5) 0%, rgba(74, 23, 48, 0.66) 55%, rgba(23, 12, 34, 0.74) 100%); --bonus-border: rgba(226, 176, 128, 0.6); --bonus-border-strong: rgba(236, 196, 152, 0.88); --font-serif: "Playfair Display", "Iowan Old Style", Georgia, serif; --font-script: "Herr Von Muellerhoff", cursive; --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { /* Dark fallback so there's no flash before .page-bg paints. */ background: var(--plum-deep); color: var(--ivory); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Same page-background technique as Mary's main itinerary: a fixed, non-scrolling DIV behind the whole experience (not CSS background-attachment:fixed on , which iOS Safari miscalculates against the dynamic toolbar). `cover` + `center center` never stretches/distorts the art. No overlay on top — the photo is already dark/moody enough for light text and translucent glass panels to sit directly on it, exactly as in the main itinerary. */ .page-bg { position: fixed; inset: 0; z-index: 0; background-color: var(--plum-deep); background-image: url("../Images/background/background.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; } .challenge-page { position: relative; z-index: 1; } img { max-width: 100%; display: block; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; } .challenge-page { max-width: 960px; margin: 0 auto; padding: 0 0 48px; } /* ---- Hero ------------------------------------------------------------ */ .challenge-hero { width: 100%; line-height: 0; } .challenge-hero-img { width: 100%; height: auto; } /* ---- Shared glass panel ------------------------------------------------ */ .glass-panel { position: relative; background-image: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--glass-shadow); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } .eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin: 0 0 10px; } main { padding: 0 16px; } section + section { margin-top: 28px; } .section-heading { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; } .section-icon { width: 28px; height: 28px; border-radius: 8px; } .section-heading h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(20px, 5vw, 26px); color: var(--ivory); margin: 0; } /* ---- Intro ------------------------------------------------------------- */ .intro { margin-top: 20px; } .intro-panel { padding: 22px 20px 24px; } .intro-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(18px, 4.6vw, 23px); line-height: 1.35; color: var(--ivory); margin: 0 0 16px; } .intro-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .intro-steps li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ivory-soft); } .intro-steps li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 8px rgba(233, 205, 154, 0.6); } /* ---- Dashboard ---------------------------------------------------------- */ .dashboard { padding: 22px 20px 24px; transition: box-shadow 0.5s ease; } @media (prefers-reduced-motion: no-preference) { .dashboard.rank-just-changed { animation: rank-glow 1.6s ease; } } @keyframes rank-glow { 0% { box-shadow: var(--glass-shadow); } 35% { box-shadow: 0 0 0 1px var(--glass-border-strong), 0 0 40px 4px rgba(233, 205, 154, 0.35), var(--glass-shadow); } 100% { box-shadow: var(--glass-shadow); } } .dashboard-score-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .dashboard-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne-soft); margin: 0 0 6px; } .dashboard-score { font-family: var(--font-serif); font-weight: 800; font-size: clamp(34px, 10vw, 44px); line-height: 1; margin: 0; color: var(--ivory); } .dashboard-score-unit { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; margin-left: 6px; color: var(--champagne-soft); vertical-align: middle; } .dashboard-score-max { margin: 4px 0 0; font-size: 13px; color: var(--ivory-faint); } .dashboard-rank-block { text-align: right; } .dashboard-rank { font-family: var(--font-serif); font-weight: 700; font-size: clamp(17px, 4.6vw, 21px); color: var(--champagne); margin: 0; } .dashboard-progress-track { margin-top: 18px; height: 10px; border-radius: 999px; background: rgba(246, 239, 228, 0.12); border: 1px solid var(--champagne-dim); overflow: hidden; } .dashboard-progress-bar { height: 100%; border-radius: 999px; width: 0%; background: linear-gradient(90deg, var(--blush), var(--champagne)); box-shadow: 0 0 10px rgba(233, 205, 154, 0.5); } @media (prefers-reduced-motion: no-preference) { .dashboard-progress-bar { transition: width 0.6s ease; } } .dashboard-count { margin: 12px 0 0; font-size: 13px; color: var(--ivory-faint); text-align: center; } /* ---- Challenge cards ------------------------------------------------- */ .challenge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } .challenge-card { position: relative; background-image: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: var(--glass-shadow); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; } @media (prefers-reduced-motion: no-preference) { .challenge-card { transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.2s ease; } } .challenge-card.is-complete { border-color: var(--glass-border-strong); box-shadow: 0 0 0 1px var(--glass-border-strong), 0 12px 34px -18px rgba(233, 205, 154, 0.5), var(--glass-shadow); } .challenge-card.is-bonus { border-color: var(--bonus-border); background-image: var(--bonus-glow), var(--bonus-glass-fill); box-shadow: 0 0 22px -10px rgba(226, 176, 128, 0.35), var(--glass-shadow); } .challenge-card.is-bonus.is-complete { border-color: var(--bonus-border-strong); box-shadow: 0 0 0 1px var(--bonus-border-strong), 0 14px 38px -16px rgba(226, 176, 128, 0.55), var(--glass-shadow); } .challenge-bonus-ribbon { position: absolute; top: -10px; right: 14px; background: linear-gradient(135deg, var(--champagne), #c9a566); color: var(--ink); font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } .challenge-card-top { display: flex; align-items: center; justify-content: space-between; } .challenge-icon { font-size: 26px; line-height: 1; } .challenge-points { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; color: var(--champagne); background: rgba(233, 205, 154, 0.12); border: 1px solid var(--champagne-dim); padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .challenge-title { font-family: var(--font-serif); font-weight: 700; font-size: 17px; margin: 2px 0 0; color: var(--ivory); } .challenge-description { font-size: 13.5px; color: var(--ivory-soft); margin: 0; flex: 1; } .challenge-toggle { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--champagne-dim); background: rgba(246, 239, 228, 0.06); color: var(--ivory-soft); font-weight: 600; font-size: 13.5px; cursor: pointer; } @media (prefers-reduced-motion: no-preference) { .challenge-toggle { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } } .challenge-toggle:hover { border-color: var(--champagne-soft); } .challenge-toggle-check { display: none; } .challenge-card.is-complete .challenge-toggle { background: linear-gradient(135deg, rgba(233, 205, 154, 0.9), rgba(201, 165, 102, 0.9)); border-color: var(--champagne); color: var(--ink); } .challenge-card.is-complete .challenge-toggle-check { display: inline; } .challenge-card.is-bonus .challenge-toggle { border-color: rgba(226, 176, 128, 0.4); background: rgba(226, 176, 128, 0.1); } .challenge-card.is-bonus .challenge-toggle:hover { border-color: var(--bonus-border-strong); } .challenge-card.is-bonus.is-complete .challenge-toggle { background: linear-gradient(135deg, rgba(236, 196, 152, 0.92), rgba(181, 110, 88, 0.92)); border-color: var(--bonus-border-strong); color: var(--ink); } /* ---- Achievements -------------------------------------------------- */ .achievement-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .achievement-card { text-align: center; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--glass-border); background-image: var(--glass-fill); } .achievement-card.is-locked { opacity: 0.45; filter: grayscale(0.6); } .achievement-card.is-unlocked { opacity: 1; filter: none; border-color: var(--champagne); box-shadow: 0 0 0 1px var(--champagne-soft), 0 14px 30px -16px rgba(233, 205, 154, 0.55); } .achievement-icon { display: block; font-size: 26px; margin-bottom: 6px; } .achievement-title { font-family: var(--font-serif); font-weight: 700; font-size: 13.5px; margin: 0 0 4px; color: var(--ivory); } .achievement-description { font-size: 11.5px; color: var(--ivory-faint); margin: 0 0 8px; } .achievement-status { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-soft); } .achievement-card.is-locked .achievement-status { color: var(--ivory-faint); } /* ---- Proof section --------------------------------------------------- */ .proof-panel { padding: 24px 20px; text-align: center; } .proof-panel h2 { font-family: var(--font-serif); font-size: clamp(19px, 5vw, 23px); margin: 0 0 10px; } .proof-copy { font-size: 14px; color: var(--ivory-soft); margin: 0 0 18px; } .proof-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--champagne); background: linear-gradient(135deg, rgba(233, 205, 154, 0.95), rgba(201, 165, 102, 0.95)); color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; } .proof-pending-note { margin: 14px 0 0; font-size: 13px; color: var(--champagne-soft); } @media (prefers-reduced-motion: no-preference) { .proof-pending-note { animation: fade-in 0.4s ease; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---- Footer / Reset -------------------------------------------------- */ .challenge-footer { margin-top: 36px; padding: 0 16px; text-align: center; } .reset-progress-btn { background: none; border: none; color: rgba(246, 239, 228, 0.4); font-size: 12px; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px; min-height: 44px; } .reset-progress-btn:hover { color: var(--ivory-soft); } /* ========================================================================== Tablet / Desktop ========================================================================== */ @media (min-width: 640px) { main { padding: 0 24px; } .challenge-grid { grid-template-columns: repeat(2, 1fr); } .achievement-grid { grid-template-columns: repeat(5, 1fr); } .dashboard-rank-block { text-align: right; } } @media (min-width: 860px) { .challenge-page { padding-bottom: 64px; } main { padding: 0 32px; } .intro-panel { padding: 32px 40px; } .dashboard { padding: 30px 40px 32px; } .proof-panel { padding: 32px 48px; } }