/* * SitePilot Base Theme — base.css * Responsive framework, typography, spacing, and layout utilities. * * CSS custom properties are injected by preset-loader.php (sp-preset-vars). * Fallback values match the "Midnight Professional" preset (Navy + Gold). * * Load order: Google Fonts → base.css → components.css → child style.css */ /* ========================================================= 1. CSS RESET / NORMALIZE ========================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; tab-size: 4; } body { min-height: 100vh; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: var(--fs-body, 1rem); font-weight: 400; line-height: 1.7; color: var(--sp-text, #1A1A1A); background-color: var(--sp-bg, #FAFAF8); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elements */ img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { hyphens: auto; max-width: 68ch; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; border-spacing: 0; } /* Remove default fieldset styles */ fieldset { border: none; } /* ========================================================= 2. CSS CUSTOM PROPERTIES Fallback values: Midnight Professional preset. Actual values injected by preset-loader.php via :root { … } in before this stylesheet loads. ========================================================= */ :root { /* --- Color tokens (preset overrides these) --- */ --sp-primary: #1B2A4A; --sp-primary-light: #2C4A7C; --sp-primary-dark: #111A2E; --sp-secondary: #C9A84C; --sp-secondary-light: #D9BC76; --sp-secondary-dark: #9E7E30; --sp-accent: #2A7F8A; --sp-bg: #FAFAF8; --sp-surface: #F2F0EC; --sp-surface-alt: #E5E2DC; --sp-text: #1A1A1A; --sp-text-light: #6B7280; --sp-text-muted: #9CA3AF; --sp-text-inverse: #FFFFFF; --sp-border: #E5E2DC; --sp-border-strong: #C5C2BC; --sp-success: #16A34A; --sp-success-bg: #F0FDF4; --sp-warning: #EAB308; --sp-warning-bg: #FEFCE8; --sp-error: #DC2626; --sp-error-bg: #FEF2F2; --sp-overlay: rgba(27, 42, 74, 0.85); /* --- Typography scale — Desktop --- */ --fs-h1: 4rem; /* 64px */ --fs-h2: 3rem; /* 48px */ --fs-h3: 2.25rem; /* 36px */ --fs-h4: 1.75rem; /* 28px */ --fs-h5: 1.375rem; /* 22px */ --fs-h6: 1.125rem; /* 18px */ --fs-body-lg: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px */ --fs-body-sm: 0.875rem; /* 14px */ --fs-caption: 0.75rem; /* 12px */ --fs-overline: 0.75rem; /* 12px */ --fs-label: 0.875rem; /* 14px */ --fs-button: 0.9375rem; /* 15px */ --fs-nav: 0.9375rem; /* 15px */ /* --- Spacing tokens (8px base unit) --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-30: 7.5rem; /* 120px */ --space-32: 8rem; /* 128px */ /* --- Container widths --- */ --container-sm: 960px; --container-md: 1200px; --container-lg: 1400px; --container-full: 100%; /* --- Shadow system --- */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.04), 0 20px 40px rgba(0, 0, 0, 0.10); --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.12); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* --- Border radius system --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px; /* --- Font families --- */ --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace; /* --- Transition presets --- */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-medium: 0.25s ease-out; --transition-slow: 0.35s ease-in-out; --transition-scale: 0.4s ease; --transition-slide: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================= 3. TYPOGRAPHY ========================================================= */ /* Heading base */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--sp-text, #1A1A1A); text-wrap: balance; } h1 { font-size: var(--fs-h1, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } h3 { font-size: var(--fs-h3, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; } h4 { font-size: var(--fs-h4, 1.75rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; } h5 { font-size: var(--fs-h5, 1.375rem); font-weight: 600; line-height: 1.3; letter-spacing: 0; } h6 { font-size: var(--fs-h6, 1.125rem); font-weight: 600; line-height: 1.35; letter-spacing: 0; } /* Body text */ p { font-size: var(--fs-body, 1rem); line-height: 1.7; color: var(--sp-text, #1A1A1A); } .sp-body-lg { font-size: var(--fs-body-lg, 1.125rem); line-height: 1.7; } .sp-body-sm { font-size: var(--fs-body-sm, 0.875rem); line-height: 1.6; } .sp-caption { font-size: var(--fs-caption, 0.75rem); line-height: 1.5; letter-spacing: 0.02em; } /* Overline — small caps label above section titles */ .sp-overline { display: inline-block; font-size: var(--fs-overline, 0.75rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-secondary, #C9A84C); } /* Label */ .sp-label-text { font-size: var(--fs-label, 0.875rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; } /* Prose text that needs max-width constraint */ .sp-prose p { max-width: 68ch; } /* Link style */ a:not([class]) { color: var(--sp-primary, #1B2A4A); text-decoration: underline; text-decoration-color: transparent; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); } a:not([class]):hover { text-decoration-color: currentColor; } /* ========================================================= 4. FOCUS INDICATORS (Accessibility) ========================================================= */ :focus-visible { outline: 3px solid var(--sp-secondary, #C9A84C); outline-offset: 2px; border-radius: 4px; } .dark-section :focus-visible { outline-color: #ffffff; } /* ========================================================= 5. SKIP NAVIGATION LINK ========================================================= */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--sp-primary, #1B2A4A); color: #ffffff; padding: 12px 20px; border-radius: 0 0 8px 8px; font-weight: 600; z-index: 9999; transition: top var(--transition-base); } .skip-link:focus { top: 0; } /* ========================================================= 6. CONTAINER SYSTEM ========================================================= */ .sp-container { width: 100%; max-width: var(--container-md, 1200px); margin-inline: auto; padding-inline: 24px; } .sp-container--sm { max-width: var(--container-sm, 960px); } .sp-container--lg { max-width: var(--container-lg, 1400px); } .sp-container--full { max-width: 100%; padding-inline: 0; } /* ========================================================= 7. SECTION PADDING SYSTEM ========================================================= */ /* Standard section: 100px desktop, 80px tablet, 64px mobile */ .sp-section { padding-top: 100px; padding-bottom: 100px; } /* Hero section: 120px desktop */ .sp-section--hero { padding-top: 120px; padding-bottom: 120px; } /* Compact section: 64px desktop */ .sp-section--compact { padding-top: 64px; padding-bottom: 64px; } /* Feature/card row: 80px desktop */ .sp-section--feature { padding-top: 80px; padding-bottom: 80px; } /* Footer main: 80px top, 48px bottom */ .sp-section--footer { padding-top: 80px; padding-bottom: 48px; } /* Dark section utility */ .sp-section--dark { background-color: var(--sp-primary, #1B2A4A); color: var(--sp-text-inverse, #FFFFFF); } .sp-section--dark h1, .sp-section--dark h2, .sp-section--dark h3, .sp-section--dark h4, .sp-section--dark h5, .sp-section--dark h6 { color: var(--sp-text-inverse, #FFFFFF); } .sp-section--dark p { color: rgba(255, 255, 255, 0.85); } /* Surface section */ .sp-section--surface { background-color: var(--sp-surface, #F2F0EC); } /* ========================================================= 8. GRID SYSTEM ========================================================= */ .sp-grid { display: grid; gap: var(--space-6, 1.5rem); /* 24px default */ } /* Column presets */ .sp-grid--2 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3 { grid-template-columns: repeat(3, 1fr); } .sp-grid--4 { grid-template-columns: repeat(4, 1fr); } /* Auto-fit responsive grids */ .sp-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .sp-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .sp-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); } /* Split layouts */ .sp-grid--split { grid-template-columns: 1fr 1fr; align-items: center; } .sp-grid--split-60-40 { grid-template-columns: 3fr 2fr; align-items: center; } .sp-grid--split-40-60 { grid-template-columns: 2fr 3fr; align-items: center; } /* Gap variants */ .sp-grid--gap-sm { gap: var(--space-4, 1rem); } .sp-grid--gap-md { gap: var(--space-6, 1.5rem); } .sp-grid--gap-lg { gap: var(--space-8, 2rem); } .sp-grid--gap-xl { gap: var(--space-10, 2.5rem); } /* ========================================================= 9. FLEX UTILITIES ========================================================= */ .sp-flex { display: flex; } .sp-flex--center { justify-content: center; align-items: center; } .sp-flex--between { justify-content: space-between; align-items: center; } .sp-flex--start { align-items: flex-start; } .sp-flex--wrap { flex-wrap: wrap; } .sp-flex--col { flex-direction: column; } .sp-gap-2 { gap: var(--space-2, 0.5rem); } .sp-gap-3 { gap: var(--space-3, 0.75rem); } .sp-gap-4 { gap: var(--space-4, 1rem); } .sp-gap-6 { gap: var(--space-6, 1.5rem); } .sp-gap-8 { gap: var(--space-8, 2rem); } /* ========================================================= 10. SCROLL REVEAL ANIMATION ========================================================= */ .reveal-hidden { opacity: 0; transform: translateY(24px); } .reveal-visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Stagger delays for grid children */ .sp-grid > .reveal-hidden:nth-child(1) { transition-delay: 0s; } .sp-grid > .reveal-hidden:nth-child(2) { transition-delay: 0.1s; } .sp-grid > .reveal-hidden:nth-child(3) { transition-delay: 0.2s; } .sp-grid > .reveal-hidden:nth-child(4) { transition-delay: 0.3s; } .sp-grid > .reveal-hidden:nth-child(n+5) { transition-delay: 0.4s; } /* ========================================================= 11. DISPLAY / VISIBILITY UTILITIES ========================================================= */ /* Hide on mobile (< 768px) */ .sp-hidden-mobile { display: block; } /* Hide on desktop (>= 768px) */ .sp-hidden-desktop { display: none; } /* Text alignment */ .sp-text-center { text-align: center; } .sp-text-left { text-align: left; } .sp-text-right { text-align: right; } /* Section header (overline + h2 + subtext, centered) */ .sp-section-header { text-align: center; max-width: var(--container-sm, 960px); margin-inline: auto; margin-bottom: var(--space-12, 3rem); } .sp-section-header h2 { margin-top: var(--space-3, 0.75rem); } .sp-section-header p { margin-top: var(--space-4, 1rem); color: var(--sp-text-light, #6B7280); max-width: 60ch; margin-inline: auto; } /* ========================================================= 12. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================= 13. RESPONSIVE OVERRIDES ========================================================= */ /* --- Tablet Extra / Wide desktop (≥ 1440px) --- */ @media (min-width: 1440px) { .sp-grid { gap: var(--space-8, 2rem); } } /* --- Laptop (max-width: 1366px) --- */ @media (max-width: 1366px) { h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); } } /* --- Tablet Extra (max-width: 1200px) --- */ @media (max-width: 1200px) { .sp-container { padding-inline: 20px; } .sp-section { padding-top: 80px; padding-bottom: 80px; } .sp-section--hero { padding-top: 100px; padding-bottom: 100px; } .sp-section--compact { padding-top: 48px; padding-bottom: 48px; } .sp-section--feature { padding-top: 64px; padding-bottom: 64px; } .sp-section--footer { padding-top: 64px; padding-bottom: 32px; } .sp-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* --- Tablet (max-width: 1024px) --- */ @media (max-width: 1024px) { .sp-grid--3 { grid-template-columns: repeat(2, 1fr); } .sp-grid--split { grid-template-columns: 1fr; } .sp-grid--split-60-40 { grid-template-columns: 1fr; } .sp-grid--split-40-60 { grid-template-columns: 1fr; } } /* --- Mobile (max-width: 767px) --- */ @media (max-width: 767px) { /* Mobile typography scale */ :root { --fs-h1: 2.25rem; /* 36px */ --fs-h2: 1.875rem; /* 30px */ --fs-h3: 1.5rem; /* 24px */ --fs-h4: 1.25rem; /* 20px */ --fs-h5: 1.125rem; /* 18px */ --fs-h6: 1rem; /* 16px */ --fs-body-lg: 1.0625rem; /* 17px */ } h1 { line-height: 1.15; } h2 { line-height: 1.2; } h3 { line-height: 1.25; } .sp-container { padding-inline: 16px; } .sp-section { padding-top: 64px; padding-bottom: 64px; } .sp-section--hero { padding-top: 80px; padding-bottom: 80px; } .sp-section--compact { padding-top: 40px; padding-bottom: 40px; } .sp-section--feature { padding-top: 48px; padding-bottom: 48px; } .sp-section--footer { padding-top: 48px; padding-bottom: 24px; } .sp-grid--2 { grid-template-columns: 1fr; } .sp-grid--3 { grid-template-columns: 1fr; } .sp-grid--4 { grid-template-columns: 1fr; } /* Visibility toggles */ .sp-hidden-mobile { display: none; } .sp-hidden-desktop { display: block; } .sp-section-header { margin-bottom: var(--space-8, 2rem); } } /* --- Mobile Extra Small (max-width: 480px) --- */ @media (max-width: 480px) { :root { --fs-h1: 2rem; /* 32px — prevent overflow on very small screens */ } .sp-container { padding-inline: 16px; } }