/* ========================================================================== Clean Page Variant Stylesheet (index.php's public marketing homepage) ========================================================================== */ /* Design tokens for this "cheery" marketing theme. :root holds the LIGHT defaults (this page's original look); html[data-theme="dark"] below adds a dark equivalent that keeps the same cheery structure. Toggled by assets/js/theme.js / partials/theme_init.php via a `data-theme` attribute on -- same mechanism style.css uses for the portal pages. */ :root { --mkt-blue: #2563eb; --mkt-blue-hover: #1d4ed8; --mkt-blue-dark: #1e40af; --mkt-text-heading: #0f172a; --mkt-text-body: #334155; --mkt-text-muted: #475569; --mkt-border: #cbd5e1; --mkt-border-light: #e2e8f0; --mkt-bg-subtle: #f1f5f9; --mkt-bg-page: #f8fafc; --mkt-card-bg: #ffffff; --mkt-shadow-rgb: 15, 23, 42; --mkt-accent-navy: #1e3a8a; --mkt-danger: #dc2626; --mkt-warning: #ea580c; } html[data-theme="dark"] { --mkt-blue: #60a5fa; --mkt-blue-hover: #93c5fd; --mkt-blue-dark: #3b82f6; --mkt-text-heading: #f8fafc; --mkt-text-body: #cbd5e1; --mkt-text-muted: #94a3b8; --mkt-border: #334155; --mkt-border-light: #1e293b; --mkt-bg-subtle: #1e293b; --mkt-bg-page: #0f172a; --mkt-card-bg: #16213a; --mkt-shadow-rgb: 0, 0, 0; --mkt-accent-navy: #93c5fd; --mkt-danger: #f87171; --mkt-warning: #fb923c; } body.frameless-page { background: var(--mkt-bg-page); color: var(--mkt-text-body); margin: 0; padding: 0; } .frameless-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; box-sizing: border-box; } /* --- Clean Page Content Container (frameless: no border, no rounded corners -- content sits directly on the page background) --- */ .clean-page-card { position: relative; width: 100%; background: linear-gradient(180deg, var(--mkt-bg-page) 0%, var(--mkt-bg-subtle) 40%, var(--mkt-border-light) 100%); color: var(--mkt-text-body); } /* --- Clean Header Menu Bar (below hero banner) --- */ .clean-menu-bar { position: sticky; top: 0; z-index: 100; display: flex; justify-content: center; align-items: center; background: var(--mkt-card-bg); border-bottom: 2px solid var(--mkt-border); box-shadow: 0 4px 14px rgba(var(--mkt-shadow-rgb), 0.05); padding: 0 10px; flex-wrap: wrap; } .clean-menu-link { display: inline-flex; align-items: center; padding: 14px 26px; font-size: 0.95rem; font-weight: 700; color: var(--mkt-text-body); text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.2s ease; } .clean-menu-link:hover { color: var(--mkt-blue); background: rgba(var(--color-primary-rgb), 0.08); border-bottom-color: var(--mkt-blue); } /* The theme switcher rides along in the same bar -- keep it vertically centered and give it a little breathing room from the adjacent links. */ .clean-menu-bar .theme-toggle-group { margin: 8px 10px; } /* The link labels + generous padding wrap into a tall multi-row block on narrow screens -- drop the in-page nav entirely on mobile rather than let it eat that much vertical space above the fold. */ @media (max-width: 768px) { .clean-menu-bar { display: none; } } .clean-page-body { padding: 24px 24px 10px; } /* --- Cheery Section Card Overrides for Clean Page --- */ .clean-page-card h1, .clean-page-card h2, .clean-page-card h3, .clean-page-card h4, .clean-page-card h5, .clean-page-card h6 { color: var(--mkt-text-heading); } .clean-page-card p, .clean-page-card .section-intro { color: var(--mkt-text-muted); } /* Utility for one-off strong/emphasis text in marketing_clean.php that used to be a hardcoded inline color -- kept themeable via var(--mkt-text-heading). */ .mkt-text-strong { font-weight: 600; color: var(--mkt-text-heading); } .clean-page-card .marketing-section { position: relative; scroll-margin-top: 90px; margin: 0 auto 40px; max-width: 1100px; padding: 36px 32px; background: var(--mkt-card-bg); border-radius: 20px; border: 1px solid var(--mkt-border-light); box-shadow: 0 4px 12px rgba(var(--mkt-shadow-rgb), 0.05); } .clean-page-card .marketing-section:nth-of-type(even) { background: var(--mkt-bg-subtle); border-color: var(--mkt-border); } .clean-page-card .free-sundays-banner { background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.16) 100%); border: 1px solid var(--mkt-border); border-radius: 18px; padding: 24px 20px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12); } .clean-page-card .free-sundays-banner h2 { color: var(--mkt-danger); font-weight: 800; } .clean-page-card .free-sundays-banner p { color: var(--mkt-text-heading); font-weight: 500; } .clean-page-card .glass-panel, .clean-page-card .overlap-card, .clean-page-card .schedule-item { background: var(--mkt-card-bg); border: 1px solid var(--mkt-border); box-shadow: 0 4px 14px rgba(var(--mkt-shadow-rgb), 0.05); } .clean-page-card .eyebrow { color: var(--mkt-blue); } .clean-page-card a { color: var(--mkt-blue); font-weight: 600; } .clean-page-card a:hover { color: var(--mkt-blue-hover); } /* --- High-Contrast Hero Action Buttons --- */ .clean-page-card .hero-btn-primary { background: var(--mkt-blue) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important; font-weight: 700 !important; padding: 12px 24px; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .clean-page-card .hero-btn-primary:hover { background: var(--mkt-blue-hover) !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important; transform: translateY(-1px); } .clean-page-card .hero-btn-login { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 0.95rem; font-weight: 700; color: var(--mkt-text-heading) !important; background: var(--mkt-card-bg) !important; border: 2px solid var(--mkt-border) !important; border-radius: 10px; text-decoration: none; box-shadow: 0 4px 12px rgba(var(--mkt-shadow-rgb), 0.08); transition: all 0.2s ease; white-space: nowrap; } .clean-page-card .hero-btn-login:hover { background: var(--mkt-bg-page) !important; border-color: var(--mkt-danger) !important; color: var(--mkt-danger) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.18); } .meeple-icon-img { height: 22px; width: auto; object-fit: contain; margin-right: 8px; vertical-align: middle; } .clean-page-card .hero-colored-logo { height: 120px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 6px; filter: drop-shadow(0 2px 10px rgba(var(--mkt-shadow-rgb), 0.15)); } .clean-page-card .hero-tagline { text-align: center !important; color: var(--mkt-accent-navy) !important; font-size: 1.1rem !important; font-weight: 700 !important; margin: 4px auto 12px !important; display: block !important; } /* --- Tighten Hero Logo Box Width & Margins --- */ .clean-page-card .hero-banner-left { padding: 14px 18px !important; max-width: fit-content !important; margin-right: auto !important; } .clean-page-card .hero-banner-content { gap: 16px !important; padding: 0 8px !important; } /* --- Membership Pricing Tier Button Styles --- */ .clean-page-card .btn-primary { background: var(--mkt-blue) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important; font-weight: 700 !important; text-decoration: none; transition: all 0.2s ease; } .clean-page-card .btn-primary:hover { background: var(--mkt-blue-hover) !important; box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important; transform: translateY(-1px); } /* --- Image Rounded Corners & Smaller BOTC Logo (matching index.php) --- */ .clean-page-card .bleed-image img, .clean-page-card .overlap-image img, .clean-page-card .library-display-item img { border-radius: 16px !important; border: 1px solid var(--mkt-border) !important; box-shadow: 0 4px 12px rgba(var(--mkt-shadow-rgb), 0.06) !important; } .clean-page-card .event-logo { display: block; max-height: 140px !important; width: auto; margin-top: 0; margin-bottom: 16px; border-radius: 12px !important; box-shadow: 0 3px 10px rgba(var(--mkt-shadow-rgb), 0.08) !important; } .bleed-section.bleed-right { padding-left: 20px; gap: 40px; }