/********************************************************************* main.css Contains base styles for the client side **********************************************************************/ @font-face { font-family: 'Inter'; src: url('/assets/font/Inter-V.ttf') format('truetype'); font-weight: 100 200 300 400 500 600 700 800 900; font-style: normal; font-display: swap; } /* Font */ :root { --font-family-sans: 'Inter', sans-serif; } /* ========================================================================== COLOR SCHEME Darkmode is the default (set on :root and reinforced on .darkmode). Lightmode overrides are applied when .lightmode class is on . The polisher uses .lightmode selectors for lightmode-specific element styling — never .darkmode overrides (darkmode is already right). ========================================================================== */ /* Darkmode (default + explicit) */ :root, .darkmode { /* Brand Colors */ --brand-primary: #7fec6f; --brand-primary-hover: #aef3a4; --brand-on-primary: #000000; --brand-primary-gradient: #7fec6f; --brand-primary-gradient-hover: #aef3a4; --brand-primary-transparent: rgba(127, 236, 111, 0.1); --brand-primary-transparent-hover: rgba(127, 236, 111, 0.2); /* Backgrounds */ --bg-mono: #000000; /* Header/footer */ --bg-primary: #171717; /* Main page background */ --bg-secondary: #242424; /* Cards, modals, elevated surfaces */ --bg-tertiary: #2f2f2f; /* Input fields, code blocks */ --bg-accent: #3a3a3a; /* Subtle accent backgrounds */ /* Text Colors */ --text-primary: #EDEDED; /* Main headings, important text */ --text-secondary: #d4d4d4; /* Body text, labels */ --text-muted: #a1a1a1; /* Subtle text, placeholders */ --text-disabled: #737373; /* Disabled text */ /* Interactive States */ --hover-bg: #3f3f3f; /* Hover backgrounds */ --active-bg: #525252; /* Active/pressed states */ --focus-ring: #7fec6f; /* Focus indicators */ /* Borders & Dividers */ --border-primary: #404040; /* Main borders */ --border-secondary: #2a2a2a; /* Subtle dividers */ --border-accent: #525252; /* Emphasized borders */ --border-accent-strong: #737373; /* Extra emphasized borders */ /* Shadows */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; /* Semantic Colors - Info */ --info-bg: #1e293b; --info-border: #3b82f6; --info-text: #93c5fd; --info-icon: #60a5fa; /* Semantic Colors - Success */ --success-bg: #14532d; --success-border: #22c55e; --success-text: #86efac; --success-icon: #4ade80; /* Semantic Colors - Warning */ --warning-bg: #422006; --warning-border: #ca8a04; --warning-text: #fde047; --warning-icon: #facc15; /* Semantic Colors - Danger/Error */ --danger-bg: #450a0a; --danger-border: #dc2626; --danger-text: #fca5a5; --danger-icon: #f87171; /* Code Blocks */ --bg-code: #2f2f2f; --text-code: #e5e5e5; } /* Lightmode overrides — applied when .lightmode class is on */ .lightmode { /* Brand Colors — deeper Ezoic green (matches ezoic.com blog) */ --brand-primary: #549d48; --brand-primary-hover: #63b355; --brand-on-primary: #ffffff; --brand-primary-gradient: #549d48; --brand-primary-gradient-hover: #63b355; --brand-primary-transparent: rgba(84, 157, 72, 0.10); --brand-primary-transparent-hover: rgba(84, 157, 72, 0.18); /* Backgrounds — clean neutral */ --bg-mono: #ffffff; /* Header/footer */ --bg-primary: #f2f2f2; /* Neutral warm grey */ --bg-secondary: #ffffff; /* Cards, modals, elevated surfaces */ --bg-tertiary: #f5f5f5; /* Input fields, code blocks */ --bg-accent: #e8e8e8; /* Subtle accent backgrounds */ /* Text Colors */ --text-primary: #232424; --text-secondary: #495049; --text-muted: #777777; --text-disabled: #aaaaaa; /* Interactive States */ --hover-bg: #ededed; --active-bg: #e0e0e0; --focus-ring: #549d48; /* Borders & Dividers — warm grey from ezoic.com */ --border-primary: #cbc6cf; --border-secondary: #ddd9e0; --border-accent: #aba5b1; --border-accent-strong: #8a8590; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* Semantic Colors - Info */ --info-bg: #eff6ff; --info-border: #93c5fd; --info-text: #1e40af; --info-icon: #3b82f6; /* Semantic Colors - Success */ --success-bg: #f0fdf4; --success-border: #86efac; --success-text: #166534; --success-icon: #22c55e; /* Semantic Colors - Warning */ --warning-bg: #fefce8; --warning-border: #fde047; --warning-text: #854d0e; --warning-icon: #eab308; /* Semantic Colors - Danger/Error */ --danger-bg: #fef2f2; --danger-border: #fca5a5; --danger-text: #991b1b; --danger-icon: #ef4444; /* Code Blocks */ --bg-code: #f5f5f5; --text-code: #1e1e1e; } .halftone { --gap: 1em; --line: .7px; --color: #47534a5f; background: 0 0; background-image: linear-gradient(-90deg, transparent calc(var(--gap) - var(--line)), var(--color) calc(var(--gap) - var(--line) + 1px), var(--color) var(--gap)), linear-gradient(0deg, transparent calc(var(--gap) - var(--line)), var(--color) calc(var(--gap) - var(--line) + 1px), var(--color) var(--gap)); background-size: var(--gap) var(--gap); box-shadow: 0 4px 6px -1px #7170701a, 0 2px 4px -1px #326d310f; } /* Layout & Spacing */ :root { /* Border Radius */ --radius-sm: 4px; /* Small elements */ --radius-md: 6px; /* Default radius */ --radius-lg: 8px; /* Cards, modals */ --radius-xl: 12px; /* Large containers */ --radius-full: 9999px; /* Pills, avatars */ /* Z-index layers */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-header: 5000; /* Content */ --page-gutter-px: 32px; --max-content-width: 1200px; /* Responsive Breakpoints */ --breakpoint-xs: 320px; /* Extra small devices (small phones) */ --breakpoint-sm: 480px; /* Small devices (large phones) */ --breakpoint-md: 768px; /* Medium devices (tablets) */ --breakpoint-lg: 1024px; /* Large devices (small desktops) */ --breakpoint-xl: 1200px; /* Extra large devices (large desktops) */ --breakpoint-xxl: 1440px; /* Extra extra large devices (wide screens) */ /* Container max-widths for each breakpoint */ --container-sm: 540px; /* Container width for sm+ screens */ --container-md: 720px; /* Container width for md+ screens */ --container-lg: 960px; /* Container width for lg+ screens */ --container-xl: 1140px; /* Container width for xl+ screens */ --container-xxl: 1320px; /* Container width for xxl+ screens */ } /* Base Styles */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-family-sans); background-color: var(--bg-primary); color: var(--text-secondary); line-height: 1.6; padding: 0; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography */ h1 { font-weight: 700; font-size: 3rem; line-height: 120%; letter-spacing: -0.02em; margin: 0; } h2 { font-weight: 600; font-size: 2.25rem; line-height: 125%; letter-spacing: -0.01em; margin: 0; } h3 { font-weight: 600; font-size: 2rem; line-height: 125%; letter-spacing: -0.01em; margin: 0; } h4 { font-weight: 600; font-size: 1.75rem; line-height: 130%; letter-spacing: -0.005em; margin: 0; } h5 { font-weight: 500; font-size: 1.5rem; line-height: 135%; letter-spacing: -0.005em; margin: 0; } h6 { font-weight: 500; font-size: 1.25rem; line-height: 140%; letter-spacing: 0; margin: 0; } /* Body text - applies to all general text elements */ p, span, div, li, ul, ol, dl, dt, dd, label, input, textarea, select, button, .body-text { font-weight: 400; font-size: 1rem; line-height: 150%; letter-spacing: -0.005em; margin: 0; } /* Text size variants */ .text-large, p.large { font-size: 1.25rem; } .text-small, p.small { font-size: 0.75rem; } .text-xs { font-size: 0.625rem; } /* Links */ a { color: var(--brand-primary); text-decoration: none; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; } a:hover { color: var(--brand-primary-hover); text-decoration: none; } /* Content */ #header, #footer, #content { display: flex; justify-content: center; } .header-inner, .footer-inner { width: 100%; padding: 0 var(--page-gutter-px); max-width: var(--max-content-width); } .content-inner { width: 100%; padding: var(--page-gutter-px); max-width: var(--max-content-width); } #content { background-color: var(--bg-primary); } /* Typography - Now automatic via CSS variables */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } p, span, div, li, ul, ol, dl, dt, dd, label, input, textarea, select, .body-text { color: var(--text-secondary); } a { color: var(--brand-primary); } a:hover { color: var(--brand-primary-hover); } /* Responsive changes to vars */ @media screen and (max-width: 768px) { :root { --page-gutter-px: 16px; } /* Responsive Typography - Tablet/Mobile */ h1 { font-size: 2.5rem; /* 40px - down from 48px */ } h2 { font-size: 2rem; /* 32px - down from 36px */ } h3 { font-size: 1.75rem; /* 28px - down from 32px */ } h4 { font-size: 1.5rem; /* 24px - down from 28px */ } h5 { font-size: 1.25rem; /* 20px - down from 24px */ } h6 { font-size: 1.125rem; /* 18px - down from 20px */ } } @media screen and (max-width: 480px) { /* Responsive Typography - Small Mobile */ h1 { font-size: 2rem; /* 32px - more compact for small screens */ line-height: 125%; } h2 { font-size: 1.75rem; /* 28px */ } h3 { font-size: 1.5rem; /* 24px */ } h4 { font-size: 1.25rem; /* 20px */ } h5 { font-size: 1.125rem; /* 18px */ } h6 { font-size: 1rem; /* 16px */ } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .btn .material-symbols-outlined { font-size: 1.25rem; } .btn-primary { background-color: var(--brand-primary); color: var(--brand-on-primary); } .btn-primary:hover { background-color: var(--brand-primary-hover); color: var(--brand-on-primary); } .btn-primary:active { transform: scale(0.98); } .btn-primary span, .btn-primary .material-symbols-outlined { color: var(--brand-on-primary); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background-color: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-primary); } .btn-secondary:hover { background-color: var(--hover-bg); color: var(--text-primary); } .btn-secondary:active { transform: scale(0.98); } .btn-secondary span, .btn-secondary .material-symbols-outlined { color: var(--text-primary); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } /* Responsive - Mobile */ @media screen and (max-width: 480px) { .btn { padding: 0.5rem 1rem; font-size: 0.875rem; } } /* ======================================== LIGHTMODE STRUCTURAL OVERRIDES ======================================== */ /* --- Variation A: solid grid texture (commented out to try B) --- .lightmode #content { background-image: linear-gradient( -90deg, transparent calc(24px - 0.5px), rgba(0, 0, 0, 0.035) calc(24px - 0.5px), rgba(0, 0, 0, 0.035) 24px ), linear-gradient( 0deg, transparent calc(24px - 0.5px), rgba(0, 0, 0, 0.035) calc(24px - 0.5px), rgba(0, 0, 0, 0.035) 24px ); background-size: 24px 24px; } */ /* Variation B: lighter grid on a pseudo-element so it fades at the edges without affecting page content */ .lightmode #content { position: relative; background-color: #f5f5f5; } .lightmode #content::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient( -90deg, transparent calc(24px - 0.5px), rgba(0, 0, 0, 0.03) calc(24px - 0.5px), rgba(0, 0, 0, 0.03) 24px ), linear-gradient( 0deg, transparent calc(24px - 0.5px), rgba(0, 0, 0, 0.03) calc(24px - 0.5px), rgba(0, 0, 0, 0.03) 24px ); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%); } .lightmode .content-inner { position: relative; z-index: 1; }