/** * WrestlerFinder Design System * File: /wp-content/themes/wrestlerfinder/assets/css/design-system.css * * Dark mode default. Light mode via [data-theme="light"] on . * Toggle persisted in localStorage key 'wf-theme'. * * Brand: Teal #00D4D4 on dark navy. * Fonts: Barlow Condensed (headings) + DM Sans (body) via Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); /* ============================================================================= Tokens — Dark Mode (default) ============================================================================= */ :root { /* Brand */ --color-teal: #00D4D4; --color-teal-hover: #00EEEE; --color-teal-dim: rgba(0, 212, 212, 0.12); --color-teal-glow: rgba(0, 212, 212, 0.22); --color-teal-border: rgba(0, 212, 212, 0.30); --color-gold: #E3B341; --color-danger: #F85149; /* Surfaces */ --color-bg: #0D1117; --color-surface: #161C2A; --color-surface-2: #1E2640; --color-surface-3: #252F4A; --color-border: #252F4A; --color-border-subtle: #1C2438; /* Text */ --color-text: #E8EDF5; --color-text-muted: #8892A4; --color-text-subtle: #5A6478; /* Semantic */ --color-success: #10D48C; --color-warning: #F5A623; --color-error: #FF4D6A; --color-info: #4DA6FF; /* Component aliases — used throughout profile.css */ --color-primary: var(--color-teal); --color-primary-dark: var(--color-teal-hover); --color-accent: var(--color-warning); --color-white: #E8EDF5; --color-gray-50: var(--color-surface); --color-gray-100: var(--color-surface-2); --color-gray-200: var(--color-border); --color-gray-300: #374166; --color-gray-400: var(--color-text-subtle); --color-gray-600: var(--color-text-muted); --color-gray-700: #A0AABB; --color-gray-800: #C8D0DE; --color-gray-900: var(--color-text); /* Typography */ --font-heading: 'Barlow Condensed', sans-serif; --font-body: 'DM Sans', sans-serif; /* Type Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-teal: 0 0 24px rgba(0, 212, 212, 0.18); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Layout — sticky site header height. Referenced by pages that need to stack their own sticky UI beneath the site header (e.g. profile editor's step bar). Computed from padding-block: var(--space-3) * 2 + 32px logo + 1px border = 57px. Round to 57 so editor.css doesn't need to do arithmetic. */ --wf-site-header-height: 57px; /* Theme toggle icon */ --theme-icon-sun: '☀'; --theme-icon-moon: '☾'; } /* ============================================================================= Tokens — Light Mode override ============================================================================= */ [data-theme="light"] { /* Brand — darker teal for contrast on white */ --color-teal: #007C8A; --color-teal-hover: #006070; --color-teal-dim: rgba(0, 124, 138, 0.08); --color-teal-glow: rgba(0, 124, 138, 0.15); --color-teal-border: rgba(0, 124, 138, 0.25); /* Surfaces */ --color-bg: #F2F5F9; --color-surface: #FFFFFF; --color-surface-2: #EBF0F7; --color-surface-3: #E2E8F2; --color-border: #D4DCEA; --color-border-subtle: #EAF0F8; /* Text */ --color-text: #0D1117; --color-text-muted: #5A6478; --color-text-subtle: #8892A4; /* Semantic */ --color-success: #0A9E6E; --color-warning: #D4860E; --color-error: #D93254; /* Component aliases */ --color-primary: var(--color-teal); --color-primary-dark: var(--color-teal-hover); --color-white: #FFFFFF; --color-gray-50: #F2F5F9; --color-gray-100: #EBF0F7; --color-gray-200: #D4DCEA; --color-gray-300: #B8C4D4; --color-gray-400: #8892A4; --color-gray-600: #5A6478; --color-gray-700: #374166; --color-gray-800: #1E2640; --color-gray-900: #0D1117; /* Shadows — lighter in light mode */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-teal: 0 0 24px rgba(0, 124, 138, 0.12); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); } /* ============================================================================= Base Reset & Body ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); transition: background-color var(--transition-slow), color var(--transition-slow); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { max-width: 100%; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-teal-hover); } /* Headings use Barlow Condensed throughout */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.1; color: var(--color-text); letter-spacing: 0.01em; } p { line-height: 1.7; } ul, ol { padding-left: 1.5em; } /* ============================================================================= Site Header ============================================================================= */ .wf-site-header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); transition: background var(--transition-slow), border-color var(--transition-slow); } .wf-site-header__inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .wf-site-header__inner { padding-inline: var(--space-8); } } .wf-site-header__logo { flex-shrink: 0; display: flex; align-items: center; } .wf-site-header__logo img { height: 32px; width: auto; } /* Light mode: tint logo so it reads on white */ [data-theme="light"] .wf-site-header__logo img { filter: brightness(0.3) sepia(1) hue-rotate(150deg) saturate(4); } .wf-site-header__logo-text { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); letter-spacing: -0.01em; } .wf-site-nav { flex: 1; display: flex; justify-content: flex-start; } .wf-site-nav__list { display: flex; gap: var(--space-6); list-style: none; } .wf-site-nav__list a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; text-transform: uppercase; transition: color var(--transition-fast); } .wf-site-nav__list a:hover { color: var(--color-primary); } .wf-site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Theme toggle button */ .wf-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; /* Keep the circle round even when parent flex is tight */ border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; font-size: var(--text-base); line-height: 1; transition: background var(--transition-fast), border-color var(--transition-fast); color: var(--color-text); padding: 0; } .wf-theme-toggle:hover { background: var(--color-surface-3); border-color: var(--color-primary); } /* Mobile nav toggle */ .wf-site-header__menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; } .wf-site-header__menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--color-text); transition: transform var(--transition-fast), opacity var(--transition-fast); } @media (max-width: 767px) { .wf-site-nav { display: none; } .wf-site-header__menu-toggle { display: flex; } } /* ============================================================================= Site Footer ============================================================================= */ .wf-site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding-block: var(--space-8); margin-top: var(--space-16); } .wf-site-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .wf-site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; padding-inline: var(--space-8); } } .wf-site-footer__brand a { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-text); } .wf-site-footer__tagline { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); } .wf-site-footer__list { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; justify-content: center; } .wf-site-footer__list a { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; } .wf-site-footer__list a:hover { color: var(--color-primary); } .wf-site-footer__legal { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: right; } /* ============================================================================= Container ============================================================================= */ .wf-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .wf-container { padding-inline: var(--space-8); } }