/* ============================ Verity Creative — Base CSS Paste into Page Code Injection (CSS) ============================ */ /* 1) Brand tokens — tweak these */ :root{ --brand:#0E6FFF; /* primary brand */ --accent:#16a34a; /* secondary accent */ --text:#111827; /* main text */ --muted:#6b7280; /* secondary text */ --bg:#ffffff; /* page bg */ --bg-alt:#f7f7f9; /* subtle section bg */ --radius:16px; /* global radius */ --shadow:0 8px 24px rgba(0,0,0,.08); } /* 2) Typography & base */ html{ box-sizing:border-box; scroll-behavior:smooth; } *,*::before,*::after{ box-sizing:inherit; } body{ margin:0; color:var(--text); background:var(--bg); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{ line-height:1.2; margin:0 0 .5em; font-weight:750; letter-spacing:-.01em; } h1{ font-size:clamp(32px,5vw,44px); } h2{ font-size:clamp(24px,3.5vw,32px); } h3{ font-size:clamp(18px,2.5vw,22px); } p{ margin:.75em 0; color:var(--text); } .lead{ font-size:clamp(18px,2.4vw,22px); color:#1f2937; } /* 3) Layout helpers */ .container{ width:min(1120px, 92%); margin-inline:auto; } .section{ padding:64px 0; } .section--alt{ background:var(--bg-alt); } .stack > * + *{ margin-top:var(--stack-gap, 16px); } /* 4) Buttons */ .btn{ --btn-bg:#111827; --btn-fg:#fff; --btn-bd:transparent; display:inline-flex; align-items:center; gap:.6em; padding:.8em 1.1em; border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg); border-radius:calc(var(--radius) - 4px); text-decoration:none; font-weight:600; transition:transform .06s ease, filter .2s ease, box-shadow .2s ease; } .btn:hover{ filter:brightness(1.05); box-shadow:var(--shadow); transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn--primary{ --btn-bg:var(--brand); } .btn--accent{ --btn-bg:var(--accent); } .btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:#e5e7eb; } .btn--full{ width:100%; justify-content:center; } /* 5) Cards */ .card{ background:#fff; border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } .card__body{ padding:20px; } .card__title{ font-size:20px; margin:0 0 .25em; } .card__meta{ color:var(--muted); font-size:14px; } /* 6) Grids */ .grid{ display:grid; gap:24px; } .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } @media (max-width: 900px){ .grid--3{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px){ .grid--2, .grid--3{ grid-template-columns:1fr; } } /* 7) Hero block */ .hero{ padding:80px 0; background:linear-gradient( to bottom right, rgba(14,111,255,.06), rgba(22,163,74,.04) ); border-radius:calc(var(--radius) + 8px); } .hero__kicker{ color:var(--brand); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:13px; } .hero__title{ margin:.25em 0 .4em; } .hero__subtitle{ color:#374151; max-width:60ch; } /* 8) Media: responsive images & video */ .img-cover{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .aspect-16x9{ position:relative; width:100%; padding-top:56.25%; overflow:hidden; border-radius:var(--radius); } .aspect-1x1{ position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:var(--radius); } .aspect-16x9 > iframe, .aspect-16x9 > img, .aspect-1x1 > img, .aspect-16x9 > video{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* 9) Links & lists */ a{ color:var(--brand); text-underline-offset:2px; } a:hover{ text-decoration:underline; } ul.checks{ list-style:none; padding-left:0; } ul.checks li{ padding-left:1.5em; position:relative; } ul.checks li::before{ content:"✓"; position:absolute; left:0; top:.15em; color:var(--accent); font-weight:800; } /* 10) Badges & chips */ .badge{ display:inline-block; font-size:12px; padding:.35em .6em; border-radius:999px; background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; } /* 11) Footer & muted text */ .muted{ color:var(--muted); } /* 12) Accessibility niceties */ :focus-visible{ outline:3px solid #a7f3d0; outline-offset:2px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* 13) Optional: subtle divider */ .hr{ height:1px; background:linear-gradient(90deg, transparent, #e5e7eb, transparent); border:0; } /* 14) Sticky CTA bar (use sparsely on mobile landers) */ .sticky-cta{ position:sticky; bottom:0; inset-inline:0; background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px); border-top:1px solid #eee; padding:12px; display:flex; gap:12px; justify-content:center; }