/* ========================================================================== NaTrenink - modern landing layer (Stripe-style, indigo → violet) Layered on top of Phoenix/Bootstrap. Restyles the public + club landing. ========================================================================== */ :root, [data-bs-theme] { --brand: #635bff; --brand-2: #9d6bff; --brand-3: #4f8bff; --brand-grad: linear-gradient(120deg, #635bff 0%, #9d6bff 55%, #c084fc 100%); --brand-grad-soft: linear-gradient(120deg, rgba(99, 91, 255, .12), rgba(157, 107, 255, .12)); /* --brand itself is only ever text on its own solid/gradient background (buttons) or on the tinted chips below, where white text already clears AA. The eyebrow labels (.hero-eyebrow/.section-eyebrow) print --brand AS text on a near-white chip background, which --brand alone fails (WAVE, 2026-08-19: 3.86:1 / 4.38:1, both below the 4.5:1 required for text this small) - a darkened variant for that one use, rather than darkening the brand colour everywhere buttons/gradients rely on it. */ --brand-text: #4f49cc; /* Map Phoenix primary onto the brand so existing utilities follow along */ --phoenix-primary: #635bff; --phoenix-primary-rgb: 99, 91, 255; --bs-primary: #635bff; --bs-primary-rgb: 99, 91, 255; } /* Phoenix compiles .text-success/.text-bg-success straight to a fixed #25b003 (its --phoenix-success is Sass-time only, not read via var() at runtime - overriding the custom property alone does nothing) - only 2.88:1 against white either direction (WAVE, 2026-08-19). Landing.css only loads on the public/club-landing layouts (see file header), so overriding the utility classes here is scoped to this stylesheet's own pages and never reaches the authenticated app. #146c43 is Bootstrap 5.3's own --bs-success-text-emphasis value - already chosen upstream for exactly this "green text/background that needs to clear AA" case. */ .landing .text-success { color: #146c43 !important; } .landing .text-bg-success { background-color: #146c43 !important; } /* Phoenix's default .form-label renders at .64rem (10.24px) - WAVE flags that as "Very small text" wherever it appears (20 instances across the auth/register-club/order modals, 2026-08-19). Scoped to .landing rather than overriding .form-label globally, since the authenticated app's forms use the same class everywhere and are out of scope here. */ .landing .form-label { font-size: .8rem; } /* This stylesheet only loads on public/club-landing layouts (see layouts/public.blade.php, layouts/club.blade.php), so a bare html rule here is safely scoped - it never reaches the authenticated app. Needed in addition to `.landing` below: the decorative .hero::before/ ::after blobs use negative left/right offsets that overflow body's box, and on mobile that horizontal overflow propagates to the root scrolling element (html) unless html's own overflow-x is constrained too. */ html { overflow-x: hidden; } .landing { --section-pad: 6rem; overflow-x: hidden; } /* html's own overflow-x:hidden above breaks the standard body->html scroll propagation, so (not ) owns the real page scrollbar here, independently of . Bootstrap's modal doesn't know that: on open it still sets body { overflow: hidden; padding-right: }, assuming that hiding body's overflow frees up scrollbar space it can pad back in. Since was never the scrolling element, no space is freed, so that padding just shrinks the content for real - a visible jump on every open/close. Neutralize it: body.modal-open is the class Bootstrap adds while any modal is shown. */ body.modal-open { overflow: visible !important; padding-right: 0 !important; } /* ---- Typography ---------------------------------------------------------- */ .landing h1, .landing h2, .landing h3 { letter-spacing: -0.02em; } .text-gradient { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Glass navbar -------------------------------------------------------- */ .landing-nav-wrap { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(17, 17, 26, .06); } [data-bs-theme="dark"] .landing-nav-wrap { background: rgba(13, 14, 22, .72); border-bottom: 1px solid rgba(255, 255, 255, .07); } .landing-nav-wrap .logo-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; } .landing .nav-link { transition: color .15s ease; } .landing .nav-link:hover { color: var(--brand) !important; } /* ---- Buttons ------------------------------------------------------------- */ .btn-brand { background: var(--brand-grad); border: none; color: #fff; font-weight: 700; box-shadow: 0 8px 20px -6px rgba(99, 91, 255, .55); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn-brand:hover, .btn-brand:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(99, 91, 255, .7); filter: brightness(1.04); } .btn-ghost { border: 1px solid rgba(17, 17, 26, .12); background: rgba(255, 255, 255, .6); color: var(--bs-body-color); font-weight: 700; transition: border-color .18s ease, transform .18s ease, background .18s ease; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } [data-bs-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); } /* ---- Hero ---------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; padding-top: 6.5rem; padding-bottom: 6.5rem; } .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; } .hero::before { width: 620px; height: 620px; top: -240px; left: -160px; background: radial-gradient(circle at 30% 30%, #8b7bff, transparent 70%); } .hero::after { width: 560px; height: 560px; top: -160px; right: -180px; background: radial-gradient(circle at 70% 30%, #c084fc, transparent 70%); } .hero-grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(99, 91, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 91, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); } .hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--brand-text); background: rgba(99, 91, 255, .1); border: 1px solid rgba(99, 91, 255, .2); } .hero h1 { font-weight: 900; line-height: 1.05; font-size: clamp(2.4rem, 6vw, 4.25rem); } .hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 40rem; margin-inline: auto; } /* ---- Section headings ---------------------------------------------------- */ .landing-section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .section-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; color: var(--brand-text); } .landing-section h2 { font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.8rem); } /* ---- Feature cards ------------------------------------------------------- */ .feature-card { position: relative; height: 100%; border: 1px solid rgba(17, 17, 26, .07); border-radius: 1.25rem; background: var(--bs-body-bg); padding: 2rem 1.75rem; text-align: center; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(99, 91, 255, .35); box-shadow: 0 24px 50px -22px rgba(40, 34, 92, .35); } [data-bs-theme="dark"] .feature-card { border-color: rgba(255, 255, 255, .08); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.25rem; color: #fff; box-shadow: 0 10px 22px -10px currentColor; } .feature-icon svg { width: 26px; height: 26px; } /* Per-feature colour accents - breaks up the grey */ .fi-indigo { background: linear-gradient(135deg, #635bff, #8b7bff); } .fi-violet { background: linear-gradient(135deg, #9d6bff, #c084fc); } .fi-blue { background: linear-gradient(135deg, #4f8bff, #6db3ff); } .fi-emerald { background: linear-gradient(135deg, #10b981, #34d399); } .fi-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); } .fi-rose { background: linear-gradient(135deg, #f43f5e, #fb7185); } /* ---- Pricing ------------------------------------------------------------- */ .pricing-section { position: relative; isolation: isolate; } .pricing-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 0%, rgba(99, 91, 255, .1), transparent 70%), radial-gradient(45% 45% at 85% 100%, rgba(192, 132, 252, .1), transparent 70%); } .pricing-card { position: relative; height: 100%; border: 1px solid rgba(17, 17, 26, .08); border-radius: 1.5rem; background: var(--bs-body-bg); padding: 2.25rem 1.9rem; transition: transform .22s ease, box-shadow .22s ease; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 26px 55px -24px rgba(40, 34, 92, .35); } [data-bs-theme="dark"] .pricing-card { border-color: rgba(255, 255, 255, .08); } .pricing-card.is-popular { border: none; background: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box, var(--brand-grad) border-box; border: 2px solid transparent; box-shadow: 0 30px 60px -26px rgba(99, 91, 255, .55); } .pricing-badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--brand-grad); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 18px -6px rgba(99, 91, 255, .6); } .pricing-amount { font-weight: 900; font-size: 3rem; line-height: 1; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pricing-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(16, 185, 129, .15); color: #10b981; flex: 0 0 auto; } .pricing-check svg { width: 13px; height: 13px; } .billing-toggle { display: inline-flex; padding: .3rem; border-radius: 999px; background: rgba(99, 91, 255, .08); border: 1px solid rgba(99, 91, 255, .15); } .billing-toggle button { border: none; background: transparent; border-radius: 999px; padding: .45rem 1.3rem; font-weight: 700; font-size: .9rem; color: var(--bs-body-color); transition: background .18s ease, color .18s ease, box-shadow .18s ease; } .billing-toggle button.active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(99, 91, 255, .6); } /* ---- Footer -------------------------------------------------------------- */ .landing-footer { background: #0d0e16; color: rgba(255, 255, 255, .65); } .landing-footer .logo-text { color: #fff; } .landing-footer a { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .15s ease; } .landing-footer a:hover { color: #fff; } /* ---- Club landing -------------------------------------------------------- */ .club-hero { position: relative; isolation: isolate; padding-top: 5rem; padding-bottom: 4rem; text-align: center; } .club-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% -10%, rgba(99, 91, 255, .18), transparent 70%), radial-gradient(50% 60% at 80% 0%, rgba(192, 132, 252, .16), transparent 70%); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .club-logo { max-height: 92px; border-radius: 18px; } .club-chip { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; line-height: 1; transition: transform .15s ease; } .club-chip:hover { transform: translateY(-2px); } .club-quick-tile { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--bs-body-color); text-decoration: none; border: 1px solid rgba(17, 17, 26, .1); background: rgba(255, 255, 255, .6); transition: border-color .18s ease, transform .18s ease, color .18s ease; } .club-quick-tile svg { width: 16px; height: 16px; } .club-quick-tile:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); } [data-bs-theme="dark"] .club-quick-tile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); } .club-card { border: 1px solid rgba(17, 17, 26, .08); border-radius: 1.25rem; background: var(--bs-body-bg); } /* Quick-access tiles + the single panel they switch on the club landing page */ .quick-panel-tile { cursor: pointer; } .quick-panel-tile.is-active { border-color: var(--brand); box-shadow: 0 24px 50px -22px rgba(40, 34, 92, .35); } #clubQuickPanels [data-panel] { display: none; } #clubQuickPanels [data-panel].is-active { display: block; } /* The schedule grid needs more room than the narrow 820px landing-page column gives it - break it out wider, centered on the viewport. */ #clubQuickPanels [data-panel="rozvrh"].is-active { width: 92vw; max-width: 1100px; margin-left: 50%; transform: translateX(-50%); } @media (max-width: 767.98px) { #clubScheduleCalendar { display: none !important; } #clubScheduleMobile { display: block !important; } } @media (min-width: 768px) { #clubScheduleMobile { display: none !important; } } [data-bs-theme="dark"] .club-card { border-color: rgba(255, 255, 255, .08); } /* ---- Scroll reveal ------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn-brand:hover, .btn-ghost:hover, .feature-card:hover, .pricing-card:hover { transform: none; } }