/* ========================================================================== 4Development �?? CLEAN BASE (dark by default) - One set of tokens (no light override) - Minimal, predictable layout rules - No page-wide overrides outside these classes ========================================================================== */ /* Tokens �?? dark locked */ html, :root { color-scheme: dark; --bg: #0b0f17; --fg: #e8ecf2; --muted: #9aa3b2; --card: #111827; --acc: #a3e635; /* lime */ --wrap: 1100px; --gap: 14px; --radius:16px; --btn-radius:999px; --btn-primary-bg:var(--acc); --btn-primary-fg:var(--cta-text-dark); --btn-primary-border:transparent; --btn-ghost-bg:transparent; --btn-ghost-fg:var(--fg); --btn-ghost-border:color-mix(in oklab, var(--fg) 25%, transparent); --btn-primary-bg-hover:color-mix(in oklab, var(--acc) 88%, white 12%); --btn-primary-border-hover:color-mix(in oklab, var(--acc) 45%, transparent); --btn-ghost-bg-hover:color-mix(in oklab, var(--bg) 90%, var(--fg) 10%); --btn-ghost-border-hover:color-mix(in oklab, var(--fg) 40%, transparent); --header-tint: rgba(255, 244, 225, 0.08); } /* Base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: scroll; } img { max-width: 100%; height: auto; display: block; } /* Helpers */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 18px; } .muted { color: var(--muted); } .small { font-size: 12px; color: var(--muted); } .lede { color: var(--muted); margin: 4px 0 14px; } /* Headings */ h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 0 0 10px; } h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0 0 8px; } h3 { font-size: clamp(18px, 2.2vw, 20px); line-height: 1.3; margin: 0 0 6px; } /* Header / Nav (simple, stable) */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--bg) 82%, var(--header-tint) 18%); border-bottom: 1px solid #1c2432; } .header-row { display: flex; align-items: center; justify-content: space-between; padding-block: 10px; } .brand { font-weight: 800; text-decoration: none; color: var(--fg); } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } .nav-links a { display: inline-block; color: var(--fg); text-decoration: none; padding: 10px 12px; border-radius: 10px; } .nav-links a:hover { background: #0e1624; } /* Footer */
.site-footer { border-top: 1px solid #1c2432; margin-top: 28px; background: color-mix(in oklab, var(--bg) 86%, black 14%); }
.site-footer .wrap { max-width: var(--wrap); margin-inline: auto; padding: 22px 18px; }
.site-footer a { color: var(--fg); text-decoration: none; }
.site-footer a:hover { color: var(--acc); }
.footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-legal .legal-name { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-links a { color: var(--fg); text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: var(--acc); }
.footer-contact .small { margin: 0 0 4px; }
.footer-contact a { color: var(--fg); text-decoration: none; font-weight: 700; }
@media (max-width: 600px) { .footer-grid { flex-direction: column; align-items: flex-start; } }
/* Cards & grids */ .card { background: var(--card); border: 1px solid #22304644; border-radius: var(--radius); padding: 16px; } .cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 16px 0 24px; align-items: stretch; } .grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } /* CTAs */ .cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 800; } .cta:hover { filter: saturate(1.05); } .cta:active { transform: translateY(1px); } .cta-primary { background: var(--acc); color: #0a0a0a !important; border: 0; box-shadow: 0 1px 0 rgba(0,0,0,.14), inset 0 8px 20px rgba(0,0,0,.12); } .cta-primary:hover, .cta-primary:visited, .cta-primary:focus, .cta-primary:focus-visible { color: #0a0a0a !important; } .cta-secondary { background: transparent; color: var(--fg); border: 1px solid #22304688; } /* Notices */ .notice { background: #0f172a; color: var(--fg); border: 1px solid #22304666; border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; } .notice.success { border-color: #16a34a55; background: #0d2014; } .notice.error { border-color: #f59e0b55; background: #241a0a; } /* Forms */ .contact-form .field { display: block; margin: 12px 0; } .contact-form label, .field-label { display: block; font-weight: 700; margin-bottom: 6px; } .field-input, .field-textarea, .contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #22304688; background: transparent; color: var(--fg); outline: none; } .field-input:focus, .field-textarea:focus, .contact-form input:focus, .contact-form textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 25%, transparent); } /* Badges (simple pill; reliable everywhere) */ .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #3b3b3b; color: #fff; } .badge-lime { background: var(--acc); color: #0a0a0a; } /* Pricing plans �?? equal height + bottom-aligned actions */ .plan { position: relative; display: flex; /* equal heights within grid */ flex-direction: column; min-height: 420px; /* nudge if you add more copy */ } .plan .plan-actions { margin-top: auto; } .plan .price { font-size: 32px; font-weight: 800; margin: 8px 0 10px; } .plan .price .per { font-size: 14px; font-weight: 600; opacity: .8; margin-left: 4px; } .plan .plan-list { list-style: none; margin: 10px 0 14px; padding: 0; } .plan .plan-list li { margin: 6px 0; } /* Optional: one-line clamp for short teasers under h3 */ .one-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } /* Images/cards in Clients page (safe defaults) */ .thumb { border-radius: 12px; overflow: hidden; border: 1px solid #22304644; } .thumb img { display:block; width:100%; height:auto; } /* Accessibility focus outline */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in oklab, var(--acc) 35%, transparent); outline-offset: 2px; } /* Tiny utilities */ .hr { border: 0; height: 1px; background: #1c2432; margin: 16px 0; } /* --- NAV RESTORE (desktop + simple mobile) ------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, black 12%); border-bottom: 1px solid #1c2432; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; } .brand { font-weight: 800; text-decoration: none; color: var(--fg); } .nav-links{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .nav-links a{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--fg); border:1px solid transparent; } .nav-links a:hover{ background:#0e1624; border-color:#22304666; } /* active/current page �?? supports either a class or aria-current */ .nav-links a.active, .nav-links a[aria-current="page"]{ background:#0e1624; border-color:#22304688; font-weight:800; } /* mobile: keep row layout (wrap if needed) */ @media (max-width:720px){ .nav-links{ gap:8px; } .nav-links a{ padding:8px 10px; } } /* Nav list reset + roles */ #primaryNav .nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; /* <-- horizontal + wrap */ } #primaryNav .nav-list li{ margin:0; } /* mobile: still horizontal; allow wrapping */ @media (max-width:720px){ #primaryNav .nav-list{ flex-direction:row; flex-wrap:wrap; gap:8px; } }
/* (removed duplicate nav-list overrides) */

/* Two-row nav: main (external) + blog (Ghost) */
.nav-main .nav-links{ justify-content:flex-end; flex-wrap:wrap; }
.nav-secondary-wrap{ justify-content:center; padding-bottom:8px; }
.nav-secondary{ width:100%; }
.nav-secondary .nav-links{ justify-content:center; flex-wrap:wrap; gap:10px; }
.nav-secondary .nav-links a{ padding:8px 12px; }
@media (max-width:720px){
  .nav-main .nav-links{ justify-content:flex-start; }
}

.header-utility {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
.header-utility .sep { color: var(--muted); }
.header-utility a { color: var(--fg); text-decoration: none; }
.header-utility a:hover { color: var(--acc); }

@media (max-width: 720px) {
  .header-row { flex-wrap: wrap; align-items: center; }
  .nav-main { order: 2; width: 100%; }
  .nav-main .nav-links { gap: 8px; }
  .header-utility { order: 3; width: 100%; justify-content: flex-start; margin-top: 6px; }
  .header-utility .sep { display: none; }
  .nav-secondary-wrap { order: 4; width: 100%; }
}

/* Skip link for keyboard users */
.skip-link { position: absolute; left: -9999px; top: auto; width: auto; height: auto; overflow: hidden; background: #0f172a; color: var(--fg); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; z-index: 1000; outline: 3px solid color-mix(in oklab, var(--acc) 35%, transparent); }

/* Global link styling (align cards with footer/nav) */
.site-main a:not(.cta) { color: var(--fg); text-decoration: none; }
.site-main a:not(.cta):hover { color: var(--acc); text-decoration: underline; }

/* Cards: avoid underlining the entire card on hover */
.gh-card-link,
.gh-card-link:hover,
.gh-card-link:focus {
  text-decoration: none !important;
}
.gh-card-link:hover .gh-card-title,
.gh-card-link:focus .gh-card-title {
  color: var(--acc);
  text-decoration: none !important;
}
.gh-topic-grid .gh-card-link:hover,
.gh-topic-grid .gh-card-link:focus {
  text-decoration: none !important;
}
.gh-topic-grid .gh-card-link:hover .gh-card-title,
.gh-topic-grid .gh-card-link:focus .gh-card-title {
  text-decoration: none !important;
  color: var(--acc);
}
.gh-topic-grid .gh-card-link:hover .gh-card-excerpt,
.gh-topic-grid .gh-card-link:focus .gh-card-excerpt {
  text-decoration: none !important;
}
.gh-card:hover .gh-card-title {
  text-decoration: none !important;
}

/* Card list spacing */
.card ul { margin: 8px 0 0; padding-left: 18px; }
.card ul li { margin: 6px 0; }




/* Unified button styles */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--btn-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Primary green pill */
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}

/* Hover / focus for primary */
.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
  text-decoration: none;
}

/* Ghost / outline variant */
.btn-ghost,
a.btn-ghost,
button.btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
}

/* Hover / focus for ghost */
.btn-ghost:hover,
.btn-ghost:focus-visible,
a.btn-ghost:hover,
a.btn-ghost:focus-visible,
button.btn-ghost:hover,
button.btn-ghost:focus-visible {
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
  text-decoration: none;
}

/* Ensure featured cards show their cover image */
.gh-topic-grid .gh-card.featured.large .gh-card-link {
  position: relative;
  overflow: hidden;
}
.gh-topic-grid .gh-card.featured.large .gh-card-image {
  z-index: 0;
  opacity: 1;
}
.gh-topic-grid .gh-card.featured.large .gh-card-image img {
  opacity: 1;
}

/* Ghost editor width helpers (required) */
.kg-width-wide {
  max-width: min(1200px, 96vw);
  margin-inline: auto;
}
.kg-width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}