/* ============================================================ Aquarc shared stylesheet v2.0 · 2026-08-02 Upload to: public_html/article.css Used by every article page and by insights.html. Change this one file and all pages update together. v1 -> v2: site header, wave hero, wide layout, editorial index list, site footer. Article pages are unaffected: body stays 760px unless a page opts in with . NOTE: comments are in English on purpose. The v1 file arrived on the server with mangled Chinese comments (encoding), which is harmless but unreadable. English avoids the problem. ============================================================ */ :root{ --navy:#03124E; /* Aquarc primary */ --teal:#00A5D7; /* accent, used sparingly */ --ink:#15181F; --muted:#6B7280; --rule:#E5E7EB; --tint:#F6F8FB; --measure:760px; /* reading width for articles */ --wide:1200px; /* container width for index pages */ } *{box-sizing:border-box;} body{ font-family:"Inter","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:17px;line-height:1.72;color:var(--ink); max-width:var(--measure);margin:0 auto;padding:40px 22px 80px; -webkit-font-smoothing:antialiased; } a{color:var(--navy);} a:hover{color:var(--teal);} /* ============================================================ WIDE MODE — opt in with Removes the reading-width cage so the hero can go full-bleed. ============================================================ */ body.wide{max-width:none;padding:0;} .wrap{max-width:var(--wide);margin:0 auto;padding:0 28px;} /* reading column for article pages running in wide mode: full-bleed header/footer, but the prose stays at --measure */ .reading{max-width:var(--measure);margin:0 auto;padding:44px 22px 80px;} /* ---- Site header (mirrors index.html) -------------------- */ .site-header{background:#fff;border-bottom:1px solid var(--rule);} .site-header .bar{ max-width:var(--wide);margin:0 auto;padding:14px 28px; display:flex;align-items:center;justify-content:space-between;gap:16px; } .site-header .logo{display:flex;align-items:center;gap:10px;text-decoration:none;} .site-header .logo-mark{ width:50px;height:50px;border-radius:4px;background:#fff;overflow:hidden; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 10px rgba(15,23,42,.18); } .site-header .logo-mark img{width:100%;height:100%;object-fit:contain;} .site-header .logo-text-main{font-weight:700;letter-spacing:.02em;font-size:18px;color:#000;} .site-header .logo-text-sub{font-size:12px;color:#000;text-transform:uppercase;letter-spacing:.16em;} .site-nav{display:flex;gap:32px;align-items:center;font-size:14px;} .site-nav a{color:#000;text-decoration:none;padding:4px 0;transition:color .18s ease;} .site-nav a:hover{color:var(--teal);} .site-nav a[aria-current="page"]{font-weight:650;box-shadow:inset 0 -2px 0 var(--teal);} /* ---- Wave hero ------------------------------------------- k1.png runs dark navy at the top to white at the bottom, so copy sits on the white band and stays fully legible. --------------------------------------------------------- */ .page-hero{ background-image:url("https://aquarc.com/pictures/k1.png"); /* 100% 100% (not cover) so the whole dark-to-white range is always visible, whatever the viewport height. The wave is abstract, so the vertical squeeze is invisible; cover would crop the navy band away. */ background-size:100% 100%;background-position:center top;background-repeat:no-repeat; padding:200px 0 12px; } .page-hero .crumb{margin-bottom:1.1em;} .page-hero h1{font-size:3.4rem;margin-bottom:.28em;} .page-hero .standfirst{max-width:none;margin-bottom:0;font-size:1.18rem;} /* ---- Editorial index list (works without images) --------- */ .entries{list-style:none;padding:0;margin:0 0 12px;} .entry{ display:grid;grid-template-columns:190px 1fr;gap:36px; padding:2.1em 0;border-bottom:1px solid var(--rule); transition:background .18s ease; } .entry:hover{background:var(--tint);} .entry .rail{padding-top:.25em;} .entry .date{color:var(--muted);font-size:.82rem;letter-spacing:.03em;display:block;margin-bottom:.6em;} .entry .tag{ display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; font-weight:650;color:var(--navy);background:rgba(0,165,215,.11); border-radius:3px;padding:.32em .62em; } .entry h2{font-size:1.6rem;line-height:1.26;letter-spacing:-.014em;margin:0 0 .38em;font-weight:650;} .entry h2 a{text-decoration:none;} .entry h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;} .entry .dek{color:#444;margin:0;font-size:1.02rem;} /* first entry carries extra weight, in place of a hero image */ .entry.lead{border-top:2px solid var(--navy);} .entry.lead h2{font-size:2.05rem;} .entry.lead .dek{font-size:1.1rem;color:#333;} /* ---- Site footer ----------------------------------------- */ .site-footer{ background:var(--navy);color:rgba(255,255,255,.72); margin-top:4em;padding:44px 0 40px;font-size:.9rem; } .site-footer .wrap{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;} .site-footer a{color:#fff;text-decoration:none;} .site-footer a:hover{color:var(--teal);} .site-footer .blurb{max-width:52ch;line-height:1.62;} .site-footer .blurb strong{color:#fff;} .site-footer .legal{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:1.2em;} .site-footer .flinks{display:flex;flex-direction:column;gap:.55em;} /* ============================================================ ARTICLE PAGE COMPONENTS (unchanged from v1) ============================================================ */ .crumb{font-size:.82rem;color:var(--muted);margin-bottom:2.4em;letter-spacing:.01em;} .crumb a{color:var(--muted);text-decoration:none;} .crumb a:hover{text-decoration:underline;} h1{font-size:2.6rem;line-height:1.14;letter-spacing:-.022em;font-weight:700;margin:0 0 .28em;} h2{font-size:1.42rem;line-height:1.3;letter-spacing:-.012em;font-weight:650;margin:2.6em 0 .5em;scroll-margin-top:24px;} h3{font-size:1.08rem;font-weight:650;margin:1.9em 0 .35em;} p{margin:1.05em 0;} .byline{color:var(--muted);font-size:.9rem;margin-bottom:1.8em;} .byline strong{color:var(--ink);font-weight:600;} /* direct answer box — the block AI quotes most often */ .answer{ border-left:3px solid var(--navy);background:var(--tint); padding:1.15em 1.35em;margin:2em 0 2.4em;border-radius:0 6px 6px 0; } .answer p{margin:0;font-size:1.12rem;line-height:1.62;} .answer p + p{margin-top:.7em;} /* table of contents */ .toc{border:1px solid var(--rule);border-radius:8px;padding:1.1em 1.35em;margin:2.4em 0;} .toc h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 .6em;font-weight:600;} .toc ol{margin:0;padding-left:1.25em;} .toc li{margin:.32em 0;font-size:.95rem;} .toc a{text-decoration:none;} .toc a:hover{text-decoration:underline;} /* data table — the structure AI extracts most readily */ .stages{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.94rem;} .stages th,.stages td{text-align:left;padding:.72em .8em;border-bottom:1px solid var(--rule);vertical-align:top;} .stages thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;border-bottom:none;} .stages tbody tr:nth-child(even){background:var(--tint);} .tablewrap{overflow-x:auto;} /* conditional block: who it's for / not for / when to move on */ .fit{border:1px solid var(--rule);border-radius:8px;padding:1.3em 1.45em;margin:2.2em 0;} .fit h3{margin-top:0;font-size:1rem;} .fit ul{padding-left:1.15em;margin:.5em 0 1.2em;} .fit li{margin:.34em 0;} .fit .move-on{border-top:1px solid var(--rule);padding-top:1.1em;margin-top:.4em;} .fit .move-on h3{color:var(--navy);} /* evidence block: context - problem - method - finding - result */ .evidence{background:var(--tint);border-radius:8px;padding:1.3em 1.45em;margin:2.2em 0;} .evidence h3{margin-top:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);} .evidence dl{margin:0;} .evidence dt{font-weight:650;margin-top:.9em;font-size:.94rem;} .evidence dd{margin:.15em 0 0;padding:0;color:#333;} /* highlighted formula / key figure */ .formula{background:var(--navy);color:#fff;border-radius:8px;padding:1.1em 1.35em;margin:1.6em 0;font-size:1.02rem;line-height:1.5;} .formula strong{color:var(--teal);} figure{margin:2.2em 0;} figure img{max-width:100%;height:auto;border-radius:8px;display:block;} figcaption{color:var(--muted);font-size:.87rem;margin-top:.6em;} .num{font-weight:650;color:var(--navy);} .stat{font-weight:650;} .note{font-size:.87rem;color:var(--muted);} .faq h3{font-size:1.04rem;margin-top:1.7em;} .faq h3 + p{margin-top:.35em;} /* next step — editorial, deliberately not a sales button */ .next{border-top:2px solid var(--navy);padding-top:1.25em;margin:3.2em 0 0;} .next h2{margin-top:0;font-size:1.1rem;} .next p{margin:.5em 0;} .related{margin-top:2.8em;padding-top:1.4em;border-top:1px solid var(--rule);} .related h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 .7em;font-weight:600;} .related ul{padding-left:1.15em;margin:0;} .related li{margin:.4em 0;} /* in-article footer used by the article pages (narrow body) */ body:not(.wide) footer{margin-top:2.8em;padding-top:1.4em;border-top:1px solid var(--rule);color:var(--muted);font-size:.89rem;} .standfirst{font-size:1.12rem;color:#333;margin-bottom:2.8em;line-height:1.62;} /* legacy index list from v1 — kept so nothing breaks mid-migration */ .list{list-style:none;padding:0;margin:0;} .list li{padding:1.6em 0;border-bottom:1px solid var(--rule);} .list li:first-child{padding-top:0;} .list h2{font-size:1.28rem;line-height:1.32;letter-spacing:-.01em;margin:0 0 .35em;font-weight:650;} .list h2 a{text-decoration:none;} .list h2 a:hover{text-decoration:underline;} .meta{color:var(--muted);font-size:.82rem;margin:0 0 .5em;letter-spacing:.02em;} .dek{color:#444;margin:0;} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ .entry{grid-template-columns:1fr;gap:.5em;} .entry .rail{display:flex;align-items:center;gap:12px;padding-top:0;} .entry .date{margin-bottom:0;} .page-hero{padding-top:130px;} .page-hero h1{font-size:2.5rem;} } @media(max-width:600px){ body{font-size:16px;padding:28px 18px 60px;} body.wide{padding:0;} .wrap{padding:0 18px;} h1{font-size:2rem;} h2{font-size:1.25rem;} .page-hero{padding:96px 0 6px;} .page-hero h1{font-size:2.1rem;} .entry h2{font-size:1.24rem;} .entry.lead h2{font-size:1.44rem;} .site-header .bar{padding:12px 18px;} .site-header .logo-text-sub{display:none;} .site-nav{gap:16px;font-size:13px;flex-wrap:wrap;justify-content:flex-end;} .site-footer .wrap{flex-direction:column;} }