/* ================= EDU PRINT SOLUTIONS - PRODUCTION STYLESHEET ================= *//* * This file is auto-generated from modular CSS source files * DO NOT EDIT THIS FILE DIRECTLY - Edit the source files in css/ directory * Run ./build-css.sh to rebuild * * Architecture:Layered system following CSS_ARCHITECTURE_RULES.md * Build date:$(date) *//* ================= LAYER 1:TOKENS ================= *//* ================= COLOR TOKENS ================= */:root{/* Neutral palette */ --color-neutral-50:#f6f8fa;--color-neutral-100:#f8fafc;--color-neutral-200:#e5e9f0;--color-neutral-800:#1a1a1a;--color-neutral-900:#111827;/* Brand colors */ --color-primary-600:#1f3a5f;--color-accent-500:#2f9e8f;/* Semantic grays */ --color-gray-500:#6b7280;--color-gray-400:#9ca3af;/* Surface colors - references to be used by components */ --bg-page:var(--color-neutral-50);--bg-surface:#ffffff;--bg-primary:var(--color-primary-600);--bg-footer:var(--color-neutral-900);/* Text colors */ --text-base:var(--color-neutral-800);--text-muted:var(--color-gray-500);--text-footer:var(--color-gray-400);--text-on-primary:#ffffff;/* Border colors */ --border-primary:var(--color-primary-600);/* Accent colors */ --accent-primary:var(--color-accent-500)}/* ================= TYPOGRAPHY TOKENS ================= */:root{--font-family-base:Inter,system-ui,sans-serif;--line-height-base:1.6;--line-height-tight:1.25}/* ================= SPACING TOKENS ================= */:root{--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--gap-sm:1rem;--gap-md:1.5rem;--gap-lg:2rem;--gap-xl:3rem}/* ================= EFFECTS TOKENS ================= */:root{--radius-sm:12px;--radius-full:999px;--shadow-soft:0 10px 30px rgba(0,0,0,0.06);--gradient-subtle:linear-gradient(135deg,#e5e9f0,#f8fafc);--transition-fast:0.2s ease}/* ================= LAYOUT TOKENS ================= */:root{--max-width-content:1100px;--max-width-text:45ch}/* ================= LAYER 2:THEME ================= *//* ================= BASE RESETS ================= */*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:var(--font-family-base);color:var(--text-base);line-height:var(--line-height-base)}h1,h2,h3{line-height:var(--line-height-tight)}/* ================= PAGE-LEVEL BACKGROUNDS ================= */body{background:var(--bg-page)}.hero{background:var(--bg-surface)}.cta{background:var(--bg-primary);color:var(--text-on-primary)}.site-footer{background:var(--bg-footer);color:var(--text-footer)}/* ================= ACCESSIBILITY ================= */@media (prefers-reduced-motion:reduce){*{transition:none !important}}/* ================= LAYER 3:LAYOUT ================= *//* ================= CONTAINER LAYOUT ================= */.container{max-width:var(--max-width-content);margin:0 auto;padding:var(--spacing-2xl) var(--spacing-md)}/* ================= GRID LAYOUTS ================= */.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap-xl);align-items:center}.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap-sm);text-align:center}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-lg)}.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl)}.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap-md)}.process-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap-lg)}.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap}/* ================= SECTION LAYOUT ================= */.cta{text-align:center}.hero-lead{max-width:var(--max-width-text)}.cta-actions .btn{margin:var(--spacing-xs)}/* ================= RESPONSIVE LAYOUT ================= */@media (max-width:768px){.hero-grid,.audience-grid{grid-template-columns:1fr;gap:var(--gap-lg)}.trust-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.service-grid,.value-grid{grid-template-columns:1fr}.process-steps{grid-template-columns:1fr}.container{padding:var(--spacing-xl) var(--spacing-sm)}}@media (max-width:480px){.trust-grid{grid-template-columns:1fr}.cta-actions .btn{display:block;margin:var(--spacing-xs) 0;text-align:center}}/* ================= LAYER 4:COMPONENTS ================= *//* ================= LOGO COMPONENT ================= */.site-logo{margin-bottom:var(--spacing-xl)}.site-logo img{max-width:100%;height:auto;display:block}@media (max-width:768px){.site-logo{margin-bottom:var(--spacing-lg)}.site-logo img{max-width:220px}}/* ================= BUTTON COMPONENTS ================= */.btn{display:inline-block;padding:0.75rem 1.4rem;border-radius:var(--radius-full);text-decoration:none;font-weight:500;transition:transform var(--transition-fast),background var(--transition-fast)}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--bg-primary);color:var(--text-on-primary)}.btn-secondary{border:2px solid var(--border-primary);color:var(--border-primary);background:transparent}.cta .btn-secondary{border-color:var(--text-on-primary);color:var(--text-on-primary)}/* ================= CARD COMPONENTS ================= */.service-card{background:var(--bg-surface);padding:var(--spacing-lg);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);transition:transform var(--transition-fast)}.service-card:hover{transform:translateY(-6px)}/* ================= HERO COMPONENTS ================= */.hero-lead{color:var(--text-muted)}.hero-logo{width:100%;max-width:100%;height:auto;display:block}/* ================= PROCESS COMPONENTS ================= */.process-steps li{display:flex;flex-direction:column;gap:0.5rem}.step-number{font-weight:700;font-size:1.5rem;color:var(--accent-primary)}.process-steps strong{color:var(--text-base);font-size:1.1rem}.process-steps p{margin:0;color:var(--text-muted)}/* ================= TRUST POINT COMPONENTS ================= */.trust-item{padding:var(--spacing-sm)}.trust-item strong{display:block;font-size:1.25rem;color:var(--accent-primary)}/* ================= VALUE CARD COMPONENTS ================= */.value-grid > div{padding:var(--spacing-md)}.value-grid strong{display:block;margin-bottom:0.5rem;font-size:1.05rem;color:var(--text-base)}.value-grid p{margin:0;color:var(--text-muted);font-size:0.95rem}/* ================= FOOTER COMPONENTS ================= */.footer-info p,.footer-links p{margin:0.5rem 0;font-size:0.9rem;line-height:1.6}.footer-info strong{font-size:1.1rem}.footer-links a{color:var(--text-footer);text-decoration:none;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--text-on-primary)}.footer-copyright{margin-top:var(--spacing-sm);font-size:0.85rem;opacity:0.85}