/* ================================================================ LEARN ARTICLE STYLES Shared by all guide / educational pages Loaded once per article via in the page ================================================================ */ .learn-breadcrumb{ padding:18px 0 0;font-family:var(--mono);font-size:.72rem; color:var(--muted);letter-spacing:.12em;text-transform:uppercase; } .learn-breadcrumb a{color:var(--muted);text-decoration:none;} .learn-breadcrumb a:hover{color:var(--red);} .learn-breadcrumb .sep{margin:0 8px;color:var(--muted-2);} .learn-breadcrumb .current{color:#fff;} .learn-hero{ padding:48px 0 32px; border-bottom:1px solid var(--line); margin-bottom:48px; } .learn-hero .category-tag{ display:inline-block; font-family:var(--mono);font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--red); padding:6px 12px;border:1px solid rgba(214,31,38,.4); border-radius:4px;margin-bottom:18px; } .learn-hero h1{ font-family:var(--display); font-size:clamp(2.4rem,5vw,4rem);line-height:.98; letter-spacing:-.025em;text-transform:uppercase; margin-bottom:22px; } .learn-hero h1 .accent{color:var(--red);} .learn-hero .article-lede{ font-size:1.18rem;color:var(--text-2); max-width:780px;line-height:1.55; margin-bottom:24px; } .learn-hero .meta-row{ display:flex;flex-wrap:wrap;gap:18px;align-items:center; font-family:var(--mono);font-size:.74rem; color:var(--muted);letter-spacing:.08em;text-transform:uppercase; padding-top:14px; } .learn-hero .meta-row .dot{color:var(--muted-2);} .learn-hero .meta-row .author{color:#fff;} .learn-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px;align-items:start; padding-bottom:80px; } @media (max-width:1020px){ .learn-layout{grid-template-columns:1fr;gap:32px;} } .learn-content .tldr{ background:rgba(214,31,38,.05); border:1px solid rgba(214,31,38,.3); border-left:4px solid var(--red); padding:22px 26px;border-radius:8px; margin-bottom:36px; } .learn-content .tldr-label{ font-family:var(--mono);font-size:.7rem; letter-spacing:.2em;color:var(--red); text-transform:uppercase;font-weight:700;margin-bottom:10px; } .learn-content .tldr p{margin:0;color:var(--text-1);font-size:1.02rem;line-height:1.6;} .learn-content .tldr strong{color:#fff;} .learn-content h2{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.2rem); text-transform:uppercase;letter-spacing:-.018em;line-height:1.05; margin:54px 0 18px;color:#fff; scroll-margin-top:80px; } .learn-content h2 .num{ color:var(--red);font-family:var(--mono); font-size:.62em;letter-spacing:.1em; margin-right:14px;font-weight:700; } .learn-content h3{ font-family:var(--display); font-size:1.25rem;text-transform:uppercase; margin:34px 0 12px;color:#fff; letter-spacing:-.005em; } .learn-content p{ color:var(--text-2);font-size:1.02rem;line-height:1.72; margin-bottom:16px; } .learn-content strong{color:#fff;font-weight:600;} .learn-content em{color:var(--text-1);} .learn-content ul, .learn-content ol{ margin:8px 0 22px 22px;color:var(--text-2); } .learn-content li{margin-bottom:10px;line-height:1.68;} .learn-content li strong{color:#fff;} .learn-content a{ color:var(--red);text-decoration:none; border-bottom:1px solid rgba(214,31,38,.35); transition:border-color .15s; } .learn-content a:hover{border-bottom-color:var(--red);} .learn-content blockquote{ border-left:3px solid var(--red); padding:14px 22px; background:rgba(255,255,255,.02); margin:24px 0; color:var(--text-1);font-style:italic; } .learn-content table{ width:100%;border-collapse:collapse; margin:22px 0;background:var(--panel); border:1px solid var(--line);border-radius:8px; overflow:hidden;font-size:.94rem; } .learn-content table th{ text-align:left;padding:12px 16px; background:var(--panel-2);color:#fff; font-family:var(--display);text-transform:uppercase; font-size:.78rem;letter-spacing:.06em; border-bottom:1px solid var(--line); } .learn-content table td{ padding:12px 16px;border-top:1px solid var(--line); vertical-align:top;color:var(--text-2); } .learn-content table tr:nth-child(even) td{background:rgba(255,255,255,.015);} .learn-content code{ font-family:var(--mono);font-size:.88em; background:rgba(255,255,255,.06); padding:2px 7px;border-radius:4px;color:#ffb6b8; } .learn-content pre{ background:#0a0a0a;border:1px solid var(--line); border-radius:8px;padding:18px 20px; margin:18px 0;overflow-x:auto; font-size:.84rem;line-height:1.55; } .learn-content pre code{background:transparent;padding:0;color:var(--text-1);} .callout-box{ margin:28px 0;padding:22px 26px; background:linear-gradient(135deg, rgba(214,31,38,.08), rgba(0,0,0,0)); border:1px solid rgba(214,31,38,.3);border-radius:12px; } .callout-box .ck-label{ display:block;font-family:var(--display);text-transform:uppercase; color:var(--red);font-size:.82rem;letter-spacing:.05em; font-weight:700;margin-bottom:10px; } .callout-box p{margin:0;} .article-faq{ margin-top:64px;padding-top:42px; border-top:1px solid var(--line); } .article-faq h2{margin-top:0 !important;} details.faq{ border:1px solid var(--line);border-radius:10px; margin-bottom:10px;background:var(--panel); } details.faq[open]{border-color:rgba(214,31,38,.5);} details.faq summary{ list-style:none;cursor:pointer; padding:18px 22px;font-weight:600;color:#fff; font-size:.98rem;display:flex;align-items:center; justify-content:space-between;gap:14px; } details.faq summary::-webkit-details-marker{display:none;} details.faq summary::after{ content:"+";color:var(--red);font-size:1.4rem; font-weight:700;line-height:1; } details.faq[open] summary::after{content:"\2212";} details.faq .a{ padding:0 22px 18px;color:var(--text-2); line-height:1.7;font-size:.96rem; } .article-cta{ margin-top:52px;padding:34px 32px; background:linear-gradient(135deg, rgba(214,31,38,.12), rgba(0,0,0,0)); border:1px solid var(--red);border-radius:14px; text-align:center; } .article-cta h3{ font-family:var(--display);text-transform:uppercase; font-size:1.4rem;margin-bottom:8px;color:#fff;letter-spacing:-.005em; } .article-cta p{color:var(--text-2);margin-bottom:18px;} .article-cta .btn{margin:0 6px;} aside.learn-sidebar{position:sticky;top:24px;} @media (max-width:1020px){aside.learn-sidebar{position:static;}} .side-card{ background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:22px;margin-bottom:18px; } .side-card.accent{ background:linear-gradient(135deg, rgba(214,31,38,.12), rgba(0,0,0,0)); border-color:var(--red); } .side-card h4{ font-family:var(--mono);font-size:.72rem; letter-spacing:.2em;text-transform:uppercase; color:#fff;margin-bottom:14px;font-weight:700; } .side-card.accent h4{color:var(--red);} .side-card ul{list-style:none;padding-left:0;margin:0;} .side-card li{margin-bottom:9px;font-size:.9rem;line-height:1.4;} .side-card a{ color:var(--muted);text-decoration:none; transition:color .15s;display:block; } .side-card a:hover{color:var(--red);} .side-card a.current{color:var(--red);font-weight:600;} .toc-list{font-size:.86rem;} .toc-list a{padding:4px 0;} /* Learn INDEX page styles */ .learn-index-hero{padding:60px 0 32px;} .learn-index-hero h1{ font-family:var(--display);font-size:clamp(2.6rem,5.6vw,4.4rem); line-height:.95;letter-spacing:-.025em;text-transform:uppercase; margin-bottom:18px; } .learn-index-hero h1 .accent{color:var(--red);} .learn-index-hero .lede{ font-size:1.16rem;color:var(--text-2);max-width:780px;line-height:1.55; } .learn-category{ margin:48px 0 24px; display:flex;align-items:center;gap:18px; } .learn-category h2{ font-family:var(--display);font-size:1.6rem; text-transform:uppercase;letter-spacing:-.01em;margin:0;color:#fff; } .learn-category .line{flex:1;height:1px;background:var(--line);} .learn-category .count{ font-family:var(--mono);font-size:.72rem; color:var(--muted);letter-spacing:.14em; } .learn-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px;margin-bottom:24px; } .learn-card{ background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:26px 24px; text-decoration:none;display:flex;flex-direction:column; transition:all .2s;color:inherit; } .learn-card:hover{ border-color:var(--red);background:var(--panel-2); transform:translateY(-2px); } .learn-card .lc-num{ font-family:var(--mono);font-size:.66rem;letter-spacing:.22em; color:var(--red);text-transform:uppercase; font-weight:700;margin-bottom:12px; } .learn-card h3{ font-family:var(--display);font-size:1.15rem; text-transform:uppercase;letter-spacing:-.005em; line-height:1.18;color:#fff;margin-bottom:12px; } .learn-card p{ color:var(--text-2);font-size:.92rem;line-height:1.55; margin-bottom:14px;flex:1; } .learn-card .lc-meta{ font-family:var(--mono);font-size:.68rem; color:var(--muted);letter-spacing:.1em;text-transform:uppercase; border-top:1px solid var(--line);padding-top:12px; }