/** * Aigenttra Theme — main.css * * Phase 2 scope: design tokens, base reset, accessibility helpers, * layout primitives, button system, announcement bar, site header, * mega menu, mobile navigation, site footer, and print rules. * * All colour values reference CSS custom properties so that the dark * mode variant (applied via the .dark class on ) is handled * automatically with zero duplication. * * Section map: * 1. Design tokens — light mode * 2. Design tokens — dark mode (.dark class + prefers-color-scheme) * 3. Base reset * 4. Accessibility helpers * 5. Layout — .site, .container * 6. Button system — .btn * 7. Announcement bar * 8. Site header — #masthead * 9. Header logo * 10. Header navigation (desktop) * 11. Mega menu panel * 12. Header actions * 13. Mobile navigation * 14. Site footer — #colophon * 15. Footer branding * 16. Footer navigation * 17. Footer newsletter * 18. Footer legal bar * 19. WordPress nav menu reset * 20. Print */ /* ───────────────────────────────────────────────────────────────────────────── 1. Design tokens — light mode ───────────────────────────────────────────────────────────────────────────── */ :root { /* Colour primitives */ --background: 0 0% 98%; --foreground: 240 10% 4%; --border: 240 6% 90%; --input: 240 6% 90%; --ring: 240 5% 65%; --card: 0 0% 100%; --card-foreground: 240 10% 4%; --popover: 0 0% 100%; --popover-foreground: 240 10% 4%; --primary: 235 85% 55%; --primary-foreground: 0 0% 100%; --secondary: 240 5% 96%; --secondary-foreground:240 6% 10%; --muted: 240 5% 96%; --muted-foreground: 240 4% 46%; --accent: 240 5% 96%; --accent-foreground: 240 6% 10%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; /* Semantic aliases — used throughout this stylesheet */ --color-bg: hsl(var(--background)); --color-fg: hsl(var(--foreground)); --color-border: hsl(var(--border)); --color-primary: hsl(var(--primary)); --color-primary-fg: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-fg: hsl(var(--secondary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-fg: hsl(var(--muted-foreground)); --color-card: hsl(var(--card)); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Menlo', 'Monaco', 'Consolas', monospace; /* Sizing */ --radius: 0.375rem; /* 6 px */ --radius-sm: calc(var(--radius) - 2px); --radius-lg: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 8px); --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* Layout */ --container-max: 90rem; /* 1440 px */ --container-padding: 1.5rem; /* 24 px */ /* Header */ --header-height: 5rem; /* 80 px — unscrolled */ --header-height-scrolled: 4rem; /* 64 px — scrolled */ --header-height-mobile: 3.5rem; /* 56 px */ /* Animation */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* Z-index scale */ --z-header: 100; --z-mega-menu: 110; --z-mobile-nav: 200; --z-backdrop: 190; } /* ───────────────────────────────────────────────────────────────────────────── 2. Design tokens — dark mode Applied via: (a) .dark class on set by main.js theme toggle, (b) @media prefers-color-scheme: dark as the auto fallback. ───────────────────────────────────────────────────────────────────────────── */ .dark, html[data-theme="dark"] { --background: 240 10% 4%; --foreground: 0 0% 98%; --border: 240 4% 16%; --input: 240 4% 16%; --ring: 240 5% 65%; --card: 240 6% 6%; --card-foreground: 0 0% 98%; --popover: 240 6% 6%; --popover-foreground: 0 0% 98%; --primary: 235 85% 65%; --primary-foreground: 0 0% 100%; --secondary: 240 4% 16%; --secondary-foreground:0 0% 98%; --muted: 240 4% 16%; --muted-foreground: 240 5% 65%; --accent: 240 4% 16%; --accent-foreground: 0 0% 98%; --destructive: 0 63% 31%; --destructive-foreground: 0 0% 98%; --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --background: 240 10% 4%; --foreground: 0 0% 98%; --border: 240 4% 16%; --input: 240 4% 16%; --ring: 240 5% 65%; --card: 240 6% 6%; --card-foreground: 0 0% 98%; --popover: 240 6% 6%; --popover-foreground: 0 0% 98%; --primary: 235 85% 65%; --primary-foreground: 0 0% 100%; --secondary: 240 4% 16%; --secondary-foreground:0 0% 98%; --muted: 240 4% 16%; --muted-foreground: 240 5% 65%; --accent: 240 4% 16%; --accent-foreground: 0 0% 98%; --destructive: 0 63% 31%; --destructive-foreground: 0 0% 98%; --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6); } } /* ───────────────────────────────────────────────────────────────────────────── 3. Base reset ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-fg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; background: none; border: none; } ul, ol { list-style: none; } /* ───────────────────────────────────────────────────────────────────────────── 4. Accessibility helpers ───────────────────────────────────────────────────────────────────────────── */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { clip: auto !important; clip-path: none; background-color: var(--color-bg); color: var(--color-fg); display: block; font-size: 0.875rem; font-weight: 600; height: auto; left: 0.5rem; line-height: normal; padding: 1rem 1.5rem; text-decoration: none; top: 0.5rem; width: auto; z-index: calc(var(--z-mobile-nav) + 10); } .skip-link { position: fixed; top: -100%; left: 0.5rem; z-index: calc(var(--z-mobile-nav) + 10); padding: 0.75rem 1.25rem; background: var(--color-primary); color: var(--color-primary-fg); font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); transition: top var(--duration-fast) var(--ease-in-out); } .skip-link:focus { top: 0.5rem; } /* Focus ring — applied to interactive elements throughout this theme */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────────── 5. Layout ───────────────────────────────────────────────────────────────────────────── */ .site { display: flex; flex-direction: column; min-height: 100dvh; } .site > #main, .site > main { flex: 1 0 auto; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } @media (min-width: 768px) { .container { padding-inline: 1.5rem; } } /* ───────────────────────────────────────────────────────────────────────────── 6. Button system Mirrors the React