/* Multi‑accent theme from your palette Colors: c1=#FCC737 c2=#F26B0F c3=#E73879 c4=#7E1891 Usage: save as style.css (or style-fun.css) and link in : */ :root{ --bg: #fce2f4; --text: #111111; --muted: #666666; /* palette */ --c1: #FCC737; --c2: #F26B0F; --c3: #E73879; --c4: #7E1891; --c1-hover: #CEA32D; --c2-hover: #C6570C; --c3-hover: #BD2D63; --c4-hover: #671376; /* roles */ --accent: var(--c4); /* primary (links/buttons) */ --accent-2: var(--c3); /* secondary badges/buttons */ --accent-3: var(--c2); /* callouts */ --accent-4: var(--c1); /* highlights */ --accent-contrast: #ffffff; /* text on dark accents */ --accent-contrast-dark: #111111;/* text on light accents (c1) */ --mw: 900px; --space: 16px; --radius: 10px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.2;margin:0 0 .5em} p,ul,ol{margin:0 0 1em} .wrap{max-width:var(--mw);margin:0 auto;padding:var(--space)} main.wrap{padding-top:calc(var(--space)*1.5)} /* Header nav example */ #site-nav{display:flex;flex-wrap:wrap;gap:12px;padding:var(--space) var(--space) 0;max-width:var(--mw);margin:0 auto} #site-nav a{padding:4px 10px;border-radius:var(--radius)} #site-nav a.active{background:var(--accent);color:var(--accent-contrast)} /* Buttons */ .btn{display:inline-block;padding:10px 14px;border-radius:var(--radius)} .btn-1{background:var(--c4);color:var(--accent-contrast)} .btn-1:hover{background:var(--c4-hover)} .btn-2{background:var(--c3);color:var(--accent-contrast)} .btn-2:hover{background:var(--c3-hover)} .btn-3{background:var(--c2);color:var(--accent-contrast)} .btn-3:hover{background:var(--c2-hover)} .btn-4{background:var(--c1);color:var(--accent-contrast-dark)} .btn-4:hover{background:var(--c1-hover)} /* Chips/Badges */ .badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px} .badge-1{background:var(--c4);color:var(--accent-contrast)} .badge-2{background:var(--c3);color:var(--accent-contrast)} .badge-3{background:var(--c2);color:var(--accent-contrast)} .badge-4{background:var(--c1);color:var(--accent-contrast-dark)} /* Cards */ .card{border:1px solid #eee;border-radius:var(--radius);padding:var(--space)} .card h3{margin-top:0} /* Accent separators */ .rule-1{height:4px;background:linear-gradient(90deg,var(--c4),var(--c3))} .rule-2{height:4px;background:linear-gradient(90deg,var(--c2),var(--c1))}