/* ========================================================================== Schedule / sprint cards — standalone module Extracted from css/style.css (commit 88aaa45). Self-contained: only the rules used by the live dynamic calendar (js/schedule.js + sprint cards). Fonts (Jost, Vollkorn) are expected from the page Google Fonts. ========================================================================== */ /* Outer width constraint for the cards list */ .schedule-grid-inner { max-width: 1100px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Sprint cards -------------------------------------------------------------------------- */ .sprint-cards-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.5rem; } .sprint-card { display: flex; align-items: stretch; background: #fff; border: 1px solid rgba(45, 45, 42, 0.16); border-radius: 14px; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; } @media (prefers-reduced-motion: no-preference) { .sprint-card:hover { box-shadow: 0 12px 32px rgba(45, 45, 42, 0.08); transform: translateY(-2px); } } .sprint-card__body { flex: 1 1 60%; padding: 2.25rem 2.5rem; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .sprint-card__dates { font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b66; } .sprint-card__title { font-family: 'Vollkorn', Georgia, serif; font-size: 1.875rem; line-height: 1.2; font-weight: 600; color: #2d2d2a; margin: 0; } .sprint-card__desc { color: #2d2d2a; font-size: 18px; /* body leading ~1.6 (≈29px) — within the 1.5–1.65 readable range */ line-height: 1.6; } .sprint-card__desc p { font-size: 18px; line-height: 1.4; margin: 0 0 1em; } .sprint-card__desc p:last-child { margin-bottom: 0; } .sprint-card__desc strong { font-weight: 600; } .sprint-card__desc em { font-style: italic; } .sprint-card__media { flex: 0 0 38%; max-width: 38%; overflow: hidden; background: #f6efe5; } .sprint-card__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } @media (max-width: 767.98px) { .sprint-card { border-radius: 22px; } .sprint-card__media { display: none; } .sprint-card__body { flex: 1 1 100%; padding: 1.5rem 1.5rem; gap: 0.65rem; } .sprint-card__title { font-size: 1.5rem; } .sprint-card__desc, .sprint-card__desc p { font-size: 18px; /* slightly tighter leading on the narrow mobile measure */ line-height: 1.55; } } /* -------------------------------------------------------------------------- "Показать следующую неделю" button (.btn / .btn--tra-black come from the page template, not this file) -------------------------------------------------------------------------- */ .schedule-load-more { min-width: 220px; } .schedule-load-more:disabled { opacity: 0.5; cursor: not-allowed; } .schedule-load-more--modern { border-radius: 999px; padding: 0.65rem 1.75rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .schedule-load-more--modern:focus-visible { outline: 2px solid rgba(45, 45, 42, 0.35); outline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .schedule-load-more--modern:not(:disabled):hover { transform: translateY(-1px); } } /* -------------------------------------------------------------------------- Disclaimer under the schedule -------------------------------------------------------------------------- */ .schedule-disclaimer { margin: 2rem auto 0; color: #6b6b66; font-size: 0.9375rem; line-height: 1.7; } .schedule-disclaimer p { font-size: 0.9375rem; line-height: 1.4; margin-bottom: 0.85rem; } .schedule-disclaimer p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Dark mode (site toggles body.theme--dark) Palette matches css/style.css: page #212223, surface #1c1d1e, body text #ccc, headings #fff. body.theme--dark beats the base and the mobile media query on specificity, so it applies at every size (the white card was most obvious on mobile, where the image is hidden). -------------------------------------------------------------------------- */ body.theme--dark .sprint-card { background: #1c1d1e; border-color: rgba(255, 255, 255, 0.12); } @media (prefers-reduced-motion: no-preference) { body.theme--dark .sprint-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } } body.theme--dark .sprint-card__dates { color: #9a9a93; } body.theme--dark .sprint-card__title { color: #fff; } body.theme--dark .sprint-card__desc, body.theme--dark .sprint-card__desc p { color: #ccc; } body.theme--dark .sprint-card__media { background: #232425; } body.theme--dark .schedule-disclaimer { color: #9a9a93; border-top-color: rgba(255, 255, 255, 0.12); } body.theme--dark .schedule-load-more--modern:focus-visible { outline-color: rgba(255, 255, 255, 0.4); } /* -------------------------------------------------------------------------- Subscription CTA card (sits after the schedule) -------------------------------------------------------------------------- */ .cta-card { max-width: 620px; margin: 4rem auto 0; padding: 3.25rem 3rem; border: 1px solid rgba(45, 45, 42, 0.22); border-radius: 20px; background: #fff; } .cta-card .section-id { display: block; margin-bottom: 0.5rem; } .cta-card .tra-title { margin-bottom: 0; } .cta-card .h2-title { margin-bottom: 0.75rem; } .cta-card__price { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.75rem; } .cta-card .small { margin-bottom: 0; opacity: 0.7; } /* Skool logo inline in a text line (CTA + hero) */ .skool-logo { height: .8em; width: auto; vertical-align: -.05em; margin-left: 0.15em; opacity: 1; } @media (max-width: 767.98px) { .cta-card { margin-top: 3rem; padding: 2.25rem 1.5rem; } } body.theme--dark .cta-card { background: #1c1d1e; border-color: rgba(255, 255, 255, 0.18); } /* -------------------------------------------------------------------------- Week flow — how a week feels (one row of cards, horizontal scroll) -------------------------------------------------------------------------- */ .week-flow { max-width: 1100px; margin: 0 auto; padding: 1rem 0 3.5rem; } .week-flow__head { text-align: center; margin-bottom: 2.5rem; padding: 0 16px; } .week-flow__head .section-id { display: block; margin-bottom: 0.85rem; } .week-flow__lead { font-size: 1.0625rem; line-height: 1.6; color: #6b6b66; max-width: 560px; margin: 0 auto; } /* Single line of cards with horizontal scroll */ .week-flow__list { list-style: none; margin: 0; padding: 0.5rem 16px 1.25rem 0; display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(45, 45, 42, 0.3) transparent; } .week-flow__list::-webkit-scrollbar { height: 8px; } .week-flow__list::-webkit-scrollbar-thumb { background: rgba(45, 45, 42, 0.25); border-radius: 999px; } .week-flow__list::-webkit-scrollbar-track { background: transparent; } .week-day { flex: 0 0 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.75rem 1.6rem; background: #fff; border: 1px solid rgba(45, 45, 42, 0.16); border-radius: 16px; transition: box-shadow 0.25s ease, transform 0.25s ease; } @media (prefers-reduced-motion: no-preference) { .week-day:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(45, 45, 42, 0.1); } } .week-day__label { display: block; font-family: 'Vollkorn', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: #2d2d2a; margin: 0; } .week-day__text { font-size: 0.9375rem; line-height: 1.6; color: #6b6b66; margin: 0; } /* Closing line — soft highlighted callout */ .week-flow__note { max-width: 760px; margin: 2rem auto 0; padding: 1.25rem 1.5rem; background: #f6efe5; border-left: 3px solid #2d2d2a; border-radius: 0 12px 12px 0; font-size: 1.0625rem; line-height: 1.55; font-weight: 600; color: #2d2d2a; } @media (max-width: 767.98px) { .week-flow { padding-bottom: 2.5rem; } .week-flow__head { margin-bottom: 2rem; } .week-day { flex-basis: 240px; padding: 1.5rem 1.35rem; } .week-flow__note { margin-left: 16px; margin-right: 16px; } } /* Dark mode */ body.theme--dark .week-flow__lead { color: #9a9a93; } body.theme--dark .week-flow__list { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } body.theme--dark .week-flow__list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); } body.theme--dark .week-day { background: #1c1d1e; border-color: rgba(255, 255, 255, 0.12); } body.theme--dark .week-day__label { color: #fff; } body.theme--dark .week-day__text { color: #9a9a93; } body.theme--dark .week-flow__note { background: #232425; border-left-color: #ccc; color: #fff; } /* -------------------------------------------------------------------------- Club fit — "для кого" / "кому не нужен" (before the CTA) -------------------------------------------------------------------------- */ .club-fit { max-width: 1100px; margin: 2rem auto 0; } .club-fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; } .club-fit__col { padding: 2rem 2rem 2.1rem; background: #fff; border: 1px solid rgba(45, 45, 42, 0.16); border-radius: 16px; } .club-fit__title { font-family: 'Vollkorn', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: #2d2d2a; margin: 0 0 1.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(45, 45, 42, 0.12); } .club-fit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .club-fit__list li { position: relative; padding-left: 2rem; font-size: 1rem; line-height: 1.55; color: #2d2d2a; } .club-fit__list li::before { position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8rem; font-weight: 700; line-height: 1; } .club-fit__col--yes .club-fit__list li::before { content: "✓"; background: rgba(111, 154, 127, 0.16); color: #5f8c6f; } .club-fit__col--no .club-fit__list li::before { content: "✕"; background: rgba(45, 45, 42, 0.08); color: #9a9088; } @media (max-width: 767.98px) { .club-fit__grid { grid-template-columns: 1fr; gap: 1.25rem; } .club-fit__col { padding: 1.6rem 1.4rem; } } body.theme--dark .club-fit__col { background: #1c1d1e; border-color: rgba(255, 255, 255, 0.12); } body.theme--dark .club-fit__title { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.12); } body.theme--dark .club-fit__list li { color: #ccc; } body.theme--dark .club-fit__col--yes .club-fit__list li::before { background: rgba(111, 154, 127, 0.22); color: #8fb89c; } body.theme--dark .club-fit__col--no .club-fit__list li::before { background: rgba(255, 255, 255, 0.08); color: #9a9489; }