/* ------------------------------------------------------------------------------------------------ The Elite Community landing page (oikosofyseries-import/elite-community-sales-page). This is the design's own stylesheet, ported rather than reinvented. Its source is the concept render committed beside the brief (`work/active/oikosofyseries-import/elite-community-sales-page/artifacts/ elite-community-concept-{light,dark}.html`): every `#elite-spotlight-proposal …` rule was extracted from that file, and the only change is that its colour pairs are bound to the tokens in `brand.css`. The design's own values were already ours (`#171719`/`#f5f5f7` text, `#f4f4f5`/`#242427` panels, `#626268`/`#aaaab2` muted, `#dedee2`/`#3b3b41` lines, `#c72e25`/`#ff756b` accent). **Why the binding is not cosmetic.** The concept used `light-dark(a, b)`, which follows the *operating system*. This app's theme toggle sets `data-theme` on ``, so a page left on `light-dark()` would stay light for a reader who had chosen Dark — the one thing a theme must not do. Every pair now reads `var(--bg)`/`var(--surface)`/`var(--text)`/`--muted`/`--line`/`--accent`, so the toggle governs this page exactly as it governs the rest of the site. The port keeps the design's class names (`ep-…`) and its container id, so the correspondence with the render stays checkable line by line. Loaded only on this page (`{% block extra_css %}` in base.html): it is a landing page's stylesheet, and the rest of the site should not download it. ------------------------------------------------------------------------------------------------ */ #elite-spotlight-proposal { --ep-bg:var(--bg);--ep-panel:var(--surface);--ep-text:var(--text);--ep-muted:var(--muted);--ep-line:var(--line);--ep-accent:var(--accent);background:var(--ep-bg);color:var(--ep-text);font-family:system-ui,-apple-system,sans-serif;padding:24px;max-width:1200px;margin:auto } #elite-spotlight-proposal * { box-sizing:border-box } #elite-spotlight-proposal .ep-top { display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap } #elite-spotlight-proposal .ep-brand { font-weight:800;font-size:19px;letter-spacing:-.7px } #elite-spotlight-proposal a { color:inherit;text-decoration:none } #elite-spotlight-proposal .ep-nav { display:flex;gap:18px;align-items:center;font-size:13px } #elite-spotlight-proposal .ep-offer { margin:24px 0 0;padding:12px 16px;background:var(--ep-panel);border-radius:8px;font-size:13px } #elite-spotlight-proposal .ep-offer strong,#elite-spotlight-proposal .ep-eyebrow { color:var(--ep-accent) } #elite-spotlight-proposal .ep-hero { display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:42px 0;align-items:center } #elite-spotlight-proposal .ep-eyebrow { font-size:12px;font-weight:700;letter-spacing:1.2px } #elite-spotlight-proposal h1 { font-size:clamp(32px,4.5vw,52px);letter-spacing:-2px;line-height:1.05;margin:15px 0 20px;font-weight:750 } #elite-spotlight-proposal h2 { font-size:25px;letter-spacing:-.8px;line-height:1.2;margin:0 0 12px } #elite-spotlight-proposal h3 { font-size:16px;margin:12px 0 6px;line-height:1.3 } #elite-spotlight-proposal p { font-size:15px;line-height:1.6;margin:0 0 18px } #elite-spotlight-proposal .ep-muted { color:var(--ep-muted) } #elite-spotlight-proposal .ep-actions { display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 12px } #elite-spotlight-proposal .ep-primary,#elite-spotlight-proposal .ep-secondary { padding:12px 18px;border-radius:28px;font:600 14px system-ui;display:inline-flex;align-items:center;justify-content:center;min-height:44px } #elite-spotlight-proposal .ep-primary { background:var(--ep-text);color:var(--ep-bg) } #elite-spotlight-proposal .ep-secondary { background:var(--ep-panel);color:var(--ep-text) } #elite-spotlight-proposal .ep-small { font-size:12px;line-height:1.5 } #elite-spotlight-proposal .ep-stage { aspect-ratio:16/9;border-radius:12px;background:var(--surface);padding:25px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ep-text) } #elite-spotlight-proposal .ep-stage-title { font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1.15;max-width:270px } #elite-spotlight-proposal .ep-label { font-size:11px;font-weight:700;letter-spacing:1px } #elite-spotlight-proposal .ep-player-footer { display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:12px } #elite-spotlight-proposal .ep-mini { display:flex;gap:12px;margin-top:12px;align-items:center;padding:12px;background:var(--ep-panel);border-radius:10px;font-size:12px } #elite-spotlight-proposal .ep-mini-icon { font-size:12px;color:var(--ep-accent);font-weight:800 } #elite-spotlight-proposal .ep-section { padding:28px 0 } #elite-spotlight-proposal .ep-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px } #elite-spotlight-proposal .ep-thumb { aspect-ratio:16/9;background:var(--ep-panel);border-radius:12px;padding:18px;display:flex;flex-direction:column;justify-content:space-between } #elite-spotlight-proposal .ep-thumb b { font-size:20px;letter-spacing:-.7px;line-height:1.2 } #elite-spotlight-proposal .ep-thumb span { font-size:11px;color:var(--ep-muted) } #elite-spotlight-proposal .ep-section-head { display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:20px } #elite-spotlight-proposal .ep-pricing { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px } #elite-spotlight-proposal .ep-plan { padding:24px;background:var(--ep-panel);border-radius:12px } #elite-spotlight-proposal .ep-featured { outline:2px solid var(--ep-accent) } #elite-spotlight-proposal .ep-price { font-size:38px;font-weight:750;letter-spacing:-1px;margin:10px 0 } #elite-spotlight-proposal .ep-price small { font-size:14px;font-weight:400;letter-spacing:0 } #elite-spotlight-proposal .ep-strike { font-size:14px;color:var(--ep-muted);margin-top:18px } #elite-spotlight-proposal .ep-plan p { font-size:13px;margin:8px 0 } #elite-spotlight-proposal .ep-end { margin:24px 0 0;color:var(--ep-muted);font-size:12px } #elite-spotlight-proposal details { padding:16px 0;border-bottom:1px solid var(--ep-panel);font-size:14px } #elite-spotlight-proposal summary { min-height:32px;font-weight:600 } #elite-spotlight-proposal details p { padding-top:10px } #elite-spotlight-proposal a:focus-visible,#elite-spotlight-proposal summary:focus-visible { outline:3px solid #246bdd;outline-offset:4px } @media(max-width:650px) { #elite-spotlight-proposal { padding:18px } #elite-spotlight-proposal .ep-hero,#elite-spotlight-proposal .ep-pricing { grid-template-columns:1fr } #elite-spotlight-proposal .ep-grid { grid-template-columns:1fr } #elite-spotlight-proposal .ep-hero { padding:30px 0 } #elite-spotlight-proposal .ep-nav { gap:12px } #elite-spotlight-proposal h1 { letter-spacing:-1.2px } } #elite-spotlight-proposal .ep-primary { border:0 } #elite-spotlight-proposal #ep-spotlight { min-width:0;scroll-margin-top:24px } #elite-spotlight-proposal .ep-stage { height:auto;min-height:230px } #elite-spotlight-proposal #ep-preview-status { background:var(--ep-panel);padding:14px;border-radius:8px;margin:12px 0 } #elite-spotlight-proposal #ep-preview-status p { margin:0 } #elite-spotlight-proposal .ep-primary,#elite-spotlight-proposal .ep-secondary { transition:transform 160ms ease-out } #elite-spotlight-proposal button:focus-visible { outline:3px solid #246bdd;outline-offset:4px } @media(hover:hover) { #elite-spotlight-proposal .ep-primary:hover,#elite-spotlight-proposal .ep-secondary:hover { transform:translateY(-2px) } } @media(prefers-reduced-motion:reduce) { #elite-spotlight-proposal .ep-primary,#elite-spotlight-proposal .ep-secondary { transition:none;transform:none } } /* --- A defect in the design's own mobile rules, fixed here --------------------------------------- The design's `@media (max-width:650px)` block sets `min-height: 230px` on the stage. With `aspect-ratio: 16/9` a minimum *height* is also a minimum *width* — 230 × 16/9 = **409px** — so the design's own document scrolls sideways on a 390px phone (measured: 427px of content in a 390px viewport, and the stage 409px wide). The ratio is kept wherever it can be honoured; on a phone the panel's height follows its text instead, which is what the ratio was protecting anyway. */ @media (max-width: 650px) { #elite-spotlight-proposal .ep-stage { aspect-ratio: auto; min-height: 0; } #elite-spotlight-proposal .ep-stage-title { font-size: 22px; max-width: none; } /* Same reasoning for the cards: a real course title can run to three lines, and a fixed 16:9 box would either clip it or push the page wide. */ #elite-spotlight-proposal .ep-thumb { aspect-ratio: auto; min-height: 170px; } } /* --- Additions the concept render did not need, because it had no real content ------------------- Each is the design's own vocabulary extended to a real case: a real poster in the stage, a real link in a card, and a real button in a plan. Nothing here introduces a colour, radius or size that the ported rules do not already use. */ /* Real covers, in the design's own panel: the artwork gets the top of the panel and the words get a bar of their own under it. This is the second attempt — the first one put the title *over* the artwork and the result was a collision, because our generated lesson covers contain the lesson title: an overlaid title fights the picture it sits on. Two zones cannot collide. The card (`ep-thumb`) does the same thing: cover, then a panel with the course and its size. */ #elite-spotlight-proposal .ep-stage { padding: 0; overflow: hidden; display: block; /* The design's `aspect-ratio: 16/9` belongs to the *media*, not to the panel: the panel is its cover plus its words, and with the ratio left on the panel those words were clipped away by `overflow: hidden`. The fallback panel (no cover at all) keeps the ratio — see `.ep-stage--plain` below. */ aspect-ratio: auto; } #elite-spotlight-proposal .ep-stage__cover { display: block; width: 100%; /* `height: auto` is load-bearing, not tidiness: the markup carries `height="720"` (the media's real size, so the browser can reserve space before it loads), and that attribute is a presentational hint that sets a definite height — which silently defeats `aspect-ratio` and made the cover 720px tall in a 490px column. */ height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ep-panel); } #elite-spotlight-proposal .ep-stage__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; } #elite-spotlight-proposal .ep-stage__body .ep-stage-title { margin: 0; } #elite-spotlight-proposal a.ep-thumb { padding: 0; overflow: hidden; flex-direction: column; justify-content: flex-start; } #elite-spotlight-proposal .ep-thumb__cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ep-panel); } #elite-spotlight-proposal .ep-thumb__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; } /* A link inside a sentence must look like one (owner, 2026-10-11: "Make it look like a link"). The design's own rule -- `#elite-spotlight-proposal a { color: inherit; text-decoration: none }` -- is right for the nav, the pills and the cards, where the whole panel is the target; it is wrong for a link inside prose, where there is nothing else to say it is a link. This restores the browser's own affordance (an underline) and adds the accent on hover, in prose contexts only. */ #elite-spotlight-proposal p a, #elite-spotlight-proposal .ep-small a, #elite-spotlight-proposal .ep-muted a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } #elite-spotlight-proposal p a:hover, #elite-spotlight-proposal .ep-small a:hover, #elite-spotlight-proposal .ep-muted a:hover, #elite-spotlight-proposal p a:focus-visible { color: var(--ep-accent); text-decoration-thickness: 2px; } /* A card is a real link to a real course: same panel, but it must look clickable and respond. */ #elite-spotlight-proposal a.ep-thumb { display: flex; text-decoration: none; } /* The stage without a cover (no spotlight lesson on this database) is the design's flat panel. */ #elite-spotlight-proposal .ep-stage--plain { padding: 25px; aspect-ratio: 16 / 9; } #elite-spotlight-proposal a.ep-thumb:hover b, #elite-spotlight-proposal a.ep-thumb:focus-visible b { text-decoration: underline; text-underline-offset: 3px; } #elite-spotlight-proposal .ep-thumb + h3 a { text-decoration: none; } #elite-spotlight-proposal .ep-thumb .ep-count { color: var(--ep-muted); } /* A plan card carries its own call to action (the concept's plans were static, and connected no checkout). Kept to the card's own rhythm rather than the hero's 24px. */ #elite-spotlight-proposal .ep-plan .ep-actions { margin: 16px 0 0; } @media (prefers-reduced-motion: no-preference) { #elite-spotlight-proposal .ep-primary, #elite-spotlight-proposal .ep-secondary { transition: transform 160ms ease-out, opacity 160ms ease-out; } #elite-spotlight-proposal .ep-primary:hover, #elite-spotlight-proposal .ep-secondary:hover { transform: translateY(-1px); } }