/* =========================== Ezaz Automation – Base Tokens =========================== */ :root { /* Typography scale */ --text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.80rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); /* Spacing (4px grid) */ --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; --space-24: 6rem; /* Layout widths */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transition */ --transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1); --transition-med: 220ms cubic-bezier(0.16, 1, 0.3, 1); /* Colors – light mode */ --color-bg: #f7f6f2; --color-surface: #fbfbf9; --color-surface-2: #f3f0ec; --color-surface-offset: #ebe7e0; --color-border: #d7d3cc; --color-divider: #ddd8d1; --color-text: #1f1c16; --color-text-muted: #817f79; --color-text-faint: #aaa79f; --color-text-on-accent: #fdfcf9; /* Primary accent – teal */ --color-primary: #01696f; --color-primary-soft: #e0eef0; --color-primary-hover: #0d4f54; --color-primary-active: #0a383b; /* Semantic */ --color-success: #437a22; --color-warning: #b5611e; --color-error: #a12c7b; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.16); /* Fonts – override in HTML with real webfonts if you like */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Dark mode override – set on */ [data-theme="dark"] { --color-bg: #111016; --color-surface: #181821; --color-surface-2: #1f2230; --color-surface-offset: #252837; --color-border: #343748; --color-divider: #2a2d3a; --color-text: #e5e7f5; --color-text-muted: #9ca3c7; --color-text-faint: #6b7280; --color-text-on-accent: #fefdfb; --color-primary: #46a2ae; --color-primary-soft: #14252a; --color-primary-hover: #2a7c86; --color-primary-active: #1e5d63; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.36); --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.5); } /* =========================== Base reset =========================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { text-size-adjust: none; scroll-behavior: smooth; } body { min-height: 100vh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; font-size: inherit; } ul[role="list"], ol[role="list"] { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; } p, li { text-wrap: pretty; } /* Focus */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Utility */ .container { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-4); } .section { padding-block: clamp(var(--space-8), 6vw, var(--space-16)); } .section-narrow { max-width: var(--content-default); margin-inline: auto; } .text-muted { color: var(--color-text-muted); } .badge { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: var(--radius-full); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; background-color: var(--color-surface-2); color: var(--color-text-muted); } /* =========================== Header & Navigation =========================== */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: linear-gradient( to bottom, rgba(247, 246, 242, 0.9), rgba(247, 246, 242, 0.7), transparent ); } [data-theme="dark"] .site-header { background: linear-gradient( to bottom, rgba(17, 16, 22, 0.95), rgba(17, 16, 22, 0.85), transparent ); } .navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .nav-left { display: flex; align-items: center; gap: var(--space-3); } .logo-mark { width: 32px; height: 32px; border-radius: 40% 60% 55% 45%; background: radial-gradient(circle at 20% 20%, #fefdf9 0, #fefdf9 20%, var(--color-primary) 60%, var(--color-primary-active) 100%); box-shadow: var(--shadow-sm); } .logo-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0.02em; } .logo-sub { font-size: var(--text-xs); color: var(--color-text-muted); } .nav-links { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); } .nav-links a { color: var(--color-text-muted); padding: 0.2rem 0; position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -0.2rem; width: 0; height: 2px; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--transition-fast); } .nav-links a:hover { color: var(--color-text); } .nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: var(--space-3); } /* Theme toggle button (JS will update) */ .theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-border); display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform 120ms ease-out; } .theme-toggle:hover { background-color: var(--color-surface-2); color: var(--color-text); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } /* Mobile nav adjustments */ @media (max-width: 768px) { .navbar { padding-block: var(--space-3); } .nav-links { display: none; /* for now, simple desktop nav; you can add mobile menu later */ } } /* =========================== Buttons =========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1.25rem; border-radius: var(--radius-full); border: 1px solid transparent; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--transition-med), color var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med), transform 140ms ease-out; text-decoration: none; } .btn-primary { background-color: var(--color-primary); color: var(--color-text-on-accent); box-shadow: var(--shadow-md); } .btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); } .btn-primary:active { background-color: var(--color-primary-active); transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-outline { border-color: var(--color-border); background-color: transparent; color: var(--color-text); } .btn-outline:hover { border-color: var(--color-primary); background-color: var(--color-primary-soft); color: var(--color-primary-hover); } /* =========================== Hero section =========================== */ .hero { padding-block: clamp(var(--space-10), 8vw, var(--space-20)); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; } .hero-kicker { margin-bottom: var(--space-3); } .hero-title { font-size: var(--text-2xl); letter-spacing: -0.03em; margin-bottom: var(--space-4); } .hero-lead { max-width: 36rem; color: var(--color-text-muted); font-size: var(--text-lg); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); } .hero-meta strong { display: block; color: var(--color-text); font-size: var(--text-sm); } .hero-card { background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.9), transparent 55%), var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .hero-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); } .hero-card p { font-size: var(--text-sm); color: var(--color-text-muted); } .hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); } .hero-metric strong { display: block; font-size: var(--text-lg); } /* Hero responsive */ @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } } /* =========================== Cards & grids =========================== */ .grid { display: grid; gap: var(--space-4); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { background-color: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-soft); background-color: var(--color-surface-2); } .card-title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .card-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); } .card-price { font-size: var(--text-sm); color: var(--color-primary-hover); font-weight: 500; margin-bottom: var(--space-3); } .card ul { list-style: none; margin-top: var(--space-2); } .card li { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 0.3rem; } /* =========================== Section headings =========================== */ .section-heading { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); } .section-heading h2 { font-size: var(--text-xl); } .section-heading p { max-width: var(--content-narrow); color: var(--color-text-muted); } /* =========================== Contact & footer =========================== */ .contact-panel { background: linear-gradient(145deg, var(--color-primary), var(--color-primary-hover)); color: var(--color-text-on-accent); border-radius: var(--radius-xl); padding: var(--space-6); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); box-shadow: var(--shadow-lg); } .contact-panel h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); } .contact-panel p { font-size: var(--text-sm); max-width: 32rem; color: rgba(250, 250, 252, 0.85); } .contact-details { font-size: var(--text-sm); } .contact-details div { margin-bottom: 0.5rem; } .contact-details a { color: #fefcf9; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); } @media (max-width: 900px) { .contact-panel { grid-template-columns: minmax(0, 1fr); } } .site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-6); margin-top: var(--space-10); } .footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); } .footer-links a { color: var(--color-text-muted); } .footer-links a:hover { color: var(--color-text); } /* =========================== Forms (for contact page) =========================== */ .form { max-width: var(--content-narrow); } .form-group { margin-bottom: var(--space-4); } .form label { display: block; font-size: var(--text-sm); margin-bottom: 0.25rem; color: var(--color-text); } .form input, .form textarea { width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background-color: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .form input:focus-visible, .form textarea:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(1, 105, 111, 0.15); } .form-help { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.2rem; } /* =========================== Responsive tweaks =========================== */ @media (max-width: 600px) { .section { padding-block: var(--space-8); } .hero-actions { flex-direction: column; align-items: stretch; } .card { padding: var(--space-4); } }