/* ============================================================================ Mangrove (MG-solo) shared brand stylesheet. Linked by every MG template (page, page-internal, overview-client, overview-internal) so the header and all components are defined ONCE. Internal vs client = which markup a template includes (e.g. .internal-banner), not a different stylesheet. Brand source of truth: ../../docs/brand/mangrove.md Fonts (Newsreader / DMSans) are loaded via a in each template's . ============================================================================ */ /* ../../docs/brand/tokens.css :root block — paste-in copy, keep in sync */ :root { --measure:38em; /* one reading measure for prose + callouts; tables/grids stay full width */ --mg-primary: #04404a; --mg-secondary: #00646b; --mg-primary-hover: #065a67; --mg-accent: #c71a43; --mg-accent-hover: #c11948; --mg-accent-dark: #a8153a; --mg-coral: #ff5942; --mg-lemon: #ffe959; --mg-rosewater: #ffe4d6; --mg-cream: #fff5eb; --mg-ink: #101515; --mg-text-secondary: #424242; --mg-muted: #666; --mg-border: #ccc; --mg-border-light: #b9c1c1; --mg-border-warm: #e0d6d0; --mg-bg: #ffffff; --mg-bg-body: #fbfbfb; --mg-bg-alt: #f0f2f2; --mg-teal-wash: #e3f3f3; --mg-internal-ground: #FEFDF8; /* internal pages only — very faint warm tint in the banner's yellow family (solid) */ --mg-font-heading: 'Newsreader', 'Trebuchet MS', Georgia, serif; --mg-font-body: 'DMSans', 'DM Sans', Helvetica, Arial, sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{font-family:var(--mg-font-body);max-width:1080px;margin:0 auto;padding:0 1.5rem 5rem;color:var(--mg-ink);background:var(--mg-bg-body);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* internal-only banner (internal variants include the markup; client pages don't) */ /* internal pages get a subtle tinted ground so they never read as the client version */ body.internal{background:var(--mg-internal-ground)} html:has(body.internal){background:var(--mg-internal-ground)} /* fill the viewport gutters behind the centered body */ /* sticky so the internal warning rides along on scroll, not just a one-time strip up top */ .internal-banner{position:sticky;top:0;z-index:50;background:#fdf3c4;color:#7a5c12;font:500 11px/1.4 var(--mg-font-body);letter-spacing:.09em;text-transform:uppercase;text-align:center;padding:.42rem 1rem;border-bottom:1px solid #efe1a0;margin:0 -1.5rem} /* header */ /* Top padding reserves the internal banner's height (~30px) PLUS a 1.5rem comfortable gap, so the logo lockup sits at the same height with or without the banner (no jump), and the banner never crowds the logos. Internal pages drop the reserved 30px because the banner itself fills it. */ header{padding:calc(1.5rem + 30px) 0 1.75rem;margin-bottom:2.5rem;border-bottom:1px solid var(--mg-border-warm)} .internal-banner+header{padding-top:1.5rem} .logo-bar{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem} .logo-bar img{height:26px;width:auto;display:block} .logo-bar .logo-sep{width:1px;height:22px;background:var(--mg-border-light)} .logo-bar .samplemark{font-family:var(--mg-font-body);font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--mg-primary);border:1px dashed var(--mg-border-light);border-radius:5px;padding:.22rem .55rem} .logo-bar .doc-date{margin-left:auto;font-size:.74rem;color:var(--mg-muted);letter-spacing:.01em;text-align:right;line-height:1.4} .logo-bar .doc-date .upd{display:block;font-size:.68rem;opacity:.75} /* signature Mangrove rainbow rule */ .rainbow{height:4px;border-radius:2px;margin:0 0 1.75rem;background:linear-gradient(90deg,#84f7e0,var(--mg-secondary) 30%,var(--mg-primary) 48%,var(--mg-accent) 72%,var(--mg-coral) 88%,var(--mg-lemon))} .eyebrow{font-family:var(--mg-font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-accent);margin:0 0 .7rem} /* project card — the client code + name presented as a proper lockup */ .project-card{display:flex;align-items:flex-start;gap:1rem;background:#eef6f5;border:1px solid #cfe8e6;border-left:0;border-right:0;border-radius:0;padding:.9rem 1.5rem;margin:1.5rem -1.5rem 0} .project-card .pc-code{flex:none;font-family:var(--mg-font-body);font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--mg-muted);background:transparent;border:1px solid #cfe8e6;border-radius:6px;padding:.4rem .55rem;line-height:1} .project-card .pc-client{font-family:var(--mg-font-heading);font-size:1.1rem;font-weight:600;color:var(--mg-ink);line-height:1.15} .project-card .pc-line{font-size:.8rem;color:var(--mg-muted);margin-top:.15rem} .project-card .pc-sample{margin-left:auto;font-size:.68rem;color:var(--mg-muted);opacity:.7;text-align:right;max-width:16rem;line-height:1.35} h1{font-family:var(--mg-font-heading);font-size:2.6rem;line-height:1.12;font-weight:400;letter-spacing:-.6px;margin:0 0 .6rem;color:var(--mg-ink)} p.sub{font-family:var(--mg-font-heading);font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.45;color:var(--mg-text-secondary);max-width:var(--measure);margin:0} /* sections */ section{margin:2.5rem 0} h2{font-family:var(--mg-font-heading);font-size:1.7rem;font-weight:400;letter-spacing:-.6px;line-height:1.2;margin:0 0 .9rem;color:var(--mg-primary);display:flex;align-items:center;gap:.65rem} h2::before{content:"";flex:none;width:1.6rem;height:3px;border-radius:2px;background:var(--mg-coral)} h3{font-family:var(--mg-font-heading);font-size:1.2rem;font-weight:500;letter-spacing:-.3px;margin:0 0 .45rem;color:var(--mg-ink)} p{margin:0 0 1.1rem;max-width:var(--measure)} a{color:var(--mg-secondary);text-decoration:underline;text-decoration-color:#bfe0dd;text-underline-offset:2px;font-weight:500} a:hover{color:var(--mg-primary);text-decoration-color:currentColor} strong{color:var(--mg-ink)} /* panels — white cards with a teal top accent */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:0 0 1.5rem} @media (max-width:600px){.two-col{grid-template-columns:1fr}} .panel{background:#fff;border:1px solid var(--mg-border-warm);border-top:3px solid var(--mg-primary);border-radius:10px;padding:1.35rem 1.6rem} .panel h3{color:var(--mg-primary)} .panel p:last-child{margin-bottom:0} /* callouts — warm (lemon) default, .cool (teal-wash) variant */ .callout{max-width:var(--measure);background:#fdf4cc;border-left:3px solid #eec53c;border-radius:0 10px 10px 0;padding:1.1rem 1.35rem;margin:0 0 1.5rem} .callout.cool{background:var(--mg-teal-wash);border-left-color:var(--mg-secondary)} .callout p:last-child{margin-bottom:0} /* Client-facing space link — every INTERNAL overview carries one near the top so the shareable client link is never buried. Points at the client token URL, not this internal page. */ /* Client-facing space link — plain linked text, right-aligned within the project-card bar. */ .project-card:has(.client-link){align-items:center} .project-card:has(.client-link) .pc-row{display:flex;align-items:flex-start;gap:1rem;flex:1;min-width:0} .client-link{margin-left:auto;flex:none;white-space:nowrap;font-family:var(--mg-font-body);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-primary);text-decoration:underline;text-decoration-color:#bfe0dd;text-underline-offset:3px} .client-link:hover{color:var(--mg-secondary);text-decoration-color:currentColor} .callout strong{color:#7a5c12} .callout.cool strong{color:var(--mg-primary)} /* checklist — teal square markers */ ul.checklist{list-style:none;padding:0;margin:0 0 1rem 1.5rem} ul.checklist li{position:relative;padding:.6rem 0 .6rem 1.6rem;border-bottom:1px solid var(--mg-border-warm)} ul.checklist li:last-child{border-bottom:none} ul.checklist li::before{content:"";position:absolute;left:0;top:.95rem;width:.55rem;height:.55rem;border-radius:2px;background:var(--mg-secondary)} footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--mg-border-warm);font-size:.82rem;color:var(--mg-muted)} footer::before{content:"";display:block;width:3rem;height:3px;border-radius:2px;margin-bottom:1rem;background:linear-gradient(90deg,var(--mg-primary),var(--mg-accent),var(--mg-coral))} /* ===== project-overview components (overview-client / overview-internal) ===== */ .meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:0 0 1rem} @media (max-width:640px){.meta{grid-template-columns:1fr}} .pm-card{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--mg-border-warm);border-top:3px solid var(--mg-primary);border-radius:10px;padding:1rem 1.15rem} .pm-card .avatar{flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--mg-teal-wash);border:1px solid #cfe8e6;display:flex;align-items:center;justify-content:center;font-family:var(--mg-font-heading);color:var(--mg-primary);font-size:1.1rem} .pm-card .pm-name{font-family:var(--mg-font-heading);font-size:1.05rem;font-weight:500;color:var(--mg-ink);line-height:1.2} .pm-card .pm-role{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mg-accent);margin:.15rem 0} .pm-card .pm-email a{font-size:.85rem} ul.team{list-style:none;padding:0;margin:0} ul.team li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .1rem;border-bottom:1px solid var(--mg-border-warm)} ul.team li:last-child{border-bottom:none} ul.team .role{color:var(--mg-muted);font-size:.85rem;white-space:nowrap} .links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem;margin:0 0 1rem} .link-tile{display:block;background:#fff;border:1px solid var(--mg-border-warm);border-radius:10px;padding:.85rem 1.05rem;text-decoration:none;color:var(--mg-ink);transition:box-shadow .2s ease,border-color .2s ease} .link-tile:hover{box-shadow:0 4px 12px rgba(4,64,74,.1);border-color:#cfe8e6;color:var(--mg-ink)} .link-tile .lt-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mg-muted);margin-bottom:.2rem} .link-tile .lt-name{font-weight:600;color:var(--mg-secondary)} table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1rem} th{text-align:left;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mg-muted);font-weight:600;padding:.5rem .6rem;border-bottom:2px solid var(--mg-border-warm)} td{padding:.6rem .6rem;border-bottom:1px solid var(--mg-border-warm);vertical-align:top} tr:last-child td{border-bottom:none} .field-hint{font-size:.82rem;color:var(--mg-muted);font-style:italic;margin:.2rem 0 0;max-width:var(--measure)}