/* ========================================================= deckr.io — 2026 CSS (Modern / Learning Platform) Theme: Teal #4DAC96 + Orange #fa9938 + clean neutrals Font: Nunito (Google) + system fallback ========================================================= */ /* ---------- Design tokens ---------- */ :root{ /* Brand */ --brand-primary: #4DAC96; --brand-primary-rgb: 77, 172, 150; --brand-secondary: #fa9938; /* Neutrals (light UI) */ --bg: #f6f8fb; --bg-2: #eef3f7; --surface: rgba(255,255,255,.86); --surface-solid: #ffffff; --surface-2: rgba(255,255,255,.72); --surface-3: rgba(15,23,42,.04); --text: #0b1220; --text-2: rgba(11,18,32,.78); --text-3: rgba(11,18,32,.60); --border: rgba(15,23,42,.10); /* Dark panels (for charts + hero highlights) */ --dark: #0b0f14; --dark-2: #0b1112; --dark-surface: rgba(15, 23, 32, .88); --dark-border: rgba(255,255,255,.10); --dark-text: rgba(255,255,255,.92); --dark-text-2: rgba(255,255,255,.72); /* Shadows */ --shadow-sm: 0 10px 22px rgba(15, 23, 42, .08); --shadow: 0 16px 34px rgba(15, 23, 42, .10); --shadow-lg: 0 26px 60px rgba(15, 23, 42, .14); /* Radii */ --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-pill: 999px; /* Spacing */ --container: 1280px; --pad: 24px; /* Typography */ --font-family-base: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Motion */ --t: 180ms; --ease: cubic-bezier(.2,.8,.2,1); } /* Optional: easy dark-mode if you ever add */ html[data-theme="dark"]{ --bg: #0b0f14; --bg-2: #0b1112; --surface: rgba(17, 24, 39, .82); --surface-solid: #0f1516; --surface-2: rgba(17, 24, 39, .66); --surface-3: rgba(255,255,255,.05); --text: rgba(255,255,255,.92); --text-2: rgba(255,255,255,.78); --text-3: rgba(255,255,255,.60); --border: rgba(255,255,255,.10); } /* Auto dark mode (uses OS preference unless you explicitly set data-theme="light") */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --bg: #070a0c; /* near-black, neutral */ --bg-2: #0b1112; /* warm/neutral charcoal */ --surface: rgba(16, 20, 24, .78); --surface-solid: #0f1516; --surface-2: rgba(16, 20, 24, .62); --surface-3: rgba(255,255,255,.05); --text: rgba(255,255,255,.92); --text-2: rgba(255,255,255,.78); --text-3: rgba(255,255,255,.60); --border: rgba(255,255,255,.10); } } /* Component tweaks in dark theme */ html[data-theme="dark"] body{ background: radial-gradient(900px 500px at 15% 0%, rgba(77,172,150,.14), transparent 200%), radial-gradient(700px 420px at 90% 10%, rgba(250,153,56,.14), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2)); } html[data-theme="dark"] .header{ background: rgba(16, 20, 24, .72); border-bottom-color: rgba(255,255,255,.10); } html[data-theme="dark"] .nav__link{ color: rgba(255,255,255,.78); } html[data-theme="dark"] .nav__link:hover{ background: rgba(77,172,150,.18); color: rgba(255,255,255,.92); } html[data-theme="dark"] .nav__link.is-active, html[data-theme="dark"] .nav__link[aria-current="page"]{ background: rgba(77,172,150,.22); color: rgba(255,255,255,.92); } html[data-theme="dark"] .auth-status-bar{ } html[data-theme="dark"] .deck-counter{ background: rgba(77,172,150,.20); border-color: rgba(77,172,150,.32); } html[data-theme="dark"] .btn--secondary{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } html[data-theme="dark"] .btn--secondary:hover{ background: rgba(77,172,150,.18); border-color: rgba(77,172,150,.28); } html[data-theme="dark"] .btn--outline{ border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .btn--outline:hover{ background: rgba(255,255,255,.06); } html[data-theme="dark"] .form-control{ border-color: rgba(255,255,255,.10); box-shadow: none; } html[data-theme="dark"] .form-control:focus{ border-color: rgba(77,172,150,.55); box-shadow: 0 0 0 4px rgba(77,172,150,.18); } html[data-theme="dark"] .badge{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } /* keep dark panels readable */ html[data-theme="dark"] .deck-panel{ border-color: rgba(255,255,255,.10); } html[data-theme="dark"] .toast{ background: rgba(12,17,18,.94); } } html, body { min-height: 100%; } /* let the page grow with content */ body{ margin: 0; font-family: var(--font-family-base); color: var(--text); background: radial-gradient(900px 500px at 15% 0%, rgba(77,172,150,.10), transparent 200%), radial-gradient(700px 420px at 90% 10%, rgba(250,153,56,.10), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2)); background-repeat: no-repeat; /* prevents the seam caused by tiling */ /* [web:7] */ /* optional: background-size: cover; */ } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } a:hover{ text-decoration: underline; text-underline-offset: 3px; } button, input, select, textarea{ font: inherit; color: inherit; } button{ cursor: pointer; } button:disabled{ opacity: .55; cursor: not-allowed; } ::selection{ background: rgba(77,172,150,.25); } html[data-theme="dark"] ::selection{ background: rgba(77,172,150,.32); } .hidden{ display: none !important; } .muted{ color: var(--text-2); } .dot{ color: var(--text-3); padding: 0 6px; } /* Smooth anchor scroll under sticky header */ :where(h1,h2,h3,h4,h5,h6,[id]){ scroll-margin-top: 92px; } /* ---------- Container / Layout ---------- */ .container{ width: min(var(--container), calc(100% - (var(--pad) * 2))); margin-inline: auto; } .main{ padding: 24px 0 70px; } .page{ display: none; } .page.page--active{ display: block; } /* ---------- Header / Nav ---------- */ .header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: color-mix(in oklab, var(--surface-solid) 70%, transparent); border-bottom: 1px solid var(--border); } .nav{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; } .nav__brand{ display: flex; align-items: center; gap: 10px; min-width: 160px; } .nav__title{ margin: 0; font-size: 18px; letter-spacing: .2px; font-weight: 800; } .nav__menu{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nav__link{ display: inline-flex; align-items: center; padding: 8px 10px; border-radius: var(--r-pill); color: var(--text-2); font-weight: 700; letter-spacing: .1px; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); } .nav__link:hover{ background: rgba(77,172,150,.10); color: var(--text); text-decoration: none; } .nav__link.is-active, .nav__link[aria-current="page"]{ background: rgba(77,172,150,.14); color: var(--text); } .nav__actions{ display: flex; align-items: center; gap: 10px; min-width: 240px; justify-content: flex-end; } .deck-icon{ filter: saturate(1.05); font-size: 18px; } .deck-counter{ min-width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: var(--r-pill); background: rgba(77,172,150,.14); border: 1px solid rgba(77,172,150,.22); font-weight: 800; } .deck-counter-wrap{ position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: default; } .deck-counter-wrap::after{ content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); padding: 5px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 200; } .deck-counter-wrap:hover::after{ opacity: 1; } .auth-wrapper{ display: flex; align-items: center; gap: 10px; } .auth-status-bar{ display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; } .auth-email{ max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text-2); } /* ---------- Verify Bar ---------- */ .verify-bar{ position: sticky; top: 60px; z-index: 45; border-bottom: 1px solid rgba(250,153,56,.25); background: linear-gradient(90deg, rgba(250,153,56,.14), rgba(77,172,150,.10)); backdrop-filter: blur(10px); } .verify-bar__inner{ width: min(var(--container), calc(100% - (var(--pad) * 2))); margin-inline: auto; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .verify-bar__text{ display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; color: var(--text); } .verify-bar__text strong{ font-weight: 800; } .verify-bar__actions{ display: flex; align-items: center; gap: 10px; } /* ---------- Buttons ---------- */ .btn{ appearance: none; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: var(--r-pill); padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; letter-spacing: .1px; line-height: 1; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); user-select: none; } .btn svg{ opacity: .92; } .btn:active{ transform: translateY(1px); } .btn--primary{ background: linear-gradient(135deg, color-mix(in oklab, var(--brand-primary) 92%, #ffffff), color-mix(in oklab, var(--brand-primary) 70%, #0b1220)); color: #ffffff; border-color: rgba(77,172,150,.45); box-shadow: 0 10px 18px rgba(77,172,150,.18); } .btn--primary:hover{ box-shadow: 0 14px 26px rgba(77,172,150,.22); transform: translateY(-1px); } .btn--secondary{ background: rgba(15,23,42,.06); border-color: var(--border); } .btn--secondary:hover{ background: rgba(77,172,150,.10); border-color: rgba(77,172,150,.18); transform: translateY(-1px); } .btn--outline{ background: transparent; border-color: var(--border); } .btn--outline:hover{ background: rgba(15,23,42,.05); } .btn-row{ display: flex; flex-wrap: wrap; gap: 10px; } .accent{ color: var(--brand-primary); text-shadow: 0 0 20px rgba(var(--brand-primary-rgb), .35), 0 0 40px rgba(var(--brand-primary-rgb), .20); } /* ---------- Inputs / Forms ---------- */ .form-label{ display: block; font-weight: 800; color: var(--text-2); margin: 10px 0 6px; } .form-control{ width: 96%; height: 44px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-solid); box-shadow: 0 1px 0 rgba(15,23,42,.03); outline: none; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .form-control:focus{ border-color: rgba(77,172,150,.55); box-shadow: 0 0 0 4px rgba(77,172,150,.16); } select.form-control{ padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, rgba(11,18,32,.60) 50%), linear-gradient(135deg, rgba(11,18,32,.60) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; appearance: none; } /* ---------- Chips / Badges / Pills ---------- */ .badge{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-size: 14px; font-weight: 800; border: 1px solid var(--border); background: rgba(15,23,42,.04); color: var(--text-2); white-space: nowrap; } .badge--success{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.25); color: color-mix(in oklab, var(--brand-primary) 68%, var(--text)); } .badge--free{ background: rgba(77,172,150,.12); border-color: rgba(77,172,150,.22); color: color-mix(in oklab, var(--brand-primary) 72%, var(--text)); } .badge--premium{ background: rgba(250,153,56,.16); border-color: rgba(250,153,56,.28); color: color-mix(in oklab, var(--brand-secondary) 70%, var(--text)); } .badge--unrated, .focus-pill--unrated{ background: rgba(11,18,32,.06); border-color: rgba(11,18,32,.14); color: var(--text-2); } .focus-pill--low{ background: rgba(250,153,56,.18); border-color: rgba(250,153,56,.30); color: color-mix(in oklab, var(--brand-secondary) 72%, var(--text)); } .focus-pill--ok{ background: rgba(250,153,56,.12); border-color: rgba(250,153,56,.22); color: var(--text); } .focus-pill--good{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.26); color: var(--text); } .focus-pill--high{ background: rgba(77,172,150,.18); border-color: rgba(77,172,150,.34); color: color-mix(in oklab, var(--brand-primary) 72%, var(--text)); } /* ---------- Breadcrumb / Page header ---------- */ .breadcrumb{ display: flex; align-items: center; gap: 8px; padding: 16px 0 10px; color: var(--text-3); font-weight: 800; } .breadcrumb__link{ color: var(--text-2); font-weight: 800; } .breadcrumb__separator{ opacity: .7; } .breadcrumb__current{ color: var(--text); } .page-header{ padding: 10px 0 18px; } .page-title{ margin: 0; font-size: 34px; letter-spacing: -0.6px; } .page-subtitle{ margin: 8px 0 0; color: var(--text-2); font-weight: 700; } /* ---------- Home ---------- */ .home{ padding-bottom: 30px; } .section-title{ margin: 16px 0 16px; font-size: 26px; letter-spacing: -0.4px; text-align: center; } /* Hero */ .hero-neo{ position: relative; /*margin-top: 18px;*/ padding: 22px 0 10px; } /* Full-width hero background (no boxed card) .hero-neo::before{ content: ""; position: absolute; inset: -40px 0 -20px 0; background: radial-gradient(1200px 520px at 18% 0%, rgba(77,172,150,.22), transparent 60%), radial-gradient(900px 520px at 86% 18%, rgba(250,153,56,.18), transparent 62%), linear-gradient(180deg, rgba(12,17,18,.92), rgba(12,17,18,.78)); filter: saturate(1.05); pointer-events: none; } */ /* Soft fade-out so it blends into the page .hero-neo::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.28)); pointer-events: none; } */ .hero-neo__content{ margin-left:50px; } .hero-neo__inner{ position: relative; padding: 24px 0 24px; background: transparent; border: none; box-shadow: none; overflow: visible; color: var(--text); } .hero-neo__inner.container{ width: min(var(--container), calc(100% - (var(--pad) * 2))); } .hero-neo__inner{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; } .eyebrow{ display: inline-flex; align-items: center; gap: 8px; padding: 01px 1px; /*border-radius: var(--r-pill); background: color-mix(in oklab, var(--surface-solid) 70%, transparent); border: 1px solid var(--border);*/ color: var(--text-2); font-weight: 800; font-size: 16px; letter-spacing: .3px; } .hero-neo__title{ margin: 14px 0 0; font-size: 46px; line-height: 1.06; letter-spacing: -1.0px; } .hero-neo__subtitle{ margin: 14px 0 0; font-size: 16px; color: var(--text-2); font-weight: 700; max-width: 58ch; } .hero-neo__cta{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; } .hero-neo__decor{ display: flex; justify-content: center; align-items: center; } .hero-logo-hero{ width: 400px; height: 400px; object-fit: contain; filter: drop-shadow(0 24px 44px rgba(0,0,0,.22)); animation: floaty 7.5s ease-in-out infinite; opacity: .98; rotate: 2deg; } @keyframes floaty{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-10px); } } @keyframes floatya { 0%, 100% { transform: translateY(2px) rotate(-1deg); } 50% { transform: translateY(-8px) rotate( 1deg); } } @keyframes floatyb { 0%, 100% { transform: translateY(-3px) rotate( 1deg); } 50% { transform: translateY(-13px) rotate(-1deg); } } @keyframes floatyc { 0%, 100% { transform: translateY(5px) rotate( 0.5deg); } 50% { transform: translateY(-5px) rotate(-1.5deg); } } .hero-float{ position: absolute; width: 60px; height: 60px; object-fit: contain; opacity: .95; filter: drop-shadow(0 16px 28px rgba(0,0,0,.22)); animation: floaty2 6.8s ease-in-out infinite; } @keyframes floaty2{ 0%,100%{ transform: translateY(0px) rotate(0deg); } 50%{ transform: translateY(-12px) rotate(1.2deg); } } .hero-float--a{ left: 26px; top: 18px; animation-delay: .2s; } .hero-float--b{ right: 40px; top: 26px; animation-delay: .6s; } .hero-float--c{ left: 64px; bottom: 20px; animation-delay: 1.0s; } .hero-float--d{ right: 90px; bottom: 18px; animation-delay: .9s; } .hero-float--e{ left: 46%; top: 24px; transform: translateX(-50%); animation-delay: .4s; } .hero-float--f{ left: 54%; bottom: 14px; transform: translateX(-50%); animation-delay: .8s; } /* Search */ .search-container{ position: relative; max-width: 720px; margin-top: 16px; } .search-box{ position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; border-radius: 26px; padding: 10px 12px; /*background: rgba(0,0,0,.18); */ border: 1px solid rgba(77,172,150,.42); box-shadow: 0 0 0 3px rgba(77,172,150,.14), 0 0 18px rgba(77,172,150,.14), 0 18px 55px rgba(0,0,0,.36); } /* Animated orange sweep (right → left) along the outline */ .search-box::before{ content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, rgba(250,153,56,0) 0%, rgba(250,153,56,0) 40%, rgba(250,153,56,.95) 50%, rgba(250,153,56,0) 60%, rgba(250,153,56,0) 100%); background-size: 240% 100%; animation: search-sweep 8.2s linear infinite; opacity: .9; filter: drop-shadow(0 0 10px rgba(250,153,56,.22)); pointer-events: none; /* show only as a border */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } @keyframes search-sweep{ 0%{ background-position: 200% 50%; } 100%{ background-position: -200% 50%; } } /.search-box:focus-within{ /border-color: rgba(77,172,150,.60); box-shadow: 0 0 0 4px rgba(77,172,150,.18), 0 0 26px rgba(77,172,150,.18), 0 24px 70px rgba(0,0,0,.42); } .search-input{ flex: 1; border: none; outline: none; background: transparent; color: var(--text); font-weight: 700; } / .search-input::placeholder{ color: var(--text-3); } .search-btn{ width: 42px; height: 42px; border-radius: var(--r-pill); border: 1px solid rgba(77,172,150,.30); background: rgba(77,172,150,.18); color: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); } .search-btn:hover{ background: rgba(77,172,150,.28); border-color: rgba(77,172,150,.45); transform: translateY(-1px); } .search-btn:hover{ background: rgba(77,172,150,.22); transform: translateY(-1px); } .search-suggestions, .search-results{ position: absolute; inset-inline: 0; top: calc(100% + 10px); border-radius: var(--r); overflow: hidden; background: rgba(16,20,24,.98); border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-lg); z-index: 20; } .search-suggestions{ padding: 8px; } .search-results{ padding: 10px; max-height: 460px; overflow: auto; } .suggestion-item, .search-suggestion{ display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--r-sm); color: rgba(255,255,255,.86); font-weight: 800; cursor: pointer; } .suggestion-item:hover, .search-suggestion:hover{ background: rgba(255,255,255,.06); } .search-results{ padding: 10px; max-height: 360px; overflow: auto; display: grid; gap: 8px; } /* app.js renders .search-result with .search-result__content + .search-result__meta */ .search-result{ display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border-radius: var(--r); cursor: pointer; color: rgba(255,255,255,.88); border: 1px solid transparent; transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); } .search-result:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); border-color: rgba(77,172,150,.22); } .search-result__content{ min-width: 0; } .search-result__content h4{ margin: 0; font-weight: 900; font-size: 14px; color: rgba(255,255,255,.92); letter-spacing: .1px; } .search-result__content p{ margin: 6px 0 0; color: rgba(255,255,255,.72); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result__meta{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 0; } .search-results .badge{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.84); } /* Optional: legacy/future icon layout */ .search-result-item{ display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 10px; border-radius: var(--r); cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease); } .search-result-item:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); } .search-result__icon, .search-result-item__icon{ width: 42px; height: 42px; border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } .search-result__icon img{ width: 100%; height: 100%; object-fit: cover; } .search-result__title{ font-weight: 900; color: rgba(255,255,255,.92); margin: 0; } /* Logos rail */ .logos-rail{ margin-top: 18px; } .rail{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .rail__label{ font-weight: 900; color: var(--text-2); } .rail__logos{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rail__logos img{ height: 28px; width: auto; opacity: .9; filter: grayscale(.2); } /* Pricing */ .pricing-neo{ padding-top: 30px; } .plan-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: start; } /* Logged-out: no active plan, so stretch both cards to equal height */ .plan-grid:not(:has(.plan--active)){ align-items: stretch; } /* Shimmer custom property for conic-gradient rotation */ @property --shimmer-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes shimmer-spin { to { --shimmer-angle: 360deg; } } .plan-card{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } /* Free card — slightly muted to create hierarchy */ .plan-card--free{ opacity: .88; transition: opacity var(--t) var(--ease); } .plan-card--free:hover{ opacity: 1; } .plan-card--free.plan--active{ opacity: 1; } /* Premium card — elevated, branded */ .plan-card--premium{ border-color: rgba(77,172,150,.32); box-shadow: 0 8px 30px rgba(77,172,150,.12), 0 30px 70px rgba(77,172,150,.10); background: radial-gradient(700px 280px at 10% 0%, rgba(77,172,150,.14), transparent 65%), radial-gradient(700px 280px at 90% 0%, rgba(250,153,56,.12), transparent 65%), var(--surface-solid); } /* Shimmer border on premium card (suppressed when plan--active) */ .plan-card--premium:not(.plan--active)::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--shimmer-angle), transparent 0%, rgba(77,172,150,.55) 8%, rgba(250,153,56,.45) 16%, transparent 24% ); pointer-events: none; z-index: 1; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: shimmer-spin 4s linear infinite; } /* "Most Popular" badge on premium card */ .plan-badge{ display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--brand-primary), rgba(250,153,56,.92)); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 10px; position: relative; z-index: 2; } .plan-card.plan--active .plan-badge{ display: none; } /* Active plan highlight (JS toggles .plan--active) */ .plan-card.plan--active{ border-color: rgba(77,172,150,.62); box-shadow: 0 0 0 4px rgba(77,172,150,.18), 0 26px 70px rgba(0,0,0,.22); } .plan-card.plan--active::before{ content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, rgba(77,172,150,.70), rgba(250,153,56,.55), rgba(77,172,150,.70)); opacity: .85; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0 14px rgba(77,172,150,.20)); } .plan-card.plan--active .plan-flag{ color: var(--text); background: rgba(77,172,150,.16); border: 1px solid rgba(77,172,150,.28); padding: 6px 10px; border-radius: var(--r-pill); } .plan-title{ margin: 0 0 10px; font-size: 24px; font-weight: 900; position: relative; z-index: 2; } .plan-features{ margin: 0; padding-left: 0; list-style: none; display: grid; gap: 5px; color: var(--text-2); font-weight: 700; position: relative; z-index: 2; } .plan-footer{ margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; } .plan-price{ font-size: 22px; font-weight: 1000; } .plan-flag{ font-weight: 900; color: var(--text-3); } .lottie-animation { position: absolute; right: 10px; top: 50px; /* width: 94px; */ height: 94px; opacity: .9; pointer-events: none; } /* How it works */ .how{ padding-top: 18px; } .how__grid{ display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; } .how-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); } /* shared styles */ .how-card__art{ border-radius: var(--r); overflow: hidden; } .how-card__art img{ width: 100%; height: 100%; object-fit: cover; animation: 7.5s ease-in-out infinite; } /* pick animation per card */ .how__grid > .how-card:nth-of-type(1) .how-card__art img { animation-name: floatya; } .how__grid > .how-card:nth-of-type(2) .how-card__art img { animation-name: floatyb; } .how__grid > .how-card:nth-of-type(3) .how-card__art img { animation-name: floatyc; } .how-card__head{ margin-top: 2px; display: grid; gap: 6px; } .how-card__eyebrow{ display: inline-flex; width: fit-content; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(77,172,150,.12); border: 1px solid rgba(77,172,150,.20); font-weight: 900; font-size: 12px; } .how-card__title{ margin: 0; font-size: 18px; font-weight: 1000; } .how-card__text{ margin: 8px 0 0; color: var(--text-2); font-weight: 700; } .how__connector{ width: 26px; height: 2px; background: linear-gradient(90deg, rgba(77,172,150,.25), rgba(250,153,56,.25)); align-self: center; } /* Featured fan */ .featured-section{ margin-block: 48px -50px; } .featured-section .section-title{ margin-bottom: 14px; } /* Stage provides perspective for the deck */ .stage{ --stage-pad: 16px; position: relative; padding: var(--stage-pad); overflow: hidden; perspective: 1200px; } /* The fan/deck plane */ #featuredDeck{ position: relative; height: clamp(280px, 34vw, 340px); min-height: 280px; overflow: visible; transform-style: preserve-3d; contain: layout paint style; isolation: isolate; } /* Featured cards (scoped so other .card components are unaffected) */ #featuredDeck .card{ /* JS writes these variables */ --rot: 0deg; --tx: 0px; --ty: 0px; --sc: 1; --z: 1; position: absolute; left: 50%; top: 22px; z-index: var(--z); inline-size: clamp(240px, 40vw, 360px); block-size: clamp(160px, 28vw, 180px); border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--border); color: var(--text); padding: 16px; display: grid; gap: 10px; align-content: start; overflow: hidden; /* More stable than calc() inside translateX */ transform: translate3d(-50%, 0, 0) translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)) scale(var(--sc)); transform-origin: 50% 80%; transform-style: preserve-3d; backface-visibility: hidden; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), filter 140ms var(--ease); will-change: transform; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 10px 26px rgba(0,0,0,.12); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* If a .body wrapper exists, don't double-pad it */ #featuredDeck .card .body{ padding: 0; display: grid; gap: 8px; } /* Hover: no transform (avoids fighting JS), just a little lift */ #featuredDeck .card:hover{ box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 16px 40px rgba(0,0,0,.16); } /* Active card gets the 'hero' halo */ #featuredDeck .card.is-active{ box-shadow: 0 0 0 1px rgba(var(--brand-primary-rgb), .35), 0 0 0 10px rgba(var(--brand-primary-rgb), .10), 0 20px 56px rgba(var(--brand-primary-rgb), .18); filter: saturate(1.03); } /* Card internals */ #featuredDeck .card .title{ margin: 0; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.2; font-weight: 1000; letter-spacing: -0.01em; } #featuredDeck .card .content{ margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-2); font-weight: 700; } #featuredDeck .card .meta{ margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Optional lock indicator */ #featuredDeck .card .lock-indicator{ position: absolute; top: 10px; right: 10px; font-size: 14px; opacity: .8; } /* Focus styles for accessibility */ #featuredDeck .card:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .18), 0 0 0 1px rgba(var(--brand-primary-rgb), .45), 0 16px 40px rgba(0,0,0,.16); } /* Mobile: avoid overlap jitter by using a neat horizontal row */ @media (max-width: 820px){ #featuredDeck{ height: auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 78vw, 360px); gap: 12px; overflow-x: auto; padding: 12px 6px; scroll-snap-type: x mandatory; } #featuredDeck .card{ position: relative; left: auto; top: auto; inline-size: auto; block-size: auto; min-height: 180px; transform: none !important; scroll-snap-align: center; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ #featuredDeck .card{ transition: none; } } /* Testimonials */ .wall{ padding-top: 28px; } .wall__grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .wall__art{ border-radius: var(--r); overflow: hidden; margin: 2px; } .wall__art img{ width: 75%; object-fit: cover; rotate: 8deg; display:block; margin-left:auto; margin-right:auto; } .wall__art2{ border-radius: var(--r); overflow: hidden; margin: 2px; } .wall__art2 img{ width: 75%; object-fit: cover; rotate: -8deg; display:block; margin-left:auto; margin-right:auto; } .quote{ margin: 0; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .quote blockquote{ margin: 0; color: var(--text); font-weight: 800; line-height: 1.4; } .quote figcaption{ margin-top: 12px; color: var(--text-3); font-weight: 900; } /* Categories grid */ .categories-section{ padding: 56px 0 0; } .category-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding-right: 24px; padding-left: 24px; } .category-card{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); text-align: center; } .category-card:hover{ transform: translateY(-2px); border-color: rgba(77,172,150,.22); box-shadow: var(--shadow); } .category-card__title{ font-weight: 1000; margin: 0; } .category-card__count{ color: var(--text-2); margin-top: 8px; font-weight: 800; } .category-card__emoji{ font-size: 22px; } /* FAQ */ .faq{ padding-top: 28px; } .faq__list{ display: grid; gap: 10px; } .faq details{ border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; box-shadow: var(--shadow-sm); } .faq summary{ font-weight: 1000; cursor: pointer; } .faq details p{ margin: 10px 0 0; color: var(--text-2); font-weight: 700; } /* CTA */ .cta{ padding-top: 28px; } .cta__card{ border-radius: var(--r-lg); border: 1px solid rgba(77,172,150,.22); background: radial-gradient(900px 260px at 10% 0%, rgba(77,172,150,.18), transparent 66%), radial-gradient(900px 260px at 90% 0%, rgba(250,153,56,.14), transparent 66%), var(--surface-solid); height: 200px; box-shadow: var(--shadow); padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cta__title{ margin: 0; font-size: 20px; font-weight: 1000; } .cta__sub{ margin: 6px 0 0; color: var(--text-2); font-weight: 800; } .cta__actions{ display: flex; gap: 10px; flex-wrap: wrap; } /* Simple list (pricing, feature lists) */ .simple-list{ margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--text-2); font-weight: 700; } .simple-list li{ line-height: 1.35; } .simple-list li::marker{ color: rgba(77,172,150,.65); } /* Button variants used by JS */ .btn--success{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.28); color: color-mix(in oklab, var(--brand-primary) 68%, var(--text)); } .btn--success:hover{ background: rgba(77,172,150,.20); border-color: rgba(77,172,150,.36); transform: translateY(-1px); } /* ---------- Term Page ---------- */ .term-detail{ margin-top: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .term-hero{ display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px; background: radial-gradient(700px 260px at 10% 0%, rgba(77,172,150,.16), transparent 60%), radial-gradient(700px 260px at 90% 0%, rgba(250,153,56,.14), transparent 60%), var(--surface-solid); border-bottom: 1px solid var(--border); } .term-hero__title{ display: grid; gap: 8px; } .term-title{ margin: 0; font-size: 32px; letter-spacing: -0.6px; font-weight: 1000; } .term-meta{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .term-category{ display: inline-flex; align-items: center; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(15,23,42,.05); border: 1px solid var(--border); font-weight: 900; color: var(--text-2); } .term-difficulty{ /* filled by JS; also often a badge class */ } .term-hero__media{ /*width: 112px; height: 112px;*/ border-radius: var(--r-lg); display: grid; place-items: center; overflow: hidden; } #termIcon{ width: 100%; height: 100%; object-fit: cover; } .term-content{ padding: 18px; display: grid; gap: 16px; } .term-content h2{ margin: 0 0 10px; font-size: 18px; font-weight: 1000; } .term-definition, .term-examples, .term-lesson-container{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; } #termDefinition{ color: var(--text-2); font-weight: 700; line-height: 1.55; } .term-examples ul{ margin: 0; padding-left: 18px; display: grid; color: var(--text-2); font-weight: 700; } /* Lesson content: make unknown markup look good */ .term-lesson-container{ line-height: 1.6; color: var(--text); } .term-lesson-container :where(h2,h3){ margin: 16px 0 10px; letter-spacing: -0.2px; } .term-lesson-container :where(p,li){ color: var(--text-2); font-weight: 700; } .term-lesson-container :where(code){ font-family: var(--mono); font-size: 0.95em; padding: 2px 6px; border-radius: 10px; background: rgba(15,23,42,.06); border: 1px solid var(--border); } .term-lesson-container :where(pre){ overflow: auto; padding: 12px; border-radius: var(--r); background: rgba(15,23,42,.06); border: 1px solid var(--border); } .term-lesson-container :where(pre code){ background: transparent; border: none; padding: 0; } .term-lesson-container :where(blockquote){ margin: 12px 0; padding: 12px 14px; border-left: 4px solid rgba(77,172,150,.55); background: rgba(77,172,150,.10); border-radius: 0 var(--r) var(--r) 0; color: var(--text); font-weight: 800; } .term-actions{ display: grid; gap: 12px; padding-top: 4px; } .term-confidence{ background: rgba(15,23,42,.04); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; } .term-confidence__top{ display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .term-confidence__label{ font-weight: 900; color: var(--text-2); } .term-confidence__value{ font-weight: 1000; } .term-confidence__controls{ margin-top: 10px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; } .conf-btn{ border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-solid); padding: 10px 10px; display: grid; gap: 6px; align-content: center; justify-items: center; font-weight: 900; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .conf-btn:hover{ transform: translateY(-1px); border-color: rgba(77,172,150,.32); box-shadow: var(--shadow-sm); } .conf-btn.is-active{ border-color: rgba(77,172,150,.45); box-shadow: 0 0 0 4px rgba(77,172,150,.14); } /* Callouts you can use inside content with raw HTML */ .callout { border-radius: 10px; padding: 12px 14px; margin: 12px 0; border: 1px solid var(--color-border); } .callout.info { background: rgba(var(--brand-primary-rgb), .08); } .callout.warn { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .35); } .callout.danger { background: rgba(239, 68, 68, .10); border-color: rgba(239, 68, 68, .35); } /* ---------- Browse Page ---------- */ .browse-search{ margin: 20px 0 16px; } .browse-search .search-container{ max-width: 100%; } .browse-filters{ display: flex; gap: 12px; flex-wrap: wrap; padding: 10px 0 16px; align-items: center; } .browse-filters .form-control{ max-width: 360px; } .filter-pill-group{ display: flex; gap: 6px; flex-wrap: nowrap; } .filter-pill{ padding: 7px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); font-family: var(--font-family-base); /*font-size: .85rem;*/ font-weight: 800; cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); white-space: nowrap; } .filter-pill:hover{ background: var(--surface-3); border-color: var(--brand-primary); color: var(--text); } .filter-pill--active{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .filter-pill--active:hover{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } html[data-theme="dark"] .filter-pill{ background: var(--surface); border-color: var(--border); color: var(--text-2); } html[data-theme="dark"] .filter-pill:hover{ background: var(--surface-3); border-color: var(--brand-primary); color: var(--text); } html[data-theme="dark"] .filter-pill--active, html[data-theme="dark"] .filter-pill--active:hover{ background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } /* Premium pill — gradient border when inactive */ .filter-pill[data-value="premium"]:not(.filter-pill--active){ border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) border-box; } .filter-pill[data-value="premium"]:not(.filter-pill--active):hover{ background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) border-box; color: var(--text); } html[data-theme="dark"] .filter-pill[data-value="premium"]:not(.filter-pill--active){ background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) border-box; } html[data-theme="dark"] .filter-pill[data-value="premium"]:not(.filter-pill--active):hover{ background: linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) border-box; color: var(--text); } .browse-results{ display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; } .alphabet-nav{ position: static; top: 92px; display: grid; gap: 6px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); overflow: auto; } .alphabet-letter{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid); font-weight: 1000; color: var(--text-2); cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); } .alphabet-letter:hover{ background: rgba(77,172,150,.10); border-color: rgba(77,172,150,.22); transform: translateY(-1px); } .alphabet-letter.is-active{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.28); color: var(--text); } .term-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } /* Card shell */ .term-list-item{ position: relative; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); box-shadow: 0 18px 56px rgba(0,0,0,.14); padding: 16px 16px 14px; min-height: 290px; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .term-list-item:hover{ transform: translateY(-3px); box-shadow: 0 26px 70px rgba(0,0,0,.18); border-color: rgba(77,172,150,.28); } /* Icon “chip” (uses existing term image) */ .term-list-item .term-media{ position: absolute; top: 16px; left: 16px; width: 116px; height: 116px; display: grid; overflow: hidden; z-index: 1; } .term-list-item .term-media img{ width: 72%; height: 72%; object-fit: contain; /*filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));*/ } /* Content stack */ .term-list-item .term-main{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 104px; /* room for icon + hero wash */ min-height: 100%; } .term-list-item .term-title{ margin: 0; font-size: 20px; font-weight: 1000; letter-spacing: -0.3px; color: var(--text); } .term-list-item .term-snippet{ margin: 0; color: var(--text-2); font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Meta (categories + difficulty) */ .term-list-item .term-card__meta{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Category badges read like “tags” */ .term-list-item .badge--category{ /*background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);*/ color: var(--text-2); } /* Access level badge pops slightly */ .term-list-item .badge--free, .term-list-item .badge--premium, .term-list-item .badge--unrated{ box-shadow: 0 10px 20px rgba(0,0,0,.12); } /* 3 columns */ @media (max-width: 1100px){ .term-list{ grid-template-columns: repeat(3, 1fr); } } /* 2 columns */ @media (max-width: 800px){ .term-list{ grid-template-columns: repeat(2, 1fr); } } /* optional: 1 column on phones */ @media (max-width: 520px){ .term-list{ grid-template-columns: 1fr; } } /* ---------- Deck Page ---------- */ .deckpage-hero{ position: relative; border-radius: var(--r-lg); overflow: hidden; padding: 34px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .deckpage-hero__bg{ position: absolute; inset: 0; background: radial-gradient(900px 420px at 18% 0%, rgba(var(--brand-primary-rgb),.18), transparent 60%), radial-gradient(900px 420px at 90% 0%, rgba(250,153,56,.14), transparent 62%); pointer-events: none; } .deckpage-hero__inner{ position: relative; max-width: var(--container); margin-inline: auto; } .deckpage-hero__title{ margin: 0; font-size: 42px; letter-spacing: -0.9px; line-height: 1.08; } .deckpage-hero__sub{ margin: 12px 0 0; color: var(--text-2); font-weight: 700; } /* --- TWEAK: My Deckr hero (image on RIGHT, name accent) --- */ #deckPageHeroName{ color: var(--brand-primary); font-weight: 1000; } /* Give text room so the floating hero art can sit on the right */ .deckpage-hero{ min-height: 320px; } .deckpage-hero__inner{ padding-right: 440px; /* space reserved for the big icon */ } .deckpage-hero__content{ max-width: 720px; position: relative; z-index: 2; } /* Position the large deck icon to the right like the old layout */ .deckpage-hero .hero-logo-hero{ position: absolute; right: 56px; top: 5%; transform: translateY(-50%); width: 380px; height: 380px; opacity: .98; pointer-events: none; z-index: 1; } /* Responsive: stack/center the art on smaller screens */ @media (max-width: 980px){ .deckpage-hero__inner{ padding-right: 0; } .deckpage-hero{ padding-bottom: 36px; } .deckpage-hero .hero-logo-hero{ position: relative; right: auto; top: 50%; transform: none; width: 260px; height: 260px; margin: 18px auto 0; display: block; } } /* --- TWEAK: Deck hero vertical centering (match old layout) --- */ .deckpage-hero{ display: block; /* keep existing look */ } .deckpage-hero__inner{ min-height: 340px; display: flex; align-items: center; /* vertical center */ } .deckpage-hero__content{ margin: 0; } /* Deck row cards */ .deck-row{ padding-top: 18px; } .deck-row__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .deck-row__title{ margin: 0; font-size: 22px; font-weight: 1000; } .deck-row__grid{ margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .deck-card{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); position: relative; overflow: hidden; } .deck-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(77,172,150,.22); } .deck-card.is-active, .deck-card[aria-selected="true"]{ border-color: rgba(77,172,150,.36); box-shadow: 0 0 0 4px rgba(77,172,150,.12), var(--shadow-sm); } .deck-card__top{ display: flex; justify-content: space-between; gap: 10px; align-items: start; } .deck-card__icon{ width: 42px; height: 42px; /*border-radius: 14px; background: rgba(77,172,150,.12); border: 1px solid rgba(77,172,150,.18); */ display: grid; place-items: center; font-size: 32px; } .deck-card__iconbtns{ display: inline-flex; gap: 8px; } .deck-card__iconbtn{ border: 1px solid var(--border); background: rgba(15,23,42,.04); border-radius: 12px; padding: 8px 10px; font-weight: 900; } .deck-card__iconbtn:hover{ background: rgba(250,153,56,.12); border-color: rgba(250,153,56,.22); } .deck-card__name{ margin: 12px 0 0; font-size: 18px; font-weight: 1000; } .deck-card__desc{ margin: 6px 0 0; color: var(--text-2); font-weight: 700; } .deck-card__progresslabel{ margin-top: 12px; font-weight: 900; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; } .deck-card__bar{ margin-top: 8px; height: 10px; background: rgba(15,23,42,.06); border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--border); } .deck-card__bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--brand-primary), color-mix(in oklab, var(--brand-primary) 30%, var(--brand-secondary))); } .deck-card__foot{ display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 12px; color: var(--text-2); font-weight: 800; } .deck-card__cta{ color: var(--brand-primary); font-weight: 1000; } .deck-card--new{ display: grid; place-items: center; text-align: center; background: radial-gradient(700px 260px at 20% 0%, rgba(77,172,150,.12), transparent 60%), radial-gradient(700px 260px at 90% 0%, rgba(250,153,56,.10), transparent 60%), var(--surface-solid); } .deck-card__plus{ font-size: 34px; font-weight: 1000; } .deck-card__newtitle{ font-weight: 1000; margin-top: 10px; } .deck-card__newsub{ color: var(--text-2); font-weight: 800; margin-top: 6px; } /* Deck top: hero + mini chart */ .deck-top{ margin-top: 14px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; align-items: stretch; } .deck-hero{ position: relative; border-radius: var(--r-lg); overflow: hidden; padding: 24px 24px 20px; background: radial-gradient(900px 420px at 15% 0%, rgba(var(--brand-primary-rgb),.14), transparent 62%), radial-gradient(900px 420px at 90% 10%, rgba(250,153,56,.10), transparent 62%), var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); color: var(--text); margin-top: 18px; } .deck-hero__accent{ position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), rgba(250,153,56,.85)); border-radius: var(--r-lg) var(--r-lg) 0 0; } .deck-hero__inner{ display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .deck-hero__header{ display: flex; gap: 16px; align-items: center; } .deck-hero__logo{ flex-shrink: 0; } .deck-hero__emoji{ font-size: 108px; line-height: 1; } .deck-hero__title{ margin: 0; font-size: 38px; font-weight: 900; letter-spacing: -.3px; } .deck-hero__subtitle{ margin: 4px 0 0; color: var(--text-2); font-weight: 600; font-size: 18px; } .deck-hero__footer{ display: flex; justify-content: space-between; align-items: center; gap: 16px; } .deck-hero__stats{ display: flex; gap: 0; align-items: flex-start; flex-wrap: wrap; } .deck-mini-stat{ padding: 4px 20px 4px 0; } .deck-mini-stat + .deck-mini-stat{ border-left: 1px solid var(--border); padding-left: 20px; } .deck-mini-stat--progress{ min-width: 200px; } .deck-mini-stat__label{ color: var(--text-2); font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 4px; } .deck-mini-stat__value{ font-weight: 900; font-size: 20px; letter-spacing: -.3px; } .deck-hero__bar{ width: 100%; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 6px; } .deck-hero__bar-fill{ height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand-primary), rgba(250,153,56,.9)); width: 0%; transition: width .7s cubic-bezier(.22,1,.36,1); } .deck-hero__manage{ background: var(--surface-3); border-color: var(--border); color: var(--text); white-space: nowrap; } .deck-hero__manage:hover{ background: rgba(var(--brand-primary-rgb),.18); } html[data-theme="dark"] .deck-hero__bar{ background: rgba(255,255,255,.10); } /* Deck panels (charts/recs) */ .deck-panel{ border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 18px; } .deck-panel__head{ padding: 14px 16px; border-bottom: 1px solid var(--border); } .deck-panel__head--row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; } .deck-panel__title{ margin: 0; font-size: 18px; font-weight: 1000; } .deck-panel__sub{ margin: 6px 0 0; color: var(--text-2); font-weight: 700; } .deck-panel__link{ color: var(--text); font-weight: 900; } .deck-panel__link:hover{ color: var(--brand-primary); } .deck-panel__body{ padding: 14px 16px 16px; } /* Panel actions container */ .deck-panel__actions{ display: flex; align-items: center; gap: 12px; } /* Collapse/Expand toggle button */ .deck-panel__toggle{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-3); color: var(--text-2); cursor: pointer; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); } .deck-panel__toggle:hover{ background: rgba(var(--brand-primary-rgb), .10); border-color: rgba(var(--brand-primary-rgb), .28); } .deck-panel__toggle-icon{ transition: transform 0.25s var(--ease); } .deck-panel__toggle[aria-expanded="false"] .deck-panel__toggle-icon{ transform: rotate(180deg); } /* Collapsible body animation */ .deck-panel__body--collapsible{ overflow: hidden; transition: max-height 0.3s var(--ease), padding 0.3s var(--ease), opacity 0.25s var(--ease); } .deck-panel__body--collapsed{ max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; } .deck-analytics__chart-wrap{ display: grid; gap: 12px; } .deck-analytics__chart{ height: 260px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.10); overflow: hidden; } .deck-analytics__chart--mini{ height: 280px; } .deck-analytics__legend--mini{ display: none; /* legend already hidden in JS; keep clean */ } /* Focus row */ .deck-focus__list--row{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } /* Base v2 card (works on light backgrounds; focus cards get dark overrides inside .deck-panel) */ .deck-item--v2{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .deck-item--v2:hover{ transform: translateY(-2px); border-color: rgba(77,172,150,.22); box-shadow: var(--shadow); } .deck-item--v2 .deck-item__row{ display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(140px, 220px) auto; /* tweak values */ gap: 12px; } .deck-item__header{ display: flex; justify-content: space-between; gap: 10px; align-items: start; } .focus-card__reason{ margin: 20px 0 0; color: var(--text-2); font-weight: 700; } /* Access level accent (subtle) */ .deck-item--v2{ border-left: 4px solid transparent; } .deck-item--v2.diff-free{ border-left-color: rgba(77,172,150,.42); } .deck-item--v2.diff-premium{ border-left-color: rgba(250,153,56,.48); } .deck-item--v2.diff-unrated{ border-left-color: rgba(11,18,32,.20); } /* Focus cards inside the recommendations panel */ .deck-panel .deck-item--v2{ background: var(--surface-3); border-color: var(--border); box-shadow: none; } .deck-panel .deck-item--v2:hover{ background: rgba(var(--brand-primary-rgb), .06); border-color: rgba(var(--brand-primary-rgb), .26); } .deck-panel .deck-item__title{ color: var(--text); } .deck-panel .deck-item__definition{ color: var(--text-2); margin-top: 10px; font-size: 14px; } .deck-panel .deck-item__meta{ margin-top: 10px; } .deck-panel .deck-item--v2 .badge{ border-color: var(--border); background: var(--surface-3); color: var(--text-2); } .deck-panel .focus-card__reason{ color: var(--text-2); } /* Restore white text/bg in dark mode */ html[data-theme="dark"] .deck-panel .deck-item--v2{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); } html[data-theme="dark"] .deck-panel .deck-item--v2:hover{ background: rgba(255,255,255,.08); border-color: rgba(77,172,150,.26); } html[data-theme="dark"] .deck-panel .deck-item__title{ color: rgba(255,255,255,.92); } html[data-theme="dark"] .deck-panel .deck-item__definition{ color: rgba(255,255,255,.78); } html[data-theme="dark"] .deck-panel .deck-item--v2 .badge{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: rgba(255,255,255,.84); } html[data-theme="dark"] .deck-panel .focus-card__reason{ color: rgba(255,255,255,.70); } .deck-action-btn{ width: 38px; height: 38px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t) var(--ease), background var(--t) var(--ease); } .deck-action-btn:hover{ background: rgba(77,172,150,.22); transform: translateY(-1px); } /* Focus empty */ .deck-focus__empty{ padding: 20px 0 10px; } .deck-focus__empty-inner{ display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: var(--r-lg); border: 1px dashed var(--border); background: var(--surface-3); padding: 16px; } .deck-focus__empty-icon{ font-size: 22px; } .deck-focus__empty-title{ font-weight: 1000; color: var(--text); } .deck-focus__empty-subtitle{ color: var(--text-2); font-weight: 700; margin-top: 4px; } html[data-theme="dark"] .deck-focus__empty-inner{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } /* Filter bar */ .deck-filterbar{ margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; } .deck-filterbar__native{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .deck-filterbar__top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .deck-tabs{ display: inline-flex; gap: 10px; flex-wrap: wrap; } .deck-tab{ border: 1px solid var(--border); background: var(--surface-solid); border-radius: var(--r-pill); padding: 10px 12px; display: inline-flex; gap: 10px; align-items: center; font-weight: 1000; cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); } .deck-tab:hover{ transform: translateY(-1px); border-color: rgba(77,172,150,.22); background: rgba(77,172,150,.08); } .deck-tab.is-active{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.28); } .deck-tab__count{ min-width: 28px; height: 22px; border-radius: var(--r-pill); background: rgba(11,18,32,.06); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 1000; } .deck-filterbar__actions{ display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; } .deck-filterbar__btn{ border: 1px solid var(--border); background: rgba(15,23,42,.04); border-radius: var(--r-pill); padding: 10px 12px; font-weight: 1000; } .deck-filterbar__btn:hover{ background: rgba(77,172,150,.10); border-color: rgba(77,172,150,.22); } .deck-filterbar__danger{ border-color: rgba(250,153,56,.28); } .deck-filterbar__danger:hover{ background: rgba(250,153,56,.14); border-color: rgba(250,153,56,.34); } .deck-filterbar__chips{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } .deck-chip{ border: 1px solid var(--border); background: var(--surface-solid); border-radius: var(--r-pill); padding: 10px 12px; font-weight: 900; cursor: pointer; transition: background var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); } .deck-chip:hover{ transform: translateY(-1px); border-color: rgba(77,172,150,.22); background: rgba(77,172,150,.08); } .deck-chip.is-active{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.28); } /* Deck list */ .deck-content{ padding-top: 14px; } .deck-list{ margin-top: 12px; display: grid; /* Always keep the “card grid” feel (even with 1–2 items) */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; } /* ========================================================= Deck list — Make deck items clickable again (app.js opens terms via clicks on [data-term], which is on .deck-item__title) ========================================================= */ .deck-list .deck-item { display: flex; /* lets the row stretch to the card height */ } .deck-list .deck-item .deck-item__row { flex: 1; } /* Make the row the containing block for the click-catcher (covers icon + body) */ .deck-list .deck-item .deck-item__main { position: static; z-index: auto; } /* Click-catcher overlay (routes clicks to the title which has [data-term]) */ .deck-list .deck-item .deck-item__title::after { content: ""; position: absolute; inset: 0; z-index: 2; cursor: pointer; } /* Keep deck action buttons above the click-catcher */ .deck-list .deck-item .deck-item__actions { z-index: 3; } .deck-list .deck-item .deck-action-btn { position: relative; z-index: 4; } /* Card shell */ .deck-item{ position: relative; overflow: hidden; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--border) 85%, transparent); box-shadow: 0 18px 56px rgba(0,0,0,.14); padding: 16px 16px 14px; min-height: 290px; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .deck-item:hover{ transform: translateY(-3px); box-shadow: 0 26px 70px rgba(0,0,0,.18); border-color: rgba(77,172,150,.28); } .deck-item.is-studied{ border-color: rgba(77,172,150,.34); background: #4dac961c; } .deck-item .deck-item__row{ position: relative; z-index: 1; display: block; min-height: 100%; } /* Icon chip (reuses existing .term-media structure) */ .deck-item .term-media{ position: absolute; /*top: 16px; left: 16px;*/ width: 120px; height: 120px; display: grid; overflow: hidden; z-index: 2; } .deck-item .term-media img{ width: 72%; height: 72%; object-fit: contain; /*filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));*/ } /* Content stack */ .deck-item .deck-item__main{ position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 104px; /* room for icon */ min-height: 100%; } .deck-item .deck-item__title{ margin: 0; font-size: 20px; font-weight: 1000; letter-spacing: -0.3px; color: var(--text); } .deck-item .deck-item__definition{ margin: 0; color: var(--text-2); font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .deck-item .deck-item__meta{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; } /* Actions (study / remove) */ .deck-item .deck-item__actions{ position: absolute; top: 14px; right: 14px; display: inline-flex; gap: 8px; z-index: 3; } .deck-item .deck-action-btn{ width: 38px; height: 38px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease); } .deck-item .deck-action-btn:hover{ background: rgba(77,172,150,.12); border-color: rgba(77,172,150,.22); transform: translateY(-1px); } .empty-state{ margin-top: 12px; border-radius: var(--r-lg); border: 1px dashed color-mix(in oklab, var(--border) 92%, transparent); background: var(--surface); padding: 26px 18px; text-align: center; box-shadow: var(--shadow-sm); } .empty-state__icon{ font-size: 30px; } .empty-state__title{ margin: 10px 0 0; font-size: 20px; font-weight: 1000; } .empty-state__message{ margin: 8px 0 16px; color: var(--text-2); font-weight: 700; } /* ---------- Account Page ---------- */ /* --- TWEAK: Account hero alignment --- */ #accountHeroName{ color: var(--brand-primary); font-weight: 1000; } .account-hero{ align-items: center; } /* --- TWEAK: Account hero brand accents --- */ #accountEmail, #accountPlan{ color: var(--brand-primary); font-weight: 900; } .account-hero{ margin-top: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); padding: 16px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; } .account-hero__main{ display: flex; gap: 12px; align-items: center; } .account-hero__avatar{ width: 52px; height: 52px; border-radius: 18px; background: rgba(77,172,150,.12); border: 1px solid rgba(77,172,150,.18); display: grid; place-items: center; font-size: 22px; } .account-hero__title{ margin: 0; font-size: 22px; font-weight: 1000; } .account-hero__meta{ margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-weight: 800; } .account-hero__actions{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .auth-status{ margin: 8px 0 0; color: var(--text-2); font-weight: 800; } .account-panel{ margin-top: 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .account-panel__head{ padding: 14px 16px; border-bottom: 1px solid var(--border); } .account-panel__title{ margin: 0; font-size: 18px; font-weight: 1000; } .account-panel__sub{ margin: 6px 0 0; color: var(--text-2); font-weight: 700; } .account-panel__body{ padding: 14px 16px 16px; } .account-field__label{ font-weight: 900; color: var(--text-2); } .account-field__row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .account-field__row .form-control{ max-width: 360px; } .account-section{ padding-top: 20px; } .badge-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .badge-card{ background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; } .badge-card--earned{ border-color: rgba(77,172,150,.28); } .badge-card__header{ display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; } .badge-card__img{ width: 56px; height: 56px; border-radius: 16px; object-fit: cover; border: 1px solid var(--border); background: rgba(15,23,42,.05); } .badge-card__name{ font-weight: 1000; } .badge-card__meta{ color: var(--text-3); font-weight: 900; margin-top: 4px; font-size: 12px; } .badge-earned-label{ align-self: start; justify-self: end; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(77,172,150,.14); border: 1px solid rgba(77,172,150,.26); font-size: 12px; font-weight: 1000; } .badge-progress{ margin-top: 12px; height: 10px; background: rgba(15,23,42,.06); border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--border); } .badge-progress__bar{ height: 100%; background: linear-gradient(90deg, var(--brand-primary), color-mix(in oklab, var(--brand-primary) 35%, var(--brand-secondary))); } /* ---------- Modals (generic) ---------- */ .modal{ position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; } .modal.hidden{ display: none; } .modal-overlay, .modal__backdrop{ position: absolute; inset: 0; background: rgba(3, 6, 12, .62); backdrop-filter: blur(10px); } .modal-content, .modal__card{ position: relative; width: min(720px, calc(100% - 24px)); max-height: min(84vh, 760px); /* prevents content spilling out */ overflow: auto; /* scroll inside the modal */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 18px; } .modal-close, .modal__close{ position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--border); background: rgba(15,23,42,.04); font-size: 22px; line-height: 1; display: grid; place-items: center; } .modal-close:hover, .modal__close:hover{ background: rgba(250,153,56,.12); border-color: rgba(250,153,56,.22); } .modal-actions{ display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* Achievement modal */ .achv-modal__header{ display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; } .achv-badge-img{ width: 84px; height: 84px; border-radius: 18px; border: 1px solid var(--border); background: rgba(15,23,42,.05); object-fit: cover; } .achv-title{ margin: 0; font-weight: 1000; font-size: 18px; } .achv-desc{ margin: 8px 0 0; color: var(--text-2); font-weight: 700; } .achv-modal__actions{ margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; } /* Deck picker / editor */ .deck-modal h2{ margin: 0 0 6px; font-size: 20px; font-weight: 1000; } .deck-picker__list{ display: grid; gap: 10px; margin-top: 12px; } .deck-pick{ border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 12px; background: var(--surface); box-shadow: 0 1px 0 rgba(15,23,42,.03); display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .deck-pick:hover{ transform: translateY(-1px); border-color: rgba(77,172,150,.22); box-shadow: var(--shadow-sm); } .deck-pick__left{ display: flex; gap: 12px; align-items: center; } .deck-pick__icon{ width: 74px; height: 74px; display: grid; place-items: center; font-size: 50px; } .deck-pick__name{ font-weight: 1000; } .deck-pick__desc{ color: var(--text-3); font-weight: 800; margin-top: 4px; font-size: 12px; } .deck-pick__right{ color: var(--text-2); font-weight: 900; } .deck-picker__footer{ margin-top: 14px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .deck-editor__icons{ display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); /* wraps nicely (no overflow) */ gap: 10px; margin-top: 10px; max-width: 100%; align-items: center; justify-items: center; } @media (max-width: 520px){ .deck-editor__icons{ grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); } } .deck-icon-btn{ width: 44px; height: 44px; border-radius: 14px; border: 1px solid transparent; /* no visible box by default */ background: transparent; /* removes the “tile” look */ display: grid; place-items: center; font-size: 22px; /* bigger emoji */ line-height: 1; transition: transform var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease); } .deck-icon-btn:hover{ background: rgba(77,172,150,.10); border-color: rgba(77,172,150,.22); transform: translateY(-1px); filter: saturate(1.06); } .deck-icon-btn.is-selected{ background: rgba(77,172,150,.16); border-color: rgba(77,172,150,.32); box-shadow: 0 0 0 4px rgba(77,172,150,.14); } /* ---------- Auth Modal ---------- */ .modal--auth{ place-items: center; } .auth-modal{ position: relative; width: min(980px, calc(100% - 24px)); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1.05fr .95fr; } .auth-modal__close{ position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); font-size: 24px; line-height: 1; } .auth-modal__close:hover{ background: rgba(77,172,150,.28); } .auth-modal__left{ padding: 22px; background: radial-gradient(900px 360px at 20% 0%, rgba(77,172,150,.20), transparent 62%), radial-gradient(900px 360px at 90% 10%, rgba(250,153,56,.18), transparent 62%), linear-gradient(180deg, rgba(15,23,32,.92), rgba(15,23,32,.82)); color: var(--dark-text); display: grid; align-content: space-between; gap: 18px; } .auth-modal__brandname{ font-weight: 1000; font-size: 18px; } .auth-modal__clay{ width: 300px; height: 300px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 22px 46px rgba(0,0,0,.28)); } .auth-modal__pitch-title{ font-weight: 1000; font-size: 34px; letter-spacing: -0.9px; line-height: 1.06; } .auth-modal__pitch-title span{ color: var(--brand-primary); } .auth-modal__pitch-sub{ margin-top: 10px; color: var(--dark-text-2); font-weight: 700; } .auth-modal__right{ padding: 22px; } .auth-modal__title{ margin: 0; font-size: 24px; font-weight: 1000; } .auth-modal__subtitle{ margin: 8px 0 0; color: var(--text-2); font-weight: 700; } .auth-tabs{ margin-top: 14px; display: inline-flex; gap: 8px; padding: 6px; border-radius: var(--r-pill); background: rgba(15,23,42,.05); border: 1px solid var(--border); } .auth-tab{ border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; padding: 10px 14px; font-weight: 1000; color: var(--text-2); } .auth-tab.is-active{ background: var(--surface-solid); border-color: rgba(77,172,150,.22); color: var(--text); } .auth-row{ margin-top: 12px; } .auth-row__split{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .auth-label{ display: block; font-weight: 900; color: var(--text-2); margin-bottom: 6px; } .auth-link{ color: var(--brand-primary); font-weight: 900; } .auth-field{ position: relative; display: flex; align-items: center; } .auth-field__icon{ position: absolute; left: 12px; opacity: .85; } .auth-input{ padding-left: 40px; } .auth-field__toggle{ position: absolute; right: 10px; width: 38px; height: 38px; border-radius: 14px; border: 1px solid var(--border); background: rgba(15,23,42,.04); } .auth-actions{ margin-top: 16px; display: grid; gap: 10px; } .auth-submit{ width: 100%; justify-content: center; } .auth-legal{ margin-top: 12px; color: var(--text-3); font-weight: 800; font-size: 12px; } .auth-legal a{ color: var(--brand-primary); font-weight: 1000; } /* ---------- Term lesson / TOC / paywall ---------- */ .term-layout{ display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; } .term-sidebar{ /* (older layout in index) */ position: sticky; top: 92px; } .term-toc{ position: sticky; top: 92px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px; margin-top: 30px; } .term-toc__title{ font-weight: 1000; letter-spacing: -0.2px; margin-bottom: 10px; } .term-toc__list{ display: grid; gap: 8px; list-style: none; } .term-toc__link{ display: block; padding: 10px 10px; border-radius: 14px; border: 1px solid transparent; color: var(--text-2); font-weight: 900; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease); } .term-toc__link:hover{ background: rgba(77,172,150,.10); border-color: rgba(77,172,150,.16); color: var(--text); text-decoration: none; transform: translateY(-1px); } .term-toc__link.is-active{ background: rgba(77,172,150,.14); border-color: rgba(77,172,150,.24); color: var(--text); } .term-content{ min-width: 0; } /* Lesson sections created by app.js */ .term-lesson-section{ margin-top: 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-solid); overflow: hidden; } .term-lesson-header{ padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; background: rgba(15,23,42,.03); } .term-lesson-title{ margin: 0; font-size: 18px; font-weight: 1000; } .term-lesson-toggle{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--border); background: rgba(15,23,42,.04); display: grid; place-items: center; font-weight: 1000; transition: transform var(--t) var(--ease), background var(--t) var(--ease); } .term-lesson-header:hover .term-lesson-toggle{ background: rgba(77,172,150,.10); } .term-lesson-body{ padding: 14px; } .term-lesson-section.is-collapsed .term-lesson-body{ display: none; } .term-lesson-section.is-collapsed .term-lesson-toggle{ transform: rotate(-90deg); } .term-lesson-meta{ margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--text-3); font-weight: 900; font-size: 12px; } .example-pill{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--border); background: rgba(15,23,42,.03); font-weight: 800; color: var(--text-2); margin-top: 10px; } .lesson-media{ margin-top: 12px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: rgba(15,23,42,.03); } .lesson-media img{ width: 100%; height: auto; display: block; } .lesson-media figcaption{ padding: 10px 12px; color: var(--text-3); font-weight: 800; font-size: 12px; } /* Paywall block (inserted by JS) */ .paywall{ border-radius: var(--r-lg); border: 1px solid rgba(250,153,56,.25); background: radial-gradient(700px 240px at 10% 0%, rgba(250,153,56,.14), transparent 64%), radial-gradient(700px 240px at 90% 0%, rgba(77,172,150,.12), transparent 64%), var(--surface-solid); box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 10px; } .lock-pill{ display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 3px 12px; border-radius: var(--r-pill); background: rgba(250,153,56,.14); border: 1px solid rgba(250,153,56,.24); font-weight: 1000; } .paywall p{ margin: 0; color: var(--text-2); font-weight: 700; } /* Term actions (header) */ .term-hero__actions{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .term-hero__actions .btn{ white-space: nowrap; } /* Glossary inline helper (feature flag in JS) */ .glossary-term{ display: inline-block; padding: 0 4px; border-radius: 10px; background: rgba(77,172,150,.10); border: 1px solid rgba(77,172,150,.14); cursor: help; } .glossary-tip{ position: fixed; z-index: 150; max-width: min(360px, calc(100vw - 24px)); border-radius: var(--r-lg); background: rgba(12,17,18,.94); border: 1px solid rgba(255,255,255,.10); box-shadow: var(--shadow-lg); color: var(--text); padding: 12px 12px; } .glossary-tip::after{ content: ""; position: absolute; width: 12px; height: 12px; background: rgba(12,17,18,.94); border-left: 1px solid rgba(255,255,255,.10); border-top: 1px solid rgba(255,255,255,.10); transform: rotate(45deg); top: -6px; left: 26px; } .glossary-tip__title{ font-weight: 1000; margin: 0 0 6px; } .glossary-tip__text{ color: rgba(255,255,255,.76); font-weight: 700; line-height: 1.45; } .glossary-tip__actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .glossary-tip__btn{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--text); border-radius: var(--r-pill); padding: 10px 12px; font-weight: 1000; } .glossary-tip__btn:hover{ background: rgba(77,172,150,.22); } /* ---------- Toasts ---------- */ .toast-container{ position: fixed; right: 16px; bottom: 16px; z-index: 120; display: grid; gap: 10px; width: min(420px, calc(100% - 32px)); } .toast{ display: grid; grid-template-columns: 40px 1fr 40px; align-items: start; gap: 10px; padding: 12px 12px; border-radius: var(--r-lg); /* KEY FIX: theme-aware surface + text */ background: color-mix(in oklab, var(--surface-solid) 92%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-lg); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .toast__icon{ width: 40px; height: 40px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--border); font-size: 18px; } .toast__title{ font-weight: 1000; color: var(--text); } .toast__message{ margin-top: 4px; color: var(--text-2); font-weight: 700; } .toast__close{ width: 40px; height: 40px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-3); color: var(--text); display: grid; place-items: center; transition: background var(--t) var(--ease), transform var(--t) var(--ease); } .toast__close:hover{ background: rgba(77,172,150,.12); transform: translateY(-1px); } .toast--success{ border-color: rgba(77,172,150,.30); } .toast--error{ border-color: rgba(250,153,56,.34); } .toast--info{ border-color: rgba(15,23,42,.16); } html[data-theme="dark"] .toast--info{ border-color: rgba(255,255,255,.16); } .toast.fade-out{ opacity: 0; transform: translateY(4px); transition: all 200ms var(--ease); } /* ---------- Footer ---------- */ .site-footer{ border-top: 1px solid var(--border); padding: 18px 0; background: color-mix(in oklab, var(--surface-solid) 76%, transparent); } .site-footer__inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-2); font-weight: 800; } .footer-links{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .footer-links a{ color: var(--text-2); font-weight: 900; } .footer-links a:hover{ color: var(--text); } /* ---------- Sticky footer layout (footer always at bottom) ---------- */ html, body{ } body{ min-height: 100vh; /* fallback */ min-height: 100dvh; /* modern viewport units */ display: flex; flex-direction: column; } /* Main content takes remaining space so footer sits at the bottom */ .main{ flex: 1 0 auto; } /* Footer sticks to bottom when content is short */ .site-footer{ margin-top: auto; flex-shrink: 0; } /* ---------- Accessibility / motion ---------- */ :focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(77,172,150,.18); border-radius: 12px; } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .hero-neo__inner{ grid-template-columns: 1fr; } .hero-logo-hero{ width: 180px; height: 180px; margin-inline: auto; } .plan-grid{ grid-template-columns: 1fr; } .how__grid{ grid-template-columns: 1fr; } .how__connector{ display: none; } #featuredDeck{ grid-template-columns: repeat(2, minmax(0,1fr)); } .wall__grid{ grid-template-columns: 1fr; } .category-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .browse-results{ grid-template-columns: 1fr; } .alphabet-nav{ position: relative; top: auto; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44px; overflow-x: auto; } .term-list{ grid-template-columns: 1fr; } .deck-top{ grid-template-columns: 1fr; } .deck-hero__footer{ flex-wrap: wrap; } .deck-focus__list--row{ grid-template-columns: 1fr; } .deck-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .badge-grid{ grid-template-columns: 1fr; } .auth-modal{ grid-template-columns: 1fr; } .auth-modal__left{ display: none; } } @media (max-width: 520px){ .nav__menu{ display: none; } /* keeps header clean on small screens */ .hero-neo__title{ font-size: 36px; } .deckpage-hero__title{ font-size: 32px; } .term-confidence__controls{ grid-template-columns: repeat(2, minmax(0,1fr)); } .deck-editor__icons{ grid-template-columns: repeat(8, minmax(0,1fr)); } }