/* XCurio Academy – brand tokens Colours sampled from the official logo (xcurio_logo_horizontal_transparent.png). Fonts (Fredoka + Nunito) are loaded with tags in each page's . */ :root { /* Brand colours – text, buttons, logo */ --xc-navy: #1F316A; /* logo wordmark – headings, nav, body text */ --xc-navy-deep: #17244F; /* footer background */ --xc-blue: #2B53B2; /* logo "X" – links, accents */ --xc-sky: #7EC6EA; /* logo "X" highlight – decoration only */ --xc-orange: #F08A3E; /* call-to-action buttons (navy text on it: 4.9:1) */ --xc-orange-deep: #E57B37; /* logo "C" – decoration only, never behind text */ --xc-gold: #F2B258; /* logo "C" highlight – button gradient end */ --xc-text-muted: #46557F; /* secondary text (7.3:1 on white) */ /* Backgrounds */ --xc-white: #FFFFFF; --xc-cream: #FFF9F2; --xc-blue-tint: #EEF5FD; /* hero banner, cards */ --xc-orange-tint: #FFF3E6; /* cards */ --xc-border: #E1EAF7; /* Avatar palette – soft tints, for illustrations only */ --xc-periwinkle: #A9C4F5; --xc-sky-tint: #C7DCFB; --xc-peach: #FFD3A8; --xc-apricot: #FFB870; --xc-blush: #FFB3A7; --xc-soft-ink: #5B6780; /* Type */ --xc-font-display: "Fredoka", "Nunito", sans-serif; --xc-font-body: "Nunito", system-ui, sans-serif; /* Shape */ --xc-radius-card: 24px; --xc-radius-pill: 999px; --xc-shadow: 0 18px 40px rgba(31, 49, 106, 0.10); } body { margin: 0; font-family: var(--xc-font-body); color: var(--xc-navy); background: var(--xc-white); } h1, h2, h3 { font-family: var(--xc-font-display); font-weight: 600; } a { color: var(--xc-blue); } a:hover { color: var(--xc-navy); } /* Primary call-to-action: "Book a Free Trial Class", "Register Now". site.css builds on this with .btn / .btn--primary. */ .xc-btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; background: linear-gradient(135deg, var(--xc-orange), var(--xc-gold)); color: var(--xc-navy); border-radius: var(--xc-radius-pill); font-weight: 800; font-size: 1.1rem; text-decoration: none; } .xc-btn:hover { filter: brightness(1.05); color: var(--xc-navy); } .xc-card { border: 2px solid var(--xc-border); border-radius: var(--xc-radius-card); overflow: hidden; background: var(--xc-white); }