/* ============================================================ GLOBAL STYLES ============================================================ */ /* --- CSS Custom Properties (design tokens) --- */ :root { /* Base surfaces */ --background: #fcf9f8; --on-background: #1c1b1b; --surface: #fcf9f8; --on-surface: #1c1b1b; --on-surface-variant: #444933; --surface-variant: #e5e2e1; --surface-container-low: #f6f3f2; --surface-container-high: #ebe7e7; --outline-variant: #c4c9ac; /* Accent */ --duck-yellow: #ffd700; /* Typography */ --font-family: 'Manrope', sans-serif; } /* --- Pillar colour tokens (set --pillar-color via data-pillar on ) --- */ [data-pillar="on-page-seo"] { --pillar-color: #FF2424; } [data-pillar="off-page-seo"] { --pillar-color: #0052FF; } [data-pillar="technical-seo"] { --pillar-color: #00D44B; } [data-pillar="ai-search"] { --pillar-color: #8800FF; } [data-pillar="keyword-research"] { --pillar-color: #FF0099; } [data-pillar="local-seo"] { --pillar-color: #FF5C00; } /* --- Reset / Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; } body { font-family: var(--font-family); background-color: var(--background); color: var(--on-background); line-height: 1.5; } /* --- Material Symbols --- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* --- Utility classes --- */ .brutalist-shadow { box-shadow: 8px 8px 0px 0px #1c1b1b; } .brutalist-shadow-small { box-shadow: 4px 4px 0px 0px #1c1b1b; } .marker-underline { --thickness: 0.3em; --vertical-pos: 85%; --neo-color: transparent; display: block; width: fit-content; background-image: linear-gradient(120deg, var(--neo-color) 0%, var(--neo-color) 100%); background-repeat: no-repeat; background-size: 100% var(--thickness); background-position: 0 var(--vertical-pos); padding: 0 4px; transition: background-image 0.2s ease; transform: rotate(-0.8deg); } .duck-yellow { display: inline-block; background-color: var(--duck-yellow); padding: 5px 5px; transform: rotate(-2deg); border: 3px solid #000; box-shadow: 5px 5px 0 0 #000; } /* ============================================================ COLOUR ROTATION — driven by ColourRotation.astro Each element uses --neo-color, assigned dynamically per-element. ============================================================ */ .nav-link { --neo-color: var(--duck-yellow); } .nav-link:hover, .nav-link--active { color: var(--on-background); } .nav-link--active { border-bottom-color: var(--neo-color); } .nav-link:hover { border-bottom: 4px solid var(--neo-color); padding-bottom: 0.25rem; } .hero-badge { background-color: var(--duck-yellow); } .accordion-item { --neo-color: var(--duck-yellow); transition: border-color 0.15s ease; } .accordion-item summary:hover { border-left: 10px solid var(--neo-color); padding-left: 0.75rem; transition: border-left 0.15s ease, padding-left 0.15s ease; } .accordion-item.is-open .accordion-icon { background-color: var(--neo-color); } .stat-card { --neo-color: var(--duck-yellow); transition: background-color 0.15s ease; } .stat-card:hover { background-color: var(--neo-color); } .cap-card, .cap-card--feature, .cap-card--teal { --neo-color: var(--duck-yellow); } .cap-card:hover, .cap-card--feature:hover, .cap-card--teal:hover { outline: 4px solid var(--neo-color); outline-offset: -4px; } .cta-btn { --neo-color: var(--duck-yellow); } .cta-btn:hover { background-color: var(--neo-color); color: var(--on-background); }