/* JT Compliance — blog/guide styles. Extends jtc-lp.css design tokens. Light theme · Rajdhani/Rubik · #e7161f red · #1d1f22 charcoal. */ :root{ --red:#e7161f; --ink:#1d1f22; --ink-soft:#52585f; --ink-mute:#8b9199; --line:rgba(20,24,30,.12); --bg:#ffffff; --bg-2:#f7fbfd; --bg-3:#eef3f6; --green:#1db954; --amber:#f5a623; } /* Kill the dark concept-theme that jtc-lp.css paints on (dark bg + ::before/::after gradient layers + floating orbs) so guide text is always dark-on-white and legible. Mirrors what the homepage does inline. */ html, body.jtc-blog{ background:#ffffff !important; } body.jtc-blog::before, body.jtc-blog::after{ display:none !important; content:none !important; } .jtc-blog .bg-orbs{ display:none !important; } /* No gradient text/fills on guides — flat brand red instead (per request). */ .jtc-blog .grad{ background:none !important; -webkit-text-fill-color:currentColor !important; color:var(--red) !important; } .jtc-blog{ background:#fff; color:var(--ink); font-family:'Rubik','Rubik Fallback',-apple-system,system-ui,Arial,sans-serif; overflow-x:hidden; position:relative; z-index:0; } .jtc-blog h1,.jtc-blog h2,.jtc-blog h3{ font-family:'Rajdhani','Rajdhani Fallback','Rubik',sans-serif; font-weight:700; letter-spacing:.005em; color:var(--ink); } .wrap{ max-width:1120px; margin:0 auto; padding:0 22px; } .wrap-narrow{ max-width:760px; margin:0 auto; padding:0 22px; } /* header reuse */ .jtc-blog .topbar{ position:sticky; top:0; z-index:50; background:#1d1f22; border-bottom:3px solid var(--red); } .jtc-blog .topbar .wrap{ display:flex; align-items:center; gap:14px; height:66px; max-width:1180px; } .jtc-blog .brand-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; } .jtc-blog .brand-logo img{ border-radius:7px; } .jtc-blog .bl-name b{ display:block; color:#fff; font-family:'Rajdhani','Rubik',sans-serif; font-weight:700; text-transform:uppercase; font-size:1.02rem; line-height:1; } .jtc-blog .bl-name span{ color:rgba(255,255,255,.6); font-size:.72rem; } .jtc-blog .tb-nav{ display:flex; align-items:center; gap:2px; margin:0 auto 0 26px; } .jtc-blog .tb-nav a{ font-family:'Rajdhani','Rubik',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.82); font-size:.9rem; padding:8px 12px; border-radius:7px; text-decoration:none; transition:.18s; } .jtc-blog .tb-nav a:hover,.jtc-blog .tb-nav a.is-current{ color:#fff; background:rgba(255,255,255,.1); } .jtc-blog .tb-nav a{ white-space:nowrap; } .jtc-blog .tb-phone{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.4em; font-weight:600; white-space:nowrap; flex:0 0 auto; } .jtc-blog .tb-phone-ic{ width:17px; height:17px; } /* Collapse to the hamburger BEFORE the nav can squash/wrap (matches lp.jt at 1540px). */ @media (max-width:1540px){ .jtc-blog .tb-nav,.jtc-blog .tb-phone{ display:none !important; } } .btn{ display:inline-flex; align-items:center; gap:.5em; border-radius:8px; font-family:'Rajdhani','Rubik',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:12px 20px; text-decoration:none; cursor:pointer; border:0; font-size:.94rem; transition:.18s; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:#e7161f; color:#fff; box-shadow:0 14px 34px -14px rgba(231,22,31,.5); } .btn-primary:hover{ transform:translateY(-1px); } .btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); } .btn-ghost:hover{ background:#f3f5f7; } .jtc-blog .topbar .wrap{ flex-wrap:nowrap; } .jtc-blog .brand-logo{ flex:0 0 auto; } .jtc-blog .tb-burger{ display:none; } @media (max-width:1540px){ .jtc-blog .topbar .btn-primary{ display:none; } .jtc-blog .tb-burger{ display:inline-flex; flex-direction:column; gap:4px; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer; } .jtc-blog .tb-burger i{ width:22px; height:2px; background:#fff; display:block; border-radius:2px; } } .jtc-blog .tb-mobnav{ display:none; } .jtc-blog .tb-mobnav.open{ display:flex; flex-direction:column; gap:4px; padding:14px 22px 20px; background:#15171a; } .jtc-blog .tb-mobnav a{ color:#fff; text-decoration:none; padding:10px 4px; font-family:'Rajdhani','Rubik',sans-serif; font-weight:600; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.08); } .jtc-blog .tb-mobnav .mob-cta{ margin-top:10px; justify-content:center; } .eyebrow{ color:var(--red); font-family:'Rajdhani','Rubik',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:.82rem; } /* HUB */ .hub-hero{ background:var(--bg-2); padding:clamp(46px,7vw,86px) 0 clamp(28px,4vw,44px); border-bottom:1px solid var(--line); } .hub-hero h1{ font-size:clamp(2rem,5vw,3.5rem); line-height:1.04; letter-spacing:-.01em; margin:.25em 0 .35em; max-width:16ch; } .hub-hero .lead{ color:var(--ink-soft); font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:65ch; line-height:1.65; } .hub-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; } .hub-list{ padding:clamp(34px,5vw,64px) 0 clamp(50px,7vw,90px); } .hub-cat-block{ margin-bottom:44px; } .hub-cat{ font-size:1.35rem; text-transform:uppercase; letter-spacing:.02em; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--red); display:inline-block; } .hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; } .hub-card{ display:flex; flex-direction:column; gap:8px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 0 rgba(20,24,30,.04); text-decoration:none; color:var(--ink); transition:.2s; } .hub-card:hover{ transform:translateY(-3px); box-shadow:0 24px 50px -30px rgba(20,24,30,.4); border-color:rgba(231,22,31,.4); } .hc-cat{ color:var(--red); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .hub-card b{ font-family:'Rajdhani','Rubik',sans-serif; font-size:1.24rem; line-height:1.15; } .hc-desc{ color:var(--ink-soft); font-size:.95rem; line-height:1.55; flex:1; } .hc-read{ color:var(--red); font-weight:600; font-size:.9rem; } /* POST */ .post{ padding-bottom:clamp(50px,7vw,90px); } .crumbs{ max-width:760px; margin:0 auto; padding:20px 22px 0; color:var(--ink-mute); font-size:.86rem; } .crumbs a{ color:var(--ink-soft); text-decoration:none; } .crumbs a:hover{ color:var(--red); } .crumbs span{ margin:0 2px; } .post-body{ padding-top:16px; } .post-cat{ margin:0 0 6px; } .post-body h1{ font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.06; letter-spacing:-.01em; margin:0 0 .3em; } .post-standfirst{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-soft); line-height:1.6; margin:0 0 18px; } .post-meta{ color:var(--ink-mute); font-size:.86rem; padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:26px; } .tldr{ background:var(--bg-2); border-left:4px solid var(--red); border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 26px; color:var(--ink-soft); line-height:1.6; } .tldr b{ color:var(--ink); } .keyfacts{ background:#1d1f22; color:#fff; border-radius:14px; padding:24px 26px; margin:0 0 30px; } .keyfacts .kf-h{ color:#fff; font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; } .keyfacts ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; } .keyfacts li{ position:relative; padding-left:26px; color:rgba(255,255,255,.9); line-height:1.5; font-size:.98rem; } .keyfacts li::before{ content:""; position:absolute; left:0; top:.35em; width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(29,185,84,.18); } .keyfacts a{ color:#ff9ea2; } .prose{ font-size:1.06rem; line-height:1.75; color:#2b3037; } .prose h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin:1.7em 0 .5em; scroll-margin-top:84px; } .prose h3{ font-size:1.22rem; margin:1.4em 0 .4em; } .prose p{ margin:0 0 1.1em; } .prose ul,.prose ol{ margin:0 0 1.2em; padding-left:1.3em; } .prose li{ margin:0 0 .5em; } .prose a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; } .prose strong{ color:var(--ink); } .prose code{ background:var(--bg-3); padding:.1em .4em; border-radius:5px; font-size:.9em; } .prose blockquote{ border-left:4px solid var(--red); background:var(--bg-2); margin:0 0 1.3em; padding:14px 20px; border-radius:0 10px 10px 0; color:var(--ink-soft); } .tbl-wrap{ overflow-x:auto; margin:0 0 1.4em; border:1px solid var(--line); border-radius:12px; } .prose table{ width:100%; border-collapse:collapse; font-size:.96rem; } .prose th{ background:#1d1f22; color:#fff; text-align:left; padding:12px 14px; font-family:'Rajdhani','Rubik',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:.86rem; } .prose td{ padding:11px 14px; border-top:1px solid var(--line); vertical-align:top; } .prose tr:nth-child(even) td{ background:var(--bg-2); } .post-faq{ max-width:760px; margin:44px auto 0; padding:0 22px; } .post-faq h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 16px; } .post-faq details{ border:1px solid var(--line); border-radius:10px; padding:2px 18px; margin-bottom:10px; background:#fff; } .post-faq summary{ cursor:pointer; font-weight:600; padding:15px 0; list-style:none; font-size:1.04rem; color:var(--ink); } .post-faq summary::-webkit-details-marker{ display:none; } .post-faq summary::after{ content:"+"; float:right; color:var(--red); font-size:1.3rem; line-height:1; } .post-faq details[open] summary::after{ content:"–"; } .post-faq details > div{ padding:0 0 16px; color:var(--ink-soft); line-height:1.65; } .post-faq details > div a{ color:var(--red); } .post-cta{ max-width:760px; margin:44px auto 0; padding:32px 26px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; text-align:center; } .post-cta h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 10px; } .post-cta p{ color:var(--ink-soft); max-width:56ch; margin:0 auto 20px; line-height:1.6; } .post-cta .btn{ margin:4px; } .post-related{ margin:52px auto 0; } .post-related h2{ font-size:1.4rem; margin:0 0 18px; } .rel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; } .rel-card{ display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); transition:.2s; } .rel-card:hover{ border-color:rgba(231,22,31,.4); transform:translateY(-2px); } .rel-cat{ color:var(--red); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; } .rel-card b{ font-family:'Rajdhani','Rubik',sans-serif; font-size:1.08rem; line-height:1.15; } .rel-desc{ color:var(--ink-soft); font-size:.86rem; line-height:1.45; } /* footer */ .jtc-footer{ background:#1d1f22; color:rgba(255,255,255,.7); padding:clamp(40px,6vw,64px) 0 clamp(28px,4vw,44px); text-align:center; } .jtc-footer a{ color:#fff; } .jtc-footer .disclaimer{ color:rgba(255,255,255,.45); font-size:.8rem; max-width:70ch; margin:16px auto 14px; line-height:1.55; } .foot-links{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; max-width:820px; margin:18px auto 0; } .foot-links a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:.85rem; } .foot-links a:hover{ color:#fff; } .built-by{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; text-decoration:none; font-size:.85rem; } .built-by img{ vertical-align:middle; } .mbar{ display:none; } @media (max-width:720px){ .mbar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); } .mbar .btn{ flex:1; justify-content:center; } .post,.hub-list{ padding-bottom:90px; } }