/* ========================================================================== 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; } /* 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; } 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) 88%, black 12%); 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: 24px; } .site-footer .wrap { padding-block: 16px; } /* 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; border: 0; box-shadow: 0 1px 0 rgba(0,0,0,.14), inset 0 8px 20px rgba(0,0,0,.12); } .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) */

/* 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); }