/* NeoYug Enrolled Programs — warm editorial rebuild of the account tab. */ .nyen{ --nyen-purple:#8D22C3; --nyen-purple-lite:#B96FE0; --nyen-ink:#15192C; --nyen-muted:#7A6C72; --nyen-soft:#9A8B80; --nyen-cream:#FBF3EE; --nyen-line:#F3EAE3; --nyen-radius:20px; font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--nyen-ink); -webkit-font-smoothing:antialiased; max-width:1280px; margin:0 auto; padding:14px 4px 40px; } .nyen *{box-sizing:border-box} /* header */ .nyen-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px} .nyen-welcome{margin:0;font-weight:400;font-size:32px;line-height:1.1;color:var(--nyen-ink)} .nyen-stats{font-size:14px;color:var(--nyen-soft)} /* spotlight */ .nyen-spot{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(115deg,#241645 0%,#5A3EA6 54%,#8D22C3 100%);margin-bottom:38px;padding:42px 46px;display:flex;align-items:center;gap:48px} .nyen-spot__col{flex:1;min-width:0;position:relative;z-index:2} .nyen-spot__eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:11px;letter-spacing:.14em;color:#FFD4C6;margin-bottom:16px} .nyen-spot__eyebrow svg{width:.8em;height:.8em} .nyen-spot__title{margin:0 0 10px;font-weight:700;font-size:36px;line-height:1.08;color:#fff;letter-spacing:-.01em} .nyen-spot__sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.75);margin-bottom:28px} .nyen-spot__sub .dot{opacity:.5} .nyen-spot__prog{max-width:380px;margin-bottom:28px} .nyen-spot__proglabel{display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:12px;color:rgba(255,255,255,.7);margin-bottom:10px} .nyen-spot__proglabel b{color:#fff;font-weight:600} .nyen-spot__track{height:7px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden} .nyen-spot__fill{height:100%;background:var(--nyen-purple-lite);border-radius:4px} .nyen-spot__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .nyen-spot__media{width:480px;max-width:46%;flex:none;position:relative;z-index:2} .nyen-spot__frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;box-shadow:0 22px 54px rgba(20,10,40,.5);background:#241645} .nyen-spot__frame .nyen-img{width:100%;height:100%;background-size:cover;background-position:center} .nyen-spot__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,10,40,.55),rgba(20,10,40,0) 55%)} .nyen-spot__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none} .nyen-spot__play span{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.34);color:var(--nyen-purple)} .nyen-spot__play svg{width:26px;height:26px;margin-left:3px} .nyen-spot__nexttag{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:500px;background:rgba(20,10,40,.55);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:11px} /* toolbar / pills */ .nyen-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px} .nyen-pills{display:inline-flex;flex-wrap:wrap;background:#fff;border-radius:500px;padding:5px;box-shadow:0 4px 14px rgba(38,26,72,.06)} .nyen-pill{border:none;background:transparent;color:#5A4B52;font-weight:500;font-size:13px;padding:9px 18px;border-radius:500px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s} .nyen-pill.is-active{background:var(--nyen-purple);color:#fff;font-weight:600} .nyen-tools .nyen-search{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #EADFD7;border-radius:500px;padding:10px 16px;color:var(--nyen-soft);font-size:13px} /* sections */ .nyen-section{margin-bottom:38px;padding:0} .nyen-section:last-child{margin-bottom:0} .nyen-grid{align-content:start} .nyen-sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px} .nyen-sec-head--split{justify-content:space-between} .nyen-sec-head h3{margin:0;font-weight:700;font-size:20px;color:var(--nyen-ink)} .nyen-count{font-size:13px;color:#B0B0B0} .nyen-sec-sub{margin:0 0 22px;font-size:13px;color:var(--nyen-soft)} .nyen-tznote{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:11px;color:var(--nyen-soft);background:#fff;border:1px solid #EADFD7;border-radius:500px;padding:7px 13px} .nyen-tznote b{color:var(--nyen-purple);font-weight:600} /* Sections swipe horizontally (scroll-snap) rather than wrapping into a grid. */ .nyen-grid{ display:flex; flex-wrap:nowrap; gap:22px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:6px 2px 14px; margin:0 -2px; scrollbar-width:thin; scrollbar-color:var(--nyen-purple-lite) transparent; } .nyen-grid > *{ flex:0 0 clamp(240px,32%,320px); scroll-snap-align:start; } .nyen-grid::-webkit-scrollbar{ height:8px; } .nyen-grid::-webkit-scrollbar-thumb{ background:var(--nyen-purple-lite); border-radius:500px; } .nyen-grid::-webkit-scrollbar-track{ background:transparent; } /* cards */ .nyen-card{background:#fff;border-radius:var(--nyen-radius);overflow:hidden;box-shadow:0 4px 30px rgba(38,26,72,.07);display:flex;flex-direction:column} .nyen-card--live{border:1.5px solid rgba(141,34,195,.35);box-shadow:0 4px 20px rgba(141,34,195,.07)} .nyen-card__media{position:relative;aspect-ratio:16/9} .nyen-card__img{width:100%;height:100%;background-size:cover;background-position:center;background-color:#EFE3F6} .nyen-card__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .nyen-card__play svg{width:18px;height:18px;margin-left:2px;color:var(--nyen-purple)} .nyen-card--masterclass .nyen-card__play{} .nyen-card--masterclass .nyen-card__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(20,10,40,.45),rgba(20,10,40,0) 60%)} .nyen-card--masterclass .nyen-card__play{z-index:2} .nyen-card--masterclass .nyen-card__play span,.nyen-card--masterclass .nyen-card__play{} .nyen-card__dur{position:absolute;bottom:10px;right:12px;z-index:2;padding:4px 9px;border-radius:500px;background:rgba(20,10,40,.6);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:10px} .nyen-card__count{position:absolute;bottom:10px;left:10px;padding:4px 10px;border-radius:500px;background:rgba(20,10,40,.55);backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:9px} .nyen-card__body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column} .nyen-card--live .nyen-card__body{padding:14px 15px 15px} .nyen-card__title{margin:0 0 8px;font-weight:700;font-size:17px;line-height:1.25;color:var(--nyen-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.25em * 2)} .nyen-card--live .nyen-card__title{font-size:16px;line-height:1.2;margin-bottom:3px} .nyen-card__meta{font-size:13px;color:var(--nyen-muted);margin-bottom:16px} .nyen-card--live .nyen-card__meta{font-size:11.5px;line-height:1.3;margin-bottom:11px} .nyen-card__progline{display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:12px;color:var(--nyen-muted);margin-bottom:7px} .nyen-card__pct{color:var(--nyen-purple);font-weight:600} /* progress bars — brand purple, no orange */ .nyen-progress{height:6px;border-radius:3px;background:#F0E6DE;overflow:hidden;margin-bottom:16px} .nyen-progress__fill{height:100%;background:var(--nyen-purple)} /* badges */ .nyen-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:500px;font-weight:600;font-size:10px;letter-spacing:.06em;color:#fff} .nyen-badge svg{width:1em;height:1em} .nyen-badge--tag{background:rgba(141,34,195,.92)} .nyen-badge--mc{background:rgba(255,85,29,.92)} .nyen-badge--done{background:rgba(40,190,100,.95)} .nyen-badge--next,.nyen-badge--livenow{top:10px;left:10px;padding:4px 10px;font-size:9px;font-weight:700} .nyen-badge--next{background:var(--nyen-purple)} .nyen-badge--livenow{background:var(--nyen-purple)} .nyen-badge--muted{top:10px;left:10px;padding:4px 10px;font-size:9px;font-weight:700;background:rgba(20,10,40,.55)} /* live session rows */ .nyen-sessions{display:flex;flex-direction:column;margin-bottom:12px} .nyen-srow{display:flex;align-items:center;gap:8px;padding:7px 2px;border-top:1px solid var(--nyen-line)} .nyen-srow:first-child{border-top:none} .nyen-srow__num{flex:none;width:18px;height:18px;border-radius:50%;background:#F0E6DE;color:var(--nyen-muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px} .nyen-srow__num--done{background:#EFE3F6;color:var(--nyen-purple)} .nyen-srow__num--done svg{width:9px;height:9px} .nyen-srow__num--live{background:var(--nyen-purple);color:#fff} .nyen-srow__title{flex:1;min-width:0;font-weight:600;font-size:12px;line-height:1.3;color:var(--nyen-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nyen-srow--done .nyen-srow__title{color:#B0A79F} .nyen-srow__when{flex:none;font-weight:500;font-size:11px;color:var(--nyen-muted)} .nyen-srow__rec{flex:none;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:11px;color:var(--nyen-purple);text-decoration:none} .nyen-srow__rec svg{width:1.1em;height:1.1em} .nyen-srow__soon{flex:none;font-weight:500;font-size:10px;color:#B0A79F} .nyen-srow__tag{flex:none;font-weight:700;font-size:10px;letter-spacing:.04em;color:var(--nyen-purple)} .nyen-srow__join{flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--nyen-purple);color:#fff;border-radius:500px;padding:6px 12px;font-weight:600;font-size:11px;text-decoration:none} .nyen-srow__cal{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#fff;color:var(--nyen-purple);border:1px solid rgba(141,34,195,.45);border-radius:8px;text-decoration:none} .nyen-srow__cal svg{width:.85em;height:.85em} .nyen-srow--upcoming.is-next{background:rgba(141,34,195,.08);border-radius:9px;margin:2px 0;padding:7px 8px;border-top:none} .nyen-srow--upcoming.is-next .nyen-srow__num{background:var(--nyen-purple);color:#fff} .nyen-srow--upcoming.is-next .nyen-srow__when{color:var(--nyen-purple)} .nyen-srow--live{background:rgba(255,85,29,.1);border-radius:9px;margin:2px 0;padding:7px 8px;border-top:none} /* buttons */ .nyen-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:500px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;padding:12px 20px} .nyen-btn svg{width:1.05em;height:1.05em} .nyen-btn--primary,.nyen-btn--primary:link,.nyen-btn--primary:visited,.nyen-btn--primary:focus,.nyen-btn--primary:focus-visible,.nyen-btn--primary:active{width:100%;background:var(--nyen-purple);color:#fff} .nyen-btn--primary:hover{background:#7A1BAC;color:#fff} .nyen-card--live .nyen-btn--primary{padding:11px;font-size:13px;box-shadow:0 8px 18px rgba(141,34,195,.22);margin-top:auto} .nyen-btn--lg{padding:15px 34px;font-size:15px;box-shadow:0 14px 26px rgba(141,34,195,.28)} .nyen-btn--ghost,.nyen-btn--ghost:link,.nyen-btn--ghost:visited,.nyen-btn--ghost:focus,.nyen-btn--ghost:focus-visible,.nyen-btn--ghost:active{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);font-weight:500} .nyen-btn--ghost:hover{color:#fff;background:rgba(255,255,255,.08)} /* live dot */ .nyen-livedot{width:7px;height:7px;border-radius:50%;background:#fff;animation:nyen-pulse 1.4s ease-in-out infinite} @keyframes nyen-pulse{0%,100%{opacity:1}50%{opacity:.35}} /* filter empty note */ .nyen-empty-filter{padding:60px 0;text-align:center;font-weight:500;font-size:15px;color:var(--nyen-soft)} /* empty state */ .nyen-empty{padding:60px 20px 72px;display:flex;flex-direction:column;align-items:center;text-align:center} .nyen-empty__icon{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFEDE7,#F7C6B5);display:flex;align-items:center;justify-content:center;margin-bottom:28px} .nyen-empty__title{margin:0 0 12px;font-weight:700;font-size:30px;line-height:1.2;color:var(--nyen-ink)} .nyen-empty__text{margin:0 0 30px;font-size:16px;line-height:1.6;color:var(--nyen-muted);max-width:440px} /* tablet */ @media (max-width:1024px){ .nyen-grid{grid-template-columns:repeat(2,1fr)} .nyen-spot{padding:34px} .nyen-spot__title{font-size:30px} } /* mobile */ @media (max-width:680px){ .nyen{padding:12px 2px 32px} .nyen-welcome{font-size:26px} .nyen-spot{flex-direction:column;align-items:stretch;gap:22px;padding:22px;border-radius:22px} .nyen-spot__media{width:100%;max-width:100%;order:-1} .nyen-spot__title{font-size:24px} .nyen-grid{grid-template-columns:1fr} .nyen-pills{width:100%;overflow-x:auto;flex-wrap:nowrap} .nyen-tools{display:none} .nyen-sec-head--split{flex-wrap:wrap;gap:10px} } /* ---- Interaction guards ------------------------------------------------- This tab renders inside the live theme, whose stylesheet underlines links and buttons on hover and repaints them with its own link-hover blue. Kill both across the whole component, then re-assert each element's own colour at a higher specificity so nothing loses its brand tint. */ .nyen a, .nyen a:link, .nyen a:visited, .nyen a:hover, .nyen a:focus, .nyen a:active, .nyen button, .nyen button:hover, .nyen button:focus, .nyen button:active { text-decoration: none !important; } /* Filter pills: no underline, no colour flip — just the soft background. */ .nyen .nyen-pill, .nyen .nyen-pill:hover, .nyen .nyen-pill:focus, .nyen .nyen-pill:active { color: #5A4B52; text-decoration: none !important; } .nyen .nyen-pill:hover { background: rgba(141, 34, 195, .07); } .nyen .nyen-pill.is-active, .nyen .nyen-pill.is-active:hover, .nyen .nyen-pill.is-active:focus { background: var(--nyen-purple); color: #fff; } .nyen .nyen-pill:focus-visible { outline: 2px solid var(--nyen-purple); outline-offset: 2px; } /* Anchors that carry their own colour keep it through every state. */ .nyen .nyen-btn--primary, .nyen .nyen-btn--primary:link, .nyen .nyen-btn--primary:visited, .nyen .nyen-btn--primary:hover, .nyen .nyen-btn--primary:focus, .nyen .nyen-btn--primary:active { color: #fff; } .nyen .nyen-btn--ghost, .nyen .nyen-btn--ghost:link, .nyen .nyen-btn--ghost:visited, .nyen .nyen-btn--ghost:hover, .nyen .nyen-btn--ghost:focus, .nyen .nyen-btn--ghost:active { color: #fff; } .nyen .nyen-srow__join, .nyen .nyen-srow__join:link, .nyen .nyen-srow__join:visited, .nyen .nyen-srow__join:hover, .nyen .nyen-srow__join:focus, .nyen .nyen-srow__join:active { color: #fff; } .nyen .nyen-srow__rec, .nyen .nyen-srow__rec:link, .nyen .nyen-srow__rec:visited, .nyen .nyen-srow__rec:hover, .nyen .nyen-srow__rec:focus, .nyen .nyen-srow__rec:active, .nyen .nyen-srow__cal, .nyen .nyen-srow__cal:link, .nyen .nyen-srow__cal:visited, .nyen .nyen-srow__cal:hover, .nyen .nyen-srow__cal:focus, .nyen .nyen-srow__cal:active { color: var(--nyen-purple); } /* Live-session rows: purple, never the brand orange. */ .nyen .nyen-srow--live { background: rgba(141, 34, 195, .12); } .nyen-spot[hidden]{display:none} /* ==== v1.12.0: live card action stack ================================ The live card grew a second CTA. `margin-top:auto` used to sit on the calendar button itself, pinning it to the bottom of the flex card; it now belongs to the wrapper, or the two buttons would be pushed apart. */ .nyen-card__actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; } .nyen-card--live .nyen-card__actions .nyen-btn{margin-top:0} /* Secondary CTA: same footprint as the primary, quieter ink. The purple outline reads as an action without competing with "Add all dates". */ .nyen-btn--secondary, .nyen-btn--secondary:link, .nyen-btn--secondary:visited, .nyen-btn--secondary:focus, .nyen-btn--secondary:focus-visible, .nyen-btn--secondary:active{ width:100%; background:transparent; color:var(--nyen-purple); border:1.5px solid var(--nyen-purple); box-shadow:none; } .nyen-btn--secondary:hover{ background:var(--nyen-purple); color:#fff; } .nyen .nyen-btn--secondary, .nyen .nyen-btn--secondary:link, .nyen .nyen-btn--secondary:visited, .nyen .nyen-btn--secondary:focus, .nyen .nyen-btn--secondary:active{color:var(--nyen-purple)} .nyen .nyen-btn--secondary:hover{color:#fff} .nyen-card--live .nyen-btn--secondary{padding:11px;font-size:13px} /* ------------------------------------------------------------------ * Event tickets (Neo Event Manager Pro, [neo_evt_my_tickets bare="1"]) * * The shortcode is asked for classes without inline styles, so the ticket * takes the same white card, radius and shadow as a program. QR on top, * facts in a label grid beneath, code and PDF on one footer row. * * The
the shortcode wraps its list in carries the theme's * `section { margin-block: 4rem }`, which opened a 64px hole between the * "Event tickets" heading and the first card. Zeroed here rather than in * the shortcode, because on WooCommerce's order-received page that margin * is the only thing separating the tickets from the order table. * ------------------------------------------------------------------ */ .nyen-section--tickets .neo-evt-tickets{margin:0;padding:0} .nyen-section--tickets .neo-evt-tickets > h2, .nyen-section--tickets .neo-evt-tickets > p{display:none} /* ── ticket cards ────────────────────────────────────────────────────────── Four across, and the QR grows to fill the card. On a 1500px page that puts the code at roughly 300px, which a door scanner reads straight off the grid without anyone opening anything. The expanded view is still there for a phone, where four across is one across. The card is self-sufficient: every fact is on its face. Nothing is hidden behind the tap. */ .nyen-section--tickets .neo-evt-tickets-list{ --nyen-tkt-gutter:18px; display:flex; flex-wrap:nowrap; gap:22px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:6px 2px 14px; margin:0 -2px; list-style:none; scrollbar-width:thin; scrollbar-color:var(--nyen-purple-lite) transparent; } .nyen-section--tickets .neo-evt-tickets-list > .neo-evt-ticket{ flex:0 0 clamp(240px,32%,320px); scroll-snap-align:start; } .nyen-section--tickets .neo-evt-tickets-list::-webkit-scrollbar{ height:8px; } .nyen-section--tickets .neo-evt-tickets-list::-webkit-scrollbar-thumb{ background:var(--nyen-purple-lite); border-radius:500px; } .nyen-section--tickets .neo-evt-tickets-list::-webkit-scrollbar-track{ background:transparent; } /* Tickets for the same event are clubbed into one card; the rest stay in the DOM for the lightbox to swipe through but are hidden from the rail. */ .nyen-section--tickets .neo-evt-ticket--clubbed{ display:none; } /* Belt-and-suspenders: hide clubbed tickets even if the section wrapper or specificity shifts. */ .neo-evt-ticket--clubbed, [data-nem-clubbed]{ display:none !important; } .nyen-section--tickets .neo-evt-ticket-count{ display:inline-block; margin-top:6px; background:rgba(255,255,255,.16); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:500px; } .nyen-section--tickets .neo-evt-ticket{ background:#261A48;border-radius:var(--nyen-radius); box-shadow:0 4px 30px rgba(38,26,72,.07); padding:0;overflow:hidden;color:#fff; min-width:0; display:flex;flex-direction:column; cursor:pointer; transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s; } .nyen-section--tickets .neo-evt-ticket:hover, .nyen-section--tickets .neo-evt-ticket:focus-visible{transform:translateY(-4px);box-shadow:0 14px 34px rgba(38,26,72,.24);outline:none} .nyen-section--tickets .neo-evt-ticket:focus-visible{box-shadow:0 0 0 3px var(--nyen-purple-lite),0 14px 34px rgba(38,26,72,.24)} /* Header: 4:5 poster + title + date/venue, all on the purple. */ .nyen-section--tickets .neo-evt-ticket-head{display:flex;gap:12px;align-items:center;padding:16px} .nyen-section--tickets .neo-evt-ticket-thumb{flex:none;width:54px;height:68px;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.35);display:block} .nyen-section--tickets .neo-evt-ticket-headmeta{min-width:0} .nyen-section--tickets .neo-evt-ticket-title{ margin:0;font-weight:700;font-size:16px;line-height:1.2;color:#fff; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .nyen-section--tickets .neo-evt-ticket-when{margin:4px 0 0;font-size:12px;color:#fff;opacity:.85} /* QR on a white chip, so scanners read it cleanly against the dark card. */ .nyen-section--tickets .neo-evt-ticket-qrwrap{background:#fff;margin:0 16px 16px;border-radius:12px;padding:14px} .nyen-section--tickets .neo-evt-ticket-qr{width:100%;aspect-ratio:1;max-width:none;height:auto;display:block;margin:0;border-radius:8px;background:#fff} .nyen-section--tickets .neo-evt-ticket-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0 16px 12px;font-size:12.5px;line-height:1.5;color:#fff} .nyen-section--tickets .neo-evt-ticket-facts dt{margin:0;color:rgba(255,255,255,.6);font-weight:500} .nyen-section--tickets .neo-evt-ticket-facts dd{margin:0;color:#fff;min-width:0;overflow-wrap:anywhere} .nyen-section--tickets .neo-evt-ticket-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:0 16px 16px} .nyen-section--tickets .neo-evt-ticket-code{padding:5px 10px;border-radius:500px;background:rgba(255,255,255,.15);color:#fff;font-weight:600;font-size:10.5px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nyen-section--tickets .neo-evt-ticket-pdf, .nyen-section--tickets .neo-evt-ticket-pdf:link, .nyen-section--tickets .neo-evt-ticket-pdf:visited{flex:none;font-weight:600;font-size:12.5px;color:#fff;border:1px solid rgba(255,255,255,.6);border-radius:500px;padding:5px 14px;text-decoration:none} .nyen-section--tickets .neo-evt-ticket-pdf:hover{background:rgba(255,255,255,.12);text-decoration:none} /* ── expanded ticket ─────────────────────────────────────────────────────── The on-screen ticket mirrors the WhatsApp / email PDF (templates/pdf/ticket.css in neo-event-manager-pro): a cream ticket with a deep-purple border, gold band, logo, poster, perforation and a white QR chip, centred on a deep backdrop so it reads as a ticket rather than a bare QR. The QR stays large on its white chip. */ html.nyen-tkt-open, html.nyen-tkt-open body{overflow:hidden;overscroll-behavior:none} .nyen-tkt-lb{position:fixed;inset:0;z-index:99999;background:#241539;display:flex;flex-direction:column} .nyen-tkt-lb[hidden]{display:none} .nyen-tkt-close{ position:absolute;top:max(14px,env(safe-area-inset-top,14px));right:14px;z-index:2; width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff; font-size:26px;line-height:1;cursor:pointer;padding:0; } .nyen-tkt-close:hover{background:rgba(255,255,255,.26)} /* The swipe is scroll-snap. Momentum, rubber-banding and an interrupted flick all behave the way the platform behaves, which a touchmove handler does not. */ .nyen-tkt-track{ flex:1;display:flex;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .nyen-tkt-track::-webkit-scrollbar{display:none} /* Each slide is a scroll container; the ticket sits centred inside it so a tall ticket scrolls rather than clipping. */ .nyen-tkt-slide{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always; display:flex;align-items:flex-start;justify-content:center; overflow-y:auto;-webkit-overflow-scrolling:touch;padding:60px 18px 28px} /* The ticket — same tokens as the WhatsApp/email PDF. */ .nyen-tkt-card{width:100%;max-width:340px;margin:0 auto;background:#FAF9F6; border:3px solid #261A48;color:#261A48;overflow:hidden;text-align:center;border-radius:2px} .nyen-tkt-top{height:6px;background:#C9A93A} .nyen-tkt-head{padding:22px 18px 4px} .nyen-tkt-brand{height:30px;margin:0 auto;background:url(../img/neo-ticket-logo.png) center/contain no-repeat} .nyen-tkt-eyebrow{margin-top:10px;color:#B08D2E;font-size:9px;font-weight:700;letter-spacing:3px} .nyen-tkt-rule{border-top:1.5px solid #EAE4F4;margin:12px 22px 0} .nyen-tkt-hero{padding:16px 18px 4px} .nyen-tkt-poster{width:150px;max-width:70%;border:1px solid #E3DCF2;border-radius:6px;display:inline-block} .nyen-tkt-title{margin:12px 18px 0;font-size:18px;font-weight:700;line-height:1.2;color:#261A48} .nyen-tkt-when{margin:6px 18px 0;font-size:11.5px;line-height:1.4;color:#6E5F93} .nyen-tkt-perf{padding:16px 0 4px} .nyen-tkt-perf span{display:block;border-top:1.5px dashed #B9ADD6;margin:0 14px} .nyen-tkt-facts{margin:6px 0 2px;text-align:left} .nyen-tkt-fact{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 18px} .nyen-tkt-fk{color:#9488B4;text-transform:uppercase;font-size:8.5px;letter-spacing:1px;flex:none} .nyen-tkt-fv{color:#261A48;font-weight:700;font-size:11.5px;text-align:right;overflow-wrap:anywhere} .nyen-tkt-qrwrap{background:#fff;border:1.5px solid #E3DCF2;border-radius:12px;margin:12px 18px 4px;padding:12px;text-align:center} .nyen-tkt-qr{width:min(64vw,190px);height:min(64vw,190px);display:block;margin:0 auto;background:#fff} .nyen-tkt-noqr{color:#6E5F93;margin:0;font-size:12px} .nyen-tkt-qrcap{margin-top:7px;font-size:9px;color:#6E5F93;letter-spacing:.5px} .nyen-tkt-code{display:inline-block;margin-top:8px;background:#F0ECFA;color:#3B2D63; padding:5px 13px;border-radius:6px;font-family:'Courier New','Courier',monospace;font-size:10px;letter-spacing:1px} .nyen-tkt-foot{font-size:8.5px;color:#9488B4;line-height:1.6;padding:10px 18px 8px} .nyen-tkt-foot strong{color:#6E5F93} .nyen-tkt-dl,.nyen-tkt-dl:link,.nyen-tkt-dl:visited{display:block;margin:2px 18px 16px; background:#261A48;color:#fff;text-decoration:none;font-weight:700;font-size:12.5px; padding:11px;border-radius:8px;letter-spacing:.3px;text-align:center} .nyen-tkt-dl:hover{background:#160f2c;color:#fff} /* The overlay is appended to , so it sits outside `.nyen` and outside every no-underline rule this file already has. The theme's global a:hover reaches it. Restate the guard against the overlay's own root rather than widening the one above, which is scoped to the enrolled page on purpose. */ .nyen-tkt-lb a, .nyen-tkt-lb a:link, .nyen-tkt-lb a:visited, .nyen-tkt-lb a:hover, .nyen-tkt-lb a:focus, .nyen-tkt-lb a:active, .nyen-tkt-lb button, .nyen-tkt-lb button:hover, .nyen-tkt-lb button:focus, .nyen-tkt-lb button:active{text-decoration:none !important} .nyen-tkt-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 20px max(16px,env(safe-area-inset-bottom,16px))} .nyen-tkt-nav[hidden]{display:none} .nyen-tkt-count{font-size:12.5px;color:#C9BDE6;min-width:110px;text-align:center} .nyen-tkt-arrow{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(38,26,72,.12);border-radius:50%;background:#fff; color:var(--nyen-ink);font-size:22px;line-height:1;cursor:pointer;padding:0; } .nyen-tkt-arrow:hover{border-color:var(--nyen-purple);color:var(--nyen-purple)} @media (prefers-reduced-motion:reduce){ .nyen-section--tickets .neo-evt-ticket{transition:none} .nyen-section--tickets .neo-evt-ticket:hover{transform:none} } /* ── past tickets (used or expired) ───────────────────────────────────────── A collapsed fold below the live tickets. Past tickets are records, not things to show at a door, so they sit out of the way and read a touch muted. */ .nyen-pastfold{margin-top:10px;border:1px solid #EAE3F1;border-radius:14px;background:transparent;padding:0} .nyen-pastfold__sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px} .nyen-pastfold__sum::-webkit-details-marker{display:none} .nyen-pastfold__sum::after{content:"\25BE";margin-left:auto;color:var(--nyen-soft);transition:transform .2s ease} .nyen-pastfold[open] .nyen-pastfold__sum::after{transform:rotate(180deg)} .nyen-pastfold__ttl{font-weight:700;color:var(--nyen-ink);font-size:15px} .nyen-pastfold__sum .nyen-count{font-size:12.5px;color:var(--nyen-soft)} .nyen-pastfold__body{padding:2px 16px 16px} .nyen-pastfold .neo-evt-ticket{opacity:.72;transition:opacity .15s ease} .nyen-pastfold .neo-evt-ticket:hover{opacity:1} /* ============================================================================ * WHAT'S NEW WITH NEOYUG — discovery rail on the Enrolled page (#9). * Carries no data-nyen-section, so the program pills never hide it. * ==========================================================================*/ .nyen-section--wn { margin-top: 8px; } .nyen-wn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nyen-wn-filter { display: flex; gap: 6px; } .nyen-section--wn .nyen-wn-pill { font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 500px; background: #fff; border: 1px solid var(--nyen-purple-lite); color: var(--nyen-purple); cursor: pointer; line-height: 1.4; transition: background .15s, color .15s; } .nyen-section--wn .nyen-wn-pill.is-active { background: var(--nyen-purple); color: #fff; border-color: var(--nyen-purple); } .nyen-wn-coupon { display: flex; align-items: center; gap: 8px; background: #261A48; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 500; margin: 4px 0 16px; } .nyen-wn-coupon .nyen-wn-code { background: #fff; color: #261A48; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: 6px; } /* What's New = the program-catalog .nyc-card (catalog.css supplies the base look). These rules fit it into the swipe rail and let Settings switch individual details off via wn-hide-*. */ /* catalog.css scopes its colour variables under .nyc, which isn't present on the Enrolled page — so define them on the What's New section, or the reused .nyc-card renders its purple price pill and white text as invisible (transparent bg + #fff text). */ .nyen-section--wn{ --nyc-purple:#8D22C3; --nyc-purple-lt:#A93FDD; --nyc-deep:#261A48; --nyc-orange:#FF551D; --nyc-cream:#FAF9F6; --nyc-navy:#15192C; --nyc-grey:#B0B0B0; --nyc-line:rgba(38,26,72,.10); } .nyen-wn-rail .wn-card{ text-decoration:none; } /* Show exactly 4.5 tiles at a time (gap is 22px). Fewer on smaller screens so they don't shrink to nothing. */ .nyen-grid.nyen-wn-rail > *{ flex:0 0 calc((100% - 88px) / 4.5); } @media (max-width: 900px){ .nyen-grid.nyen-wn-rail > *{ flex:0 0 calc((100% - 44px) / 2.5); } } @media (max-width: 560px){ .nyen-grid.nyen-wn-rail > *{ flex:0 0 calc((100% - 22px) / 1.5); } } .nyen-wn-rail .wn-card .nyc-meta{ white-space:normal; height:auto; } .nyen-wn-rail .wn-when{ display:inline-flex; align-items:center; gap:5px; } .nyen-wn-rail .wn-venue{ display:inline; } .nyen-wn-rail .wn-when + .wn-venue::before{ content:"·"; opacity:.6; margin:0 4px; } .wn-hide-badge .nyc-badge{ display:none; } .wn-hide-ment .nyc-ment{ display:none; } .wn-hide-when .nyc-when{ display:none; } .wn-hide-venue .wn-venue{ display:none; } .wn-hide-price .nyc-buy-price{ display:none; } .wn-hide-cta .nyc-buy-go{ display:none; } .wn-hide-price.wn-hide-cta .nyc-buy{ display:none; } /* "Give feedback" sits under Revisit on completed cards. The secondary style already exists (v1.12.0 live-card work) - it just needs the stack gap here. The live card's own actions wrapper supplies its gap, so scope to completed. */ .nyen-card--completed .nyen-fb-open{margin-top:8px} /* Feedback modal (opened from a completed card). Reuses .nyll-fb inside. */ .nyen-fbmodal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px} .nyen-fbmodal[hidden]{display:none} .nyen-fbmodal__overlay{position:absolute;inset:0;background:rgba(38,26,72,.5)} .nyen-fbmodal__panel{position:relative;background:#fff;border-radius:16px;padding:30px 28px;max-width:440px;width:100%;box-shadow:0 30px 70px rgba(38,26,72,.3);max-height:90vh;overflow-y:auto} .nyen-fbmodal__x{position:absolute;top:16px;right:16px;border:none;background:none;color:#737580;cursor:pointer;line-height:0;padding:4px} .nyen-fbmodal__x:hover{color:#261A48} .nyen-fbmodal__eyebrow{font:500 11px/1 'Dosis',var(--font-primary,sans-serif);letter-spacing:1.5px;text-transform:uppercase;color:var(--nyen-purple,#8D22C3);margin-bottom:8px} .nyen-fbmodal__title{font:500 21px/1.25 var(--font-primary,'Poppins',sans-serif);color:#261A48;margin:0 0 4px} .nyen-fbmodal .nyll-fb{border-top:none;margin:14px 0 0;padding-top:0} /* Feedback internals — self-contained here because viewer.css (which carries the shared .nyll-fb__* styles for the completion screen) is NOT enqueued on the Enrolled page. Without these the star buttons fell back to the theme's default button skin (solid red boxes). */ .nyen-fbmodal .nyll-fb__q{margin:0 0 16px;font:500 15px/1.45 var(--font-primary,'Poppins',sans-serif);color:#261A48} .nyen-fbmodal .nyll-fb__stars{display:flex;align-items:center;gap:8px;margin:0} .nyen-fbmodal .nyll-fb__star{-webkit-appearance:none;appearance:none;border:0;margin:0;padding:4px;background:none;cursor:pointer;line-height:0;border-radius:10px;color:#D6CFE4;transition:color .16s ease} .nyen-fbmodal .nyll-fb__star svg{display:block;width:34px;height:34px;fill:var(--nyen-purple,#8D22C3);fill-opacity:0;stroke:currentColor;transition:fill-opacity .16s ease,stroke .16s ease} .nyen-fbmodal .nyll-fb__star.is-on{color:var(--nyen-purple,#8D22C3)} .nyen-fbmodal .nyll-fb__star.is-on svg{fill-opacity:1} .nyen-fbmodal .nyll-fb__star:focus-visible{outline:2px solid var(--nyen-purple,#8D22C3);outline-offset:2px} /* No-:has fallback so at least the hovered star fills on older engines. */ .nyen-fbmodal .nyll-fb__star:hover{color:var(--nyen-purple,#8D22C3)} .nyen-fbmodal .nyll-fb__star:hover svg{fill-opacity:1} /* :has() preview: blank the whole row first (clears a persisted rating while pointing), THEN light the hovered star + every star before it. The light rules are PREFIXED with the same :has() container so they out-specify the blank rule — a plain .nyll-fb__star:hover loses to .nyll-fb__stars:has(...) .nyll-fb__star svg, which is why hover used to light nothing. */ .nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star{color:#D6CFE4} .nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star svg{fill-opacity:0} .nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star:hover,.nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star:has(~ .nyll-fb__star:hover){color:var(--nyen-purple,#8D22C3)} .nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star:hover svg,.nyen-fbmodal .nyll-fb__stars:has(.nyll-fb__star:hover) .nyll-fb__star:has(~ .nyll-fb__star:hover) svg{fill-opacity:1} .nyen-fbmodal .nyll-fb__write{margin-top:20px} .nyen-fbmodal .nyll-fb__input{width:100%;box-sizing:border-box;min-height:96px;border:1.5px solid #E4DDF1;border-radius:12px;padding:12px 14px;font:400 14px/1.6 var(--font-primary,'Poppins',sans-serif);color:var(--nyen-ink,#15192C);background:#fff;resize:vertical} .nyen-fbmodal .nyll-fb__input::placeholder{color:var(--nyen-soft,#9A8B80)} .nyen-fbmodal .nyll-fb__input:focus{outline:none;border-color:var(--nyen-purple,#8D22C3);box-shadow:0 0 0 3px rgba(141,34,195,.12)} .nyen-fbmodal .nyll-fb__note{margin:12px 0 0;font:400 11.5px/1.5 var(--font-primary,'Poppins',sans-serif);color:var(--nyen-muted,#7A6C72)} .nyen-fbmodal .nyll-fb__actions{display:flex;align-items:center;gap:14px;margin-top:20px} .nyen-fbmodal .nyll-fb__save{border:0;background:var(--nyen-purple,#8D22C3);color:#fff;font:600 14px/1 var(--font-primary,'Poppins',sans-serif);letter-spacing:.2px;padding:13px 28px;border-radius:11px;cursor:pointer;transition:filter .12s ease,transform .06s ease} .nyen-fbmodal .nyll-fb__save:hover{filter:brightness(1.09)} .nyen-fbmodal .nyll-fb__save:active{transform:translateY(1px)} .nyen-fbmodal .nyll-fb__save[disabled]{opacity:.6;cursor:default} .nyen-fbmodal .nyll-fb__err{font:400 12px/1.4 var(--font-primary,'Poppins',sans-serif);color:#FF551D} .nyen-fbmodal .nyll-fb__thanks{display:inline-flex;align-items:center;gap:10px;font:500 14px/1.4 var(--font-primary,'Poppins',sans-serif);color:var(--nyen-ink,#15192C)} .nyen-fbmodal .nyll-fb__tick{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--nyen-purple,#8D22C3);color:#fff}