/* FixDesk full stylesheet v2 Tokens: --paper #F3F1EC --ink #1F2A24 --signal #3190b2 --wire #2E6E5E --line #D8D2C4 Dark mode via data-theme="dark" on */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;800&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap'); /* ── TOKENS ─────────────────────────────────────── */ :root{ --paper:#F3F1EC; --paper-raised:#FBFAF6; --ink:#1F2A24; --signal:#3190b2; --wire:#2E6E5E; --line:#D8D2C4; --muted:#6b7269; --body-mid:#4a544d; } [data-theme="dark"]{ --paper:#151C18; --paper-raised:#1E2820; --ink:#E8E4DC; --signal:#3190b2; --wire:#5BA88E; --line:#2E3A33; --muted:#8A9E93; --body-mid:#A8B5AE; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Source Serif 4',Georgia,serif; font-size:17px; line-height:1.65; transition:background .25s, color .25s; } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} } a{color:var(--wire);text-decoration:none;} a:hover{text-decoration:underline;} a:focus-visible,button:focus-visible{outline:2px solid #3190b2;outline-offset:3px;} .wrap{max-width:900px;margin:0 auto;padding:0 24px;} /* ── READING PROGRESS BAR ───────────────────────── */ #read-progress{ position:fixed;top:0;left:0; height:3px;width:0; background:#3190b2; z-index:999; transition:width .1s linear; } /* ── HEADER ─────────────────────────────────────── */ header.site{ border-bottom:2px solid var(--ink); background:var(--paper-raised); position:sticky;top:0;z-index:100; } .site-bar{ display:flex;align-items:center;justify-content:space-between; padding:16px 24px;max-width:900px;margin:0 auto;gap:12px; } .logo{ font-family:'Archivo Expanded',sans-serif; font-weight:800;font-size:21px;letter-spacing:-0.02em; color:var(--ink);display:flex;align-items:center;gap:6px; } .logo .dot{color:#3190b2;} .site-nav-wrap{display:flex;align-items:center;gap:18px;} nav.site-nav{display:flex;gap:20px;font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.04em;} nav.site-nav a{color:var(--ink);} nav.site-nav a:hover{color:#3190b2;} #theme-toggle{ font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em; border:1px solid var(--line);background:transparent;color:var(--muted); padding:5px 10px;cursor:pointer;border-radius:2px; transition:border-color .2s,color .2s; } #theme-toggle:hover{border-color:var(--ink);color:var(--ink);} /* ── HERO ───────────────────────────────────────── */ .hero{ border-bottom:1px solid var(--line); padding:60px 0 48px; position:relative;overflow:hidden; background: linear-gradient(135deg,rgba(46,110,94,.08) 0%,transparent 60%), linear-gradient(225deg,rgba(49,144,178,.07) 0%,transparent 60%), var(--paper); } .hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(circle,var(--wire) 1px,transparent 1px); background-size:28px 28px;opacity:.12;pointer-events:none;z-index:0; } .hero .wrap{position:relative;z-index:1;} .hero-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:12px; text-transform:uppercase;letter-spacing:.12em;color:var(--wire); margin-bottom:14px;display:flex;align-items:center;gap:8px; } .hero-eyebrow::before{content:"●";color:#3190b2;font-size:10px;} .hero h1{ font-family:'Archivo Expanded',sans-serif;font-weight:800; font-size:clamp(32px,5vw,52px);line-height:1.05; letter-spacing:-0.02em;margin:0 0 18px; } .hero p.lede{font-size:19px;max-width:60ch;color:var(--body-mid);margin:0 0 28px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} .btn{ font-family:'IBM Plex Mono',monospace;font-size:12px; text-transform:uppercase;letter-spacing:.06em; padding:12px 20px;border:2px solid var(--ink); display:inline-block;background:var(--ink);color:var(--paper); transition:background .2s,border-color .2s; } .btn:hover{background:#3190b2;border-color:#3190b2;text-decoration:none;color:var(--paper);} .btn.ghost{background:transparent;color:var(--ink);} .btn.ghost:hover{background:var(--ink);color:var(--paper);} /* ── CATEGORY FILTER ─────────────────────────────── */ .filter-bar{ display:flex;gap:8px;flex-wrap:wrap; margin:28px 0 0;padding-bottom:20px; border-bottom:1px solid var(--line); } .filter-btn{ font-family:'IBM Plex Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.05em; border:1px solid var(--line);background:transparent; color:var(--muted);padding:6px 14px;cursor:pointer;border-radius:2px; transition:all .18s; } .filter-btn:hover,.filter-btn.active{ background:var(--ink);color:var(--paper);border-color:var(--ink); } /* ── SECTION HEAD ───────────────────────────────── */ .section-head{ display:flex;align-items:baseline;justify-content:space-between; border-bottom:2px solid var(--ink);padding-bottom:10px;margin:40px 0 0; } .section-head h2{ font-family:'Archivo Expanded',sans-serif; font-weight:800;font-size:21px;margin:0;letter-spacing:-0.01em; } .section-head .count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);} /* ── TICKET LIST ─────────────────────────────────── */ .ticket-list{display:flex;flex-direction:column;} .ticket{ display:grid; grid-template-columns:72px 72px 1fr auto; gap:18px;align-items:start; padding:22px 0; border-bottom:1px solid var(--line); } .ticket-id{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:#3190b2;font-weight:600;padding-top:4px; } .ticket-thumb{ width:64px;height:64px;border-radius:6px;flex:none; display:flex;align-items:center;justify-content:center; font-size:28px;border:1px solid var(--line); } .ticket-thumb.phone{background:#EBF4F1;} .ticket-thumb.wifi{background:#FDF0E8;} .ticket-thumb.pc{background:#F0EDF7;} .ticket-thumb.bt{background:#E8F2EE;} [data-theme="dark"] .ticket-thumb.phone{background:#1A2E28;} [data-theme="dark"] .ticket-thumb.wifi{background:#2E2018;} [data-theme="dark"] .ticket-thumb.pc{background:#221E30;} [data-theme="dark"] .ticket-thumb.bt{background:#1A2A24;} .ticket h3{ font-family:'Archivo Expanded',sans-serif; font-size:18px;margin:0 0 6px;font-weight:600; } .ticket h3 a{color:var(--ink);} .ticket h3 a:hover{color:#3190b2;text-decoration:none;} .ticket p{margin:0;color:var(--body-mid);font-size:15px;} .ticket .meta{ display:flex;flex-direction:column;gap:4px;align-items:flex-end; font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted); text-align:right;white-space:nowrap;padding-top:4px; } .tag{ border:1px solid var(--wire);color:var(--wire); padding:2px 8px;border-radius:2px;font-size:10px; text-transform:uppercase;letter-spacing:.04em; } /* ── STATUS STRIP ───────────────────────────────── */ .status-strip{ display:flex;flex-wrap:wrap;gap:0; border:2px solid var(--ink);margin:28px 0 36px; font-family:'IBM Plex Mono',monospace; background:var(--paper-raised); } .status-strip .stat{ flex:1 1 140px;padding:14px 16px; border-right:1px solid var(--ink); } .status-strip .stat:last-child{border-right:none;} .status-strip .stat .k{ font-size:10px;text-transform:uppercase;letter-spacing:.08em; color:var(--muted);display:block;margin-bottom:4px; } .status-strip .stat .v{font-size:15px;font-weight:600;color:var(--ink);} .status-strip .stat .v.signal{color:#3190b2;} /* ── ARTICLE BODY ───────────────────────────────── */ article.post{padding:40px 0 60px;} .post-eyebrow{ font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--wire); text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px; } .post h1{ font-family:'Archivo Expanded',sans-serif; font-size:clamp(26px,4vw,40px);line-height:1.08; letter-spacing:-0.02em;margin:0 0 10px; } .post .byline{ font-family:'IBM Plex Mono',monospace;font-size:12px; color:var(--muted);margin:0 0 18px; text-transform:uppercase;letter-spacing:.04em; } .post .dek{font-size:18px;color:var(--body-mid);max-width:62ch;margin-bottom:0;} .post h2{ font-family:'Archivo Expanded',sans-serif;font-size:21px; margin:36px 0 14px;border-left:4px solid #3190b2;padding-left:12px; } .post h2[id]{scroll-margin-top:80px;} .post h3{font-family:'Archivo Expanded',sans-serif;font-size:17px;margin:24px 0 10px;} .post p{max-width:68ch;} .post ol,.post ul{max-width:66ch;padding-left:22px;} .post li{margin-bottom:8px;} .post code{ font-family:'IBM Plex Mono',monospace;background:var(--paper-raised); border:1px solid var(--line);padding:1px 6px;font-size:14px;border-radius:2px; } .callout{ background:var(--paper-raised);border-left:4px solid var(--wire); padding:16px 20px;margin:24px 0;font-size:15px;max-width:66ch; } .callout strong{color:var(--wire);} /* ── TABLE OF CONTENTS ──────────────────────────── */ .toc{ background:var(--paper-raised);border:1px solid var(--line); padding:18px 22px;margin:28px 0 36px;max-width:66ch; } .toc-title{ font-family:'IBM Plex Mono',monospace;font-size:11px; text-transform:uppercase;letter-spacing:.08em;color:var(--muted); margin-bottom:12px; } .toc ol{margin:0;padding-left:20px;} .toc li{margin-bottom:6px;font-size:15px;} .toc a{color:var(--body-mid);} .toc a:hover,.toc a.active{color:#3190b2;text-decoration:none;} /* ── RELATED ARTICLES ───────────────────────────── */ .related{ border-top:2px solid var(--ink); margin:48px 0 0;padding:28px 0 0; } .related-title{ font-family:'Archivo Expanded',sans-serif; font-weight:800;font-size:18px;margin:0 0 18px; } .related-list{ display:flex;flex-direction:column;gap:0; } .related-item{ display:flex;align-items:center;gap:14px; padding:14px 0;border-bottom:1px solid var(--line); font-size:15px; } .related-item .ri-icon{ font-size:22px;width:40px;height:40px;border-radius:4px; display:flex;align-items:center;justify-content:center; border:1px solid var(--line);flex:none; } .related-item .ri-icon.phone{background:#EBF4F1;} .related-item .ri-icon.wifi{background:#FDF0E8;} .related-item .ri-icon.pc{background:#F0EDF7;} .related-item .ri-icon.bt{background:#E8F2EE;} [data-theme="dark"] .related-item .ri-icon.phone{background:#1A2E28;} [data-theme="dark"] .related-item .ri-icon.wifi{background:#2E2018;} [data-theme="dark"] .related-item .ri-icon.pc{background:#221E30;} [data-theme="dark"] .related-item .ri-icon.bt{background:#1A2A24;} .related-item a{color:var(--ink);font-family:'Archivo Expanded',sans-serif;font-weight:600;font-size:15px;} .related-item a:hover{color:#3190b2;} .related-item .ri-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);} /* ── AUTHOR BOX ──────────────────────────────────── */ .author-box{ display:flex;gap:16px;align-items:flex-start; border:1px solid var(--line);background:var(--paper-raised); padding:18px 20px;margin:44px 0 0;max-width:66ch; } .author-box .avatar{ width:44px;height:44px;flex:none;border-radius:50%; background:var(--wire);color:var(--paper); display:flex;align-items:center;justify-content:center; font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:16px; } .author-box .name{font-family:'Archivo Expanded',sans-serif;font-weight:600;font-size:15px;margin-bottom:2px;} .author-box .bio{font-size:13px;color:var(--body-mid);margin:0;} /* ── STATIC PAGES ───────────────────────────────── */ .page{padding:40px 0 60px;} .page h1{font-family:'Archivo Expanded',sans-serif;font-size:34px;margin-bottom:16px;} .page h2{font-family:'Archivo Expanded',sans-serif;font-size:20px;margin:28px 0 10px;} .page p,.page li{max-width:68ch;} /* ── COOKIE BANNER ──────────────────────────────── */ #cookie-banner{ display:none; position:fixed;bottom:0;left:0;right:0;z-index:500; background:var(--ink);color:var(--paper); padding:16px 24px;gap:16px; align-items:center;justify-content:space-between; font-family:'IBM Plex Mono',monospace;font-size:13px;flex-wrap:wrap; border-top:2px solid #3190b2; } #cookie-banner p{margin:0;flex:1 1 400px;line-height:1.5;} #cookie-banner p a{color:#3190b2;} .cookie-btns{display:flex;gap:10px;} .cookie-btns button{ font-family:'IBM Plex Mono',monospace;font-size:12px;text-transform:uppercase; letter-spacing:.04em;padding:8px 16px;cursor:pointer;border:1px solid; } #cookie-accept{background:#3190b2;border-color:#3190b2;color:#fff;} #cookie-decline{background:transparent;border-color:var(--paper);color:var(--paper);} /* ── BACK TO TOP ─────────────────────────────────── */ #back-top{ position:fixed;bottom:28px;right:24px;z-index:400; width:42px;height:42px;border-radius:50%; background:var(--ink);color:var(--paper); border:2px solid var(--line);cursor:pointer; font-size:18px;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none; transition:opacity .25s,transform .25s; transform:translateY(8px); } #back-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);} #back-top:hover{background:#3190b2;border-color:#3190b2;} /* ── FOOTER ─────────────────────────────────────── */ footer.site{ border-top:2px solid var(--ink);margin-top:60px; padding:32px 0 40px; font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted); } footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;} footer.site a{color:var(--muted);} footer.site nav{display:flex;gap:16px;flex-wrap:wrap;} /* ── RESPONSIVE ─────────────────────────────────── */ @media(max-width:680px){ .ticket{grid-template-columns:48px 1fr;gap:10px;} .ticket-id{display:none;} .ticket .meta{flex-direction:row;align-items:center;} .site-bar{flex-direction:column;align-items:flex-start;gap:10px;} .site-nav-wrap{flex-wrap:wrap;} .hero h1{font-size:28px;} .hero p.lede{font-size:16px;} } /* Added for SEO/content upgrade */ .human-note,.faq-section{margin-top:34px;padding-top:8px} .faq-item{border-top:1px solid var(--line);padding:16px 0} .faq-item h3{font-size:1.05rem;margin:0 0 8px} .faq-item p{margin:0} .page{max-width:820px;padding-top:48px;padding-bottom:48px} .page h2{margin-top:32px} /* Visual redesign upgrade */ :root{ --sky:#0D6E93; --navy:#061A2F; --glow:#68D2F7; --soft:#EEF6FA; } [data-theme="dark"]{ --soft:#101D24; } body{ background:linear-gradient(180deg,#F4FAFD 0%,var(--paper) 420px); } .wrap{max-width:1220px;} header.site{ border-bottom:1px solid rgba(13,110,147,.14); background:rgba(251,250,246,.9); backdrop-filter:blur(18px); box-shadow:0 12px 34px rgba(6,26,47,.08); } [data-theme="dark"] header.site{background:rgba(21,28,24,.88);} .site-bar{max-width:1220px;padding:14px 24px;} .logo{ gap:10px;font-size:24px;letter-spacing:0;color:var(--navy); } [data-theme="dark"] .logo{color:var(--ink);} .logo i{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; color:#fff;background:linear-gradient(135deg,var(--sky),#3190b2); box-shadow:0 10px 24px rgba(13,110,147,.26); } .site-nav-wrap{gap:14px;} nav.site-nav{gap:8px;font-size:12px;letter-spacing:0;text-transform:none;} nav.site-nav a, #theme-toggle{ display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(13,110,147,.14); padding:9px 13px;border-radius:999px;background:#fff;color:#17324A; box-shadow:0 8px 22px rgba(6,26,47,.05); } [data-theme="dark"] nav.site-nav a, [data-theme="dark"] #theme-toggle{background:var(--paper-raised);color:var(--ink);border-color:var(--line);} nav.site-nav a:hover, #theme-toggle:hover{color:#fff;background:var(--sky);border-color:var(--sky);text-decoration:none;} #theme-toggle{font-size:12px;text-transform:none;letter-spacing:0;} .hero{ min-height:520px;display:flex;align-items:center;border-bottom:0;padding:88px 0 118px; background: linear-gradient(180deg,rgba(6,26,47,.08) 0%,rgba(244,250,253,1) 100%), linear-gradient(100deg,rgba(3,53,82,.92) 0%,rgba(13,110,147,.82) 52%,rgba(13,110,147,.28) 100%), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=80') center/cover; color:#fff; } .hero::before{display:none;} .hero::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px; background:linear-gradient(180deg,rgba(244,250,253,0),#F4FAFD 78%,var(--paper)); pointer-events:none; } .hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:58px;align-items:center;position:relative;z-index:1;} .hero-copy{max-width:760px;} .hero-eyebrow{color:#BFEFFF;font-weight:700;} .hero-eyebrow::before{content:"";width:10px;height:10px;border-radius:999px;background:#3190b2;box-shadow:0 0 0 6px rgba(49,144,178,.18);} .hero h1{font-size:clamp(42px,6vw,76px);letter-spacing:0;text-shadow:0 18px 42px rgba(0,0,0,.28);} .hero p.lede{font-size:21px;line-height:1.7;color:rgba(255,255,255,.9);max-width:68ch;} .hero-actions .btn{border:0;border-radius:999px;padding:14px 22px;background:#fff;color:#06213A;box-shadow:0 14px 34px rgba(0,0,0,.18);} .hero-actions .btn:hover{background:#3190b2;color:#fff;} .hero-actions .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(10px);} .hero-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .hero-panel-card{ min-height:132px;border:1px solid rgba(255,255,255,.28);border-radius:18px; background:rgba(5,34,58,.5);backdrop-filter:blur(14px);padding:24px; box-shadow:0 24px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;justify-content:space-between; } .hero-panel-card.primary{grid-column:1 / -1;min-height:150px;} .hero-panel-card span{font-family:'Archivo Expanded',sans-serif;font-size:56px;font-weight:800;line-height:1;} .hero-panel-card i{font-size:30px;color:#BFEFFF;} .hero-panel-card small{font-family:'IBM Plex Mono',monospace;font-weight:600;color:rgba(255,255,255,.86);} .section-head{border-bottom:0;margin-top:-42px;position:relative;z-index:2;} .section-head h2{font-size:30px;} .section-head .count{background:#fff;border:1px solid rgba(13,110,147,.14);border-radius:999px;padding:7px 12px;box-shadow:0 8px 20px rgba(6,26,47,.06);} .filter-bar{border:0;margin:22px 0 28px;padding:0;gap:10px;} .filter-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(13,110,147,.14);background:#fff;border-radius:999px;padding:10px 15px;color:#17324A;box-shadow:0 8px 22px rgba(6,26,47,.05);} .filter-btn:hover,.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px);} .ticket-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch;} .ticket{ display:flex;flex-direction:column;gap:0;padding:0;border:1px solid rgba(13,110,147,.16); background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 16px 42px rgba(6,26,47,.08); transition:transform .22s,box-shadow .22s,border-color .22s;position:relative; } .ticket:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(6,26,47,.14);border-color:rgba(13,110,147,.34);} .ticket::before{content:"";display:block;height:210px;background-size:cover;background-position:center;} .ticket[data-cat="pc"]::before{background-image:linear-gradient(180deg,rgba(6,26,47,0),rgba(6,26,47,.16)),url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=80');} .ticket[data-cat="phone"]::before{background-image:linear-gradient(180deg,rgba(6,26,47,0),rgba(6,26,47,.16)),url('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=900&q=80');} .ticket[data-cat="wifi"]::before{background-image:linear-gradient(180deg,rgba(6,26,47,0),rgba(6,26,47,.16)),url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=900&q=80');} .ticket[data-cat="bt"]::before{background-image:linear-gradient(180deg,rgba(6,26,47,0),rgba(6,26,47,.16)),url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=900&q=80');} .ticket-id{position:absolute;margin:14px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 10px;color:var(--sky);box-shadow:0 8px 18px rgba(6,26,47,.14);} .ticket-thumb{display:none;} .ticket > div:nth-of-type(3){padding:22px 28px 12px;flex:1;} .ticket h3{font-size:22px;line-height:1.28;margin-bottom:12px;} .ticket p{font-size:16px;line-height:1.58;color:#607089;} .ticket .meta{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid #E1EBF2;margin:8px 28px 24px;padding-top:16px;white-space:normal;} .tag{background:#EEF6FA;border:0;border-radius:999px;color:#082744;padding:6px 12px;font-weight:700;} .ticket .meta span:last-child::before{content:"\f017";font-family:"Font Awesome 6 Free";font-weight:400;margin-right:7px;color:var(--sky);} [data-theme="dark"] body{background:linear-gradient(180deg,#111F28 0%,var(--paper) 420px);} [data-theme="dark"] .hero::after{background:linear-gradient(180deg,rgba(21,28,24,0),var(--paper) 78%,var(--paper));} [data-theme="dark"] .section-head .count, [data-theme="dark"] .filter-btn, [data-theme="dark"] .ticket{background:var(--paper-raised);} [data-theme="dark"] .ticket p{color:var(--body-mid);} [data-theme="dark"] .ticket .meta{border-top-color:var(--line);} [data-theme="dark"] .tag{background:#162B34;color:#BFEFFF;} @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:34px;} .hero-panel{max-width:560px;} .ticket-list{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:680px){ .site-bar{align-items:stretch;} .site-nav-wrap{justify-content:space-between;} nav.site-nav{flex-wrap:wrap;} .hero{min-height:auto;padding:58px 0 92px;} .hero h1{font-size:34px;} .hero p.lede{font-size:17px;} .hero-panel{grid-template-columns:1fr;} .hero-panel-card.primary{grid-column:auto;} .ticket-list{grid-template-columns:1fr;} .ticket::before{height:190px;} .ticket > div:nth-of-type(3){padding:20px 22px 10px;} .ticket .meta{margin:8px 22px 22px;} } /* Hero refinement after preview */ .hero{ min-height:440px; padding:74px 0 92px; align-items:center; background: linear-gradient(180deg,rgba(6,26,47,.04) 0%,rgba(244,250,253,1) 100%), linear-gradient(100deg,rgba(3,53,82,.88) 0%,rgba(13,110,147,.72) 52%,rgba(13,110,147,.24) 100%), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=80') center/cover; } .hero-grid{ display:block; max-width:1220px; } .hero-copy{ max-width:780px; } .hero-eyebrow{ font-size:11px; letter-spacing:.09em; margin-bottom:12px; } .hero h1{ max-width:760px; font-size:clamp(34px,4.2vw,54px); line-height:1.12; margin-bottom:18px; } .hero p.lede{ max-width:680px; font-size:18px; line-height:1.72; } .hero-actions .btn{ padding:12px 20px; font-size:11px; } .hero-panel{ display:none; } .section-head{ margin-top:-28px; } @media(max-width:680px){ .hero{ padding:52px 0 76px; } .hero h1{ font-size:30px; line-height:1.18; } .hero p.lede{ font-size:16px; } } /* Blue theme override */ :root{ --signal:#3190b2; --hover:#026487; } [data-theme="dark"]{ --signal:#3190b2; --hover:#026487; } a:hover, nav.site-nav a:hover, .ticket h3 a:hover, .related-item a:hover, .toc a:hover, .toc a.active{ color:var(--hover); } .btn:hover, .hero-actions .btn:hover, .filter-btn:hover, .filter-btn.active, #theme-toggle:hover, nav.site-nav a:hover, #back-top:hover, .cookie-btns #cookie-accept:hover{ background:var(--hover); border-color:var(--hover); } .logo i{ background:linear-gradient(135deg,#3190b2,#026487); } .hero-eyebrow::before{ background:#3190b2; box-shadow:0 0 0 6px rgba(49,144,178,.18); } .tag{ color:#026487; } /* Hero left container refinement */ .hero-grid{ max-width:1180px; margin:0 auto; padding-left:28px; padding-right:28px; } .hero-copy{ max-width:690px; margin-left:0; text-align:left; } .hero h1{ max-width:690px; font-weight:600; font-size:clamp(32px,3.45vw,46px); line-height:1.16; text-align:left; } .hero p.lede{ max-width:620px; font-size:17px; line-height:1.72; text-align:left; } .hero-eyebrow, .hero-actions{ justify-content:flex-start; text-align:left; } @media(max-width:680px){ .hero-grid{ padding-left:22px; padding-right:22px; } .hero h1{ font-size:28px; line-height:1.2; } } /* Hero align with guides container */ .hero-grid{ max-width:1220px; width:100%; margin:0 auto; padding-left:24px; padding-right:24px; } .hero-copy{ margin-left:0; } .hero h1, .hero p.lede{ margin-left:0; } @media(min-width:1221px){ .hero-grid{ padding-left:24px; padding-right:24px; } } @media(max-width:680px){ .hero-grid{ padding-left:24px; padding-right:24px; } } /* Hero About button highlight */ .hero-actions .btn.ghost{ background:#026487; color:#fff; border:1px solid #026487; box-shadow:0 14px 34px rgba(2,100,135,.22); } .hero-actions .btn.ghost:hover{ background:#3190b2; border-color:#3190b2; color:#fff; } /* Readable hero eyebrow */ .hero-eyebrow{ display:inline-flex; width:auto; align-items:center; color:#fff; background:rgba(2,100,135,.74); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:8px 13px; font-size:12px; font-weight:700; letter-spacing:.06em; line-height:1; text-shadow:none; box-shadow:0 10px 26px rgba(2,100,135,.22); backdrop-filter:blur(10px); } .hero-eyebrow::before{ width:8px; height:8px; flex:0 0 8px; background:#8edaf2; box-shadow:none; } @media(max-width:680px){ .hero-eyebrow{ font-size:10px; line-height:1.35; border-radius:14px; } } /* Generated blog thumbnail assets */ .ticket::before{ display:none; } .ticket-image{ display:block; height:210px; overflow:hidden; background:#eef8fb; border-bottom:1px solid #d9eaf1; } .ticket-image img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .32s ease; } .ticket:hover .ticket-image img{ transform:scale(1.045); } .post-feature-image{ max-width:760px; margin:28px 0 34px; border:1px solid rgba(49,144,178,.18); border-radius:12px; overflow:hidden; box-shadow:0 18px 42px rgba(6,26,47,.08); background:#eef8fb; } .post-feature-image img{ display:block; width:100%; height:auto; } @media(max-width:680px){ .ticket-image{ height:190px; } .post-feature-image{ border-radius:10px; } } /* Article detail redesign */ .article-detail{ padding:0; } .article-hero{ position:relative; min-height:430px; display:flex; align-items:flex-end; background-size:cover; background-position:center; color:#fff; overflow:hidden; } .article-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(5,28,54,.92) 0%,rgba(5,28,54,.76) 48%,rgba(5,28,54,.28) 100%), linear-gradient(180deg,rgba(5,28,54,.12) 0%,rgba(5,28,54,.92) 100%); z-index:0; } .article-hero-inner{ position:relative; z-index:1; width:100%; padding-top:92px; padding-bottom:56px; } .article-hero-copy{ max-width:760px; } .article-hero .post-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:11px; line-height:1; letter-spacing:.04em; } .article-hero h1{ max-width:780px; margin:0 0 16px; color:#fff; font-size:clamp(34px,4.8vw,58px); line-height:1.08; font-weight:700; letter-spacing:0; text-shadow:0 18px 46px rgba(0,0,0,.28); } .article-hero .dek{ max-width:720px; margin:0 0 20px; color:rgba(255,255,255,.9); font-size:17px; line-height:1.7; } .article-hero .byline{ margin:0; color:rgba(255,255,255,.82); font-size:12px; letter-spacing:.02em; } .article-layout{ display:grid; grid-template-columns:minmax(0,760px) 240px; gap:56px; align-items:start; padding-top:54px; } .article-main{ min-width:0; } .article-main > p:first-of-type{ font-size:18px; line-height:1.8; color:#33465a; font-weight:600; } .article-main p, .article-main li{ color:#526579; font-size:16px; line-height:1.78; } .article-main h2{ margin:48px 0 16px; padding-top:26px; border-top:1px solid #dce8ef; border-left:0; padding-left:0; color:#132943; font-size:28px; line-height:1.2; } .article-main h3{ color:#132943; } .article-side{ position:sticky; top:98px; } .article-toc{ background:#f7fbfd; border:1px solid #d9eaf1; border-radius:6px; padding:18px 20px; box-shadow:0 10px 28px rgba(6,26,47,.04); } .article-toc .toc-title{ margin-bottom:12px; color:#132943; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; } .article-toc ol{ margin:0; padding:0; list-style:none; } .article-toc li{ margin:0 0 9px; line-height:1.35; } .article-toc a{ color:#526579; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; } .article-toc a:hover, .article-toc a.active{ color:#026487; text-decoration:none; } .article-main .status-strip{ margin:0 0 40px; border:1px solid #d9eaf1; border-radius:8px; overflow:hidden; box-shadow:0 12px 30px rgba(6,26,47,.05); } .article-main .status-strip .stat{ border-right:1px solid #d9eaf1; background:#f7fbfd; } .article-main .callout, .article-main .faq-item{ border-left:4px solid #3190b2; background:#f3f9fc; border-radius:6px; padding:18px 20px; } .article-main .post-feature-image{ display:none; } [data-theme="dark"] .article-main > p:first-of-type, [data-theme="dark"] .article-main h2, [data-theme="dark"] .article-main h3, [data-theme="dark"] .article-toc .toc-title{ color:var(--ink); } [data-theme="dark"] .article-main p, [data-theme="dark"] .article-main li, [data-theme="dark"] .article-toc a{ color:var(--body-mid); } [data-theme="dark"] .article-toc, [data-theme="dark"] .article-main .status-strip .stat, [data-theme="dark"] .article-main .callout, [data-theme="dark"] .article-main .faq-item{ background:var(--paper-raised); border-color:var(--line); } @media(max-width:980px){ .article-layout{ grid-template-columns:1fr; gap:30px; } .article-side{ display:none; } } @media(max-width:680px){ .article-hero{ min-height:390px; } .article-hero-inner{ padding-top:62px; padding-bottom:42px; } .article-hero h1{ font-size:32px; } .article-layout{ padding-top:36px; } .article-main h2{ font-size:24px; } } /* Article hero soft homepage gradient */ .article-hero{ min-height:430px; background-position:center; } .article-hero::before{ background: linear-gradient(180deg,rgba(6,26,47,.10) 0%,rgba(244,250,253,.96) 100%), linear-gradient(100deg,rgba(3,53,82,.82) 0%,rgba(49,144,178,.56) 52%,rgba(49,144,178,.18) 100%); } .article-hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:110px; background:linear-gradient(180deg,rgba(244,250,253,0),#F4FAFD 78%,var(--paper)); pointer-events:none; z-index:0; } .article-hero-inner{ padding-top:86px; padding-bottom:72px; } .article-hero .post-eyebrow{ background:rgba(2,100,135,.76); border-color:rgba(142,218,242,.38); box-shadow:0 10px 26px rgba(2,100,135,.22); } .article-hero h1{ max-width:780px; font-size:clamp(34px,4.15vw,52px); font-weight:650; text-shadow:0 14px 34px rgba(5,28,54,.30); } .article-hero .dek{ max-width:720px; color:rgba(255,255,255,.92); text-shadow:0 8px 24px rgba(5,28,54,.24); } .article-hero .byline{ color:rgba(255,255,255,.86); } [data-theme="dark"] .article-hero::after{ background:linear-gradient(180deg,rgba(21,28,24,0),var(--paper) 78%,var(--paper)); } @media(max-width:680px){ .article-hero{ min-height:380px; } .article-hero-inner{ padding-top:58px; padding-bottom:58px; } } /* Nav link contrast fix */ nav.site-nav a, .site-nav a:visited{ color:#17324A; } nav.site-nav a i{ color:inherit; } nav.site-nav a:hover, nav.site-nav a:focus-visible, nav.site-nav a.active{ background:#026487; border-color:#026487; color:#fff !important; text-decoration:none; } nav.site-nav a:hover i, nav.site-nav a:focus-visible i, nav.site-nav a.active i{ color:#fff !important; } [data-theme="dark"] nav.site-nav a, [data-theme="dark"] .site-nav a:visited{ color:var(--ink); } [data-theme="dark"] nav.site-nav a:hover, [data-theme="dark"] nav.site-nav a:focus-visible, [data-theme="dark"] nav.site-nav a.active{ background:#3190b2; border-color:#3190b2; color:#fff !important; }