/* Theme Name: SaaS Base Theme URI: https://example.com Author: Mateus Description: Base theme for SaaS product. Minimal, professional, token-driven. Plugins render content via shortcodes using CSS variables defined here. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: saas-base Tags: saas, woocommerce, minimal, dark-mode */ /* ============================================================ DESIGN TOKENS — contract between theme and plugins All plugins/shortcodes must consume these variables. Never hardcode colors, spacing or typography outside tokens. ============================================================ */ :root { /* --- Brand --- */ --color-primary: #2255CC; --color-primary-hover: #1A44A8; --color-primary-subtle: #EEF3FD; --color-primary-muted: #93B4F0; /* --- Surface (light/clean mode defaults) --- */ --color-bg: #F1F4F9; --color-bg-secondary: #E8EDF5; --color-surface: #FAFCFF; --color-surface-raised: #EEF2FA; --color-border: #D8E0EE; --color-border-subtle: #E8EDF5; /* --- Text --- */ --color-text-primary: #0D1829; --color-text-secondary: #3D5070; --color-text-muted: #7A90B0; --color-text-inverse: #FFFFFF; /* --- Status --- */ --color-success: #16A34A; --color-success-subtle: #DCFCE7; --color-error: #DC2626; --color-error-subtle: #FEE2E2; --color-warning: #D97706; --color-warning-subtle: #FEF3C7; --color-info: #0284C7; --color-info-subtle: #E0F2FE; /* --- Typography --- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --leading-tight: 1.25; --leading-base: 1.5; --leading-loose: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; /* --- Spacing scale --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --- Border radius --- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 14px; --radius-full: 9999px; /* --- Shadows --- */ --shadow-xs: 0 1px 2px rgba(13,24,41,0.04); --shadow-sm: 0 2px 6px rgba(13,24,41,0.06); --shadow-md: 0 4px 16px rgba(13,24,41,0.08); --shadow-lg: 0 8px 32px rgba(13,24,41,0.10); --shadow-xl: 0 16px 48px rgba(13,24,41,0.14); /* --- Layout --- */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --header-height: 64px; /* --- Transitions --- */ --transition-fast: 100ms ease; --transition-base: 200ms ease; --transition-slow: 350ms ease; /* --- Z-index scale --- */ --z-base: 1; --z-raised: 10; --z-header: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* ============================================================ DARK MODE TOKENS Applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { --color-bg: #070D1A; --color-bg-secondary: #0C1425; --color-surface: #101828; --color-surface-raised: #172035; --color-border: #1E2D47; --color-border-subtle: #152039; --color-text-primary: #E8EFF8; --color-text-secondary: #8BA4C8; --color-text-muted: #4A6080; --color-primary-subtle: #0F1F3D; --color-primary-muted: #4A78D0; --color-success-subtle: #052E16; --color-error-subtle: #1F0707; --color-warning-subtle: #1C0F00; --color-info-subtle: #03111E; --shadow-xs: 0 1px 2px rgba(0,0,0,0.20); --shadow-sm: 0 2px 6px rgba(0,0,0,0.28); --shadow-md: 0 4px 16px rgba(0,0,0,0.36); --shadow-lg: 0 8px 32px rgba(0,0,0,0.44); --shadow-xl: 0 16px 48px rgba(0,0,0,0.52); } /* ============================================================ RESET & BASE ============================================================ */ *, *::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); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-base); color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-slow), color var(--transition-slow); } img, svg, video { display: block; max-width: 100%; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } button { cursor: pointer; font-family: inherit; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); } @media (max-width: 768px) { .container { padding-inline: var(--space-4); } } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-height); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--transition-slow), border-color var(--transition-slow); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Logo */ .site-header__logo { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-primary); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); text-decoration: none; transition: opacity var(--transition-fast); } .site-header__logo:hover { opacity: 0.8; color: var(--color-text-primary); } .site-header__logo-mark { width: 28px; height: 28px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .site-header__logo-mark svg { width: 16px; height: 16px; color: white; } /* Nav */ .site-header__nav { display: flex; align-items: center; gap: var(--space-1); } .site-header__nav a { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: color var(--transition-fast), background-color var(--transition-fast); } .site-header__nav a:hover { color: var(--color-text-primary); background-color: var(--color-surface-raised); } .site-header__nav a.active { color: var(--color-primary); background-color: var(--color-primary-subtle); } /* Header actions */ .site-header__actions { display: flex; align-items: center; gap: var(--space-3); } /* Theme toggle */ .theme-toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast); } .theme-toggle:hover { color: var(--color-text-primary); background-color: var(--color-surface-raised); } .theme-toggle svg { width: 16px; height: 16px; pointer-events: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Cart */ .cart-toggle { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); transition: color var(--transition-fast), background-color var(--transition-fast); } .cart-toggle:hover { color: var(--color-text-primary); background-color: var(--color-surface-raised); } .cart-toggle svg { width: 16px; height: 16px; } .cart-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding-inline: 3px; border-radius: var(--radius-full); background-color: var(--color-primary); color: var(--color-text-inverse); font-size: 10px; font-weight: var(--weight-bold); line-height: 16px; text-align: center; display: none; } .cart-count.has-items { display: block; } /* CTA button */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background-color: var(--color-primary); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); border: 1px solid transparent; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; } .btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-text-inverse); box-shadow: 0 0 0 3px rgba(34,85,204,0.16); } .btn-primary:active { transform: scale(0.98); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background-color: transparent; color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid var(--color-border); transition: background-color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .btn-secondary:hover { background-color: var(--color-surface-raised); border-color: var(--color-primary-muted); color: var(--color-text-primary); } /* ============================================================ MAIN CONTENT ============================================================ */ .site-main { min-height: calc(100vh - var(--header-height)); } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-8); background-color: var(--color-surface); transition: background-color var(--transition-slow), border-color var(--transition-slow); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .site-footer__copy { font-size: var(--text-sm); color: var(--color-text-muted); } .site-footer__links { display: flex; gap: var(--space-6); } .site-footer__links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--transition-fast); } .site-footer__links a:hover { color: var(--color-text-secondary); } /* ============================================================ WOOCOMMERCE — base overrides ============================================================ */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--radius-md); font-size: var(--text-sm); border-left-width: 3px; } .woocommerce-message { border-left-color: var(--color-success); } .woocommerce-info { border-left-color: var(--color-info); } .woocommerce-error { border-left-color: var(--color-error); } /* ============================================================ MOBILE NAV ============================================================ */ @media (max-width: 768px) { .site-header__nav { display: none; } } /* ============================================================ ACCESSIBILITY ============================================================ */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ TRANSITIONS ON THEME CHANGE Applied to known surfaces — plugins inherit via variables ============================================================ */ .site-header, .site-footer, body { transition: background-color var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow); }