:root { --blue:#0757c8; --navy:#071d3a; --red:#e31d2f; --ink:#101828; --muted:#667085; --line:#e4e9f0; --soft:#f4f7fb; --white:#fff; --shadow:0 18px 44px rgba(16,24,40,.09); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--white); font:16px/1.55 "DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } .site-width { width:min(1160px, calc(100% - 40px)); margin:auto; } .topbar { background:var(--navy); color:#d6e0ef; font-size:.82rem; } .topbar .site-width { min-height:37px; display:flex; align-items:center; gap:15px; } .topbar strong { color:#fff; letter-spacing:.05em; } header { background:rgba(255,255,255,.98); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; } .nav { min-height:76px; display:flex; align-items:center; gap:42px; } .logo { color:var(--navy); font-size:1.5rem; line-height:.8; font-weight:700; letter-spacing:.02em; } .logo span { color:var(--red); } .logo small { display:block; color:var(--red); font-size:.43rem; letter-spacing:.18em; margin-top:7px; } nav { display:flex; gap:24px; flex:1; font-size:.9rem; font-weight:700; } nav a:hover,.form-switch a { color:var(--blue); } .account { display:flex; align-items:center; gap:16px; font-size:.88rem; font-weight:600; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; border:1px solid var(--blue); border-radius:6px; padding:0 17px; background:var(--blue); color:#fff; font:700 .85rem "DM Sans",sans-serif; cursor:pointer; } .button:hover { background:#0648a7; } .button-outline { background:#fff; color:var(--blue); } .page-content { padding-top:56px; padding-bottom:70px; min-height:calc(100vh - 310px); } .page-heading { padding:54px 6%; background:var(--soft); border-left:5px solid var(--red); } .eyebrow { color:var(--red); text-transform:uppercase; font-weight:700; font-size:.72rem; letter-spacing:.12em; margin:0 0 9px; } h1,h2 { font-family:"Playfair Display",serif; line-height:1.12; } .page-heading h1,.dashboard-title h1 { font-size:clamp(2.1rem,5vw,3.6rem); max-width:680px; margin:0; } .page-heading > p:last-child,.dashboard-title > div > p:last-child { color:var(--muted); max-width:620px; margin:14px 0 0; } .section-header { display:flex; justify-content:space-between; align-items:end; margin:53px 0 20px; border-bottom:1px solid var(--line); padding-bottom:14px; } .section-header h2 { margin:0; font-size:1.65rem; } .section-header span,.article-meta,.hint { color:var(--muted); font-size:.8rem; } .article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .article-card { overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 2px 6px rgba(16,24,40,.03); } .article-card img,.image-placeholder { height:195px; width:100%; object-fit:cover; } .image-placeholder { display:grid; place-items:center; background:var(--navy); color:#fff; font-size:1.4rem; font-weight:bold; } .article-body { padding:18px; } .tag { color:var(--blue); text-transform:uppercase; font-size:.7rem; letter-spacing:.09em; font-weight:700; } .article-card h2 { font-size:1.38rem; margin:8px 0; } .article-card p { color:var(--muted); margin:0 0 16px; font-size:.9rem; } .empty-state { border:1px dashed #b6c1d0; padding:48px; text-align:center; background:var(--soft); } footer { background:var(--navy); color:#d6e0ef; } .footer-content { padding:34px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; } .footer-logo { color:#fff; } .footer-content p { max-width:330px; margin:0; font-size:.85rem; } .copyright { border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:14px; font-size:.75rem; }.auth-wrap { min-height:calc(100vh - 300px); display:grid; place-items:center; padding:60px 20px; background:var(--soft); }.auth-card,.publish-form { width:min(100%,510px); background:#fff; padding:38px; border:1px solid var(--line); box-shadow:var(--shadow); }.auth-card h1 { margin:0; font-size:2.2rem; }.form-intro { color:var(--muted); margin:8px 0 26px; } label { display:block; color:#344054; font-size:.85rem; font-weight:700; margin:15px 0; } input,textarea,select { width:100%; display:block; border:1px solid #ccd5e1; border-radius:5px; padding:11px; margin-top:6px; color:var(--ink); font:inherit; background:#fff; } textarea { resize:vertical; } input:focus,textarea:focus,select:focus { outline:3px solid rgba(7,87,200,.12); border-color:var(--blue); }.button-full { width:100%; margin-top:10px; }.form-switch { text-align:center; font-size:.88rem; margin:20px 0 0; }.alert { padding:10px 12px; font-size:.85rem; margin:16px 0; }.error { color:#a31222; background:#fff0f1; border-left:3px solid var(--red); }.success { color:#0c6b42; background:#ebfff5; border-left:3px solid #179b63; }.dashboard-title { display:flex; justify-content:space-between; align-items:center; gap:30px; padding-bottom:38px; border-bottom:1px solid var(--line); }.stat { min-width:150px; padding:20px; background:var(--navy); color:#fff; }.stat strong { display:block; font-size:2rem; }.stat span { color:#c2d2e5; font-size:.78rem; }.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.8fr); gap:38px; padding-top:35px; }.publish-form { width:100%; box-shadow:none; }.publish-form h2 { margin:0; }.dashboard-note { border-left:4px solid var(--red); padding:28px; background:var(--soft); align-self:start; }.dashboard-note h2 { font-size:1.6rem; margin:0; }.dashboard-note p:not(.eyebrow) { color:var(--muted); }.dashboard-note .button { margin-top:10px; }
@media (max-width:760px) { .site-width { width:min(100% - 28px,1160px); }.nav { gap:14px; min-height:70px; }.account span,nav { display:none; }.account { margin-left:auto; }.article-grid { grid-template-columns:1fr; }.dashboard-title,.dashboard-grid,.footer-content { grid-template-columns:1fr; display:grid; }.dashboard-title { align-items:start; }.stat { width:max-content; }.auth-card,.publish-form { padding:26px; }.page-content { padding-top:30px; }.page-heading { padding:36px 22px; } }