/* ========================================================================== OSNOVA THEME — shared design system Drop this file into your site (e.g. /assets/osnova-theme.css) and link it in the of every page: Then use the component classes below instead of per-page inline styles. Only edit the tokens in :root to rebrand the whole site at once. ========================================================================== */ /* ---------- 1. DESIGN TOKENS (edit these to rebrand everything) ---------- */ :root{ /* Brand — swap --brand for Osnova's real blue and the rest follows */ --brand:#1f6feb; --brand-deep:#0b4bc0; --gold:#e0a44a; /* warm accent for value / money */ --green:#1f9d6b; /* positive / "make money" */ --red:#d1495b; /* problem / "losing money" */ /* Ink & surfaces */ --ink:#0f1720; /* headings */ --ink-2:#33414f; /* body text */ --muted:#5f6b78; /* secondary text */ --line:#e5e9ee; /* borders */ --bg:#ffffff; /* page background */ --bg-2:#f6f8fa; /* alternating section background */ --bg-3:#0f1720; /* dark section background */ /* Shape & depth */ --radius:16px; --shadow:0 8px 30px rgba(15,23,32,.08); --shadow-lg:0 20px 60px rgba(15,23,32,.14); /* Layout */ --maxw:1120px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; } /* ---------- 2. BASE / RESET ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--font);color:var(--ink-2);background:var(--bg); line-height:1.6;-webkit-font-smoothing:antialiased; } h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em} h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800} h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800} h3{font-size:1.25rem;font-weight:700} p{margin:0 0 1em} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} /* ---------- 3. LAYOUT HELPERS ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} @media(max-width:600px){.wrap{padding:0 14px}} .section{padding:88px 0} .section--alt{background:var(--bg-2)} .section--dark{background:var(--bg-3);color:#c7d2dd} .section--dark h1,.section--dark h2,.section--dark h3{color:#fff} .center{text-align:center} .sub{max-width:660px;margin:0 auto 48px} .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)} .lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-2)} /* ---------- 4. BUTTONS ---------- */ .btn{display:inline-block;padding:15px 28px;border-radius:12px;font-weight:700;font-size:1rem; cursor:pointer;transition:.15s;border:0;text-decoration:none} .btn:hover{text-decoration:none} .btn-sm{padding:11px 18px;font-size:.92rem} .btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 24px rgba(31,111,235,.28)} .btn-primary:hover{background:var(--brand-deep);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--ink)} .btn-light{background:#fff;color:var(--ink)} /* ---------- 5. NAV (shared header) ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85); backdrop-filter:blur(10px);border-bottom:1px solid transparent; box-shadow:0 1px 0 rgba(199,219,242,.7), 0 18px 32px -26px rgba(15,23,32,.16); transition:box-shadow .3s ease, background .3s ease} .nav__inner{display:flex;align-items:center;justify-content:space-between;height:60px; max-width:var(--maxw);margin:0 auto;padding:0 24px} .logo{font-weight:800;font-size:1.35rem;color:var(--ink);letter-spacing:-.03em;text-decoration:none} .logo span{color:var(--brand)} .nav__links{display:flex;gap:26px;align-items:center} .nav__links a{color:var(--ink-2);font-weight:600;font-size:.95rem;text-decoration:none} .nav__links a:hover{color:var(--brand)} .nav__links a.btn{color:#fff} .nav__links a.btn:hover{color:#fff} .nav__links a.btn-ghost{color:var(--ink)} .nav__links a.btn-ghost:hover{color:var(--ink)} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px; width:32px;height:32px;background:none;border:none;cursor:pointer;flex:none;padding:0} .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px; transition:transform .2s ease,opacity .2s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:860px){ .nav-toggle{display:flex} .nav__links{position:absolute;top:100%;left:0;right:0;background:#fff; flex-direction:column;align-items:stretch;padding:18px 24px;gap:16px; border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(15,23,32,.1); transform:translateY(-8px);opacity:0;pointer-events:none; transition:transform .2s ease,opacity .2s ease} .nav__links.open{transform:translateY(0);opacity:1;pointer-events:auto} .nav__links .btn{align-self:flex-start} } /* ---------- 6. CARDS & GRIDS ---------- */ .grid{display:grid;gap:22px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr}} @media(max-width:820px){.grid-2{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.15s} .card--hover:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#d7e3f7} .card__ico{width:46px;height:46px;border-radius:12px;background:#eef4ff; display:grid;place-items:center;font-size:1.3rem;margin-bottom:16px} /* value pills (money framing) */ .pill{font-size:.82rem;font-weight:700;padding:6px 12px;border-radius:8px;display:inline-block} .pill--make{color:var(--green);background:#e9f7f0} .pill--save{color:var(--brand-deep);background:#eef4ff} .pill--gold{color:var(--gold);background:rgba(224,164,74,.14)} /* ---------- 7. FOOTER (shared) ---------- */ .footer{background:var(--ink);color:#8fa0ad;padding:44px 0;font-size:.9rem} .footer__inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; max-width:var(--maxw);margin:0 auto;padding:0 24px} .footer a{color:#c7d2dd} .footer .logo{color:#fff} /* ---------- 8. UTILITIES ---------- */ .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px} .mb-0{margin-bottom:0} .text-muted{color:var(--muted)} .text-brand{color:var(--brand)} /* ---------- 9. PROSE (blog / article / Blueprint body copy) ---------- */ .prose{max-width:760px;margin:0 auto;font-size:1.075rem;color:var(--ink-2)} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.4em} .prose p,.prose li{line-height:1.75} .prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em} .prose li{margin-bottom:.4em} .prose img{border-radius:12px;margin:1.5em 0} .prose blockquote{border-left:3px solid var(--brand);background:var(--bg-2); margin:1.5em 0;padding:14px 20px;border-radius:0 10px 10px 0;color:var(--ink)} .prose a{color:var(--brand-deep);text-decoration:underline} .prose code{background:var(--bg-2);border:1px solid var(--line);border-radius:6px; padding:2px 6px;font-size:.9em}