/* ========================================================================== Fieldon Site — public front end Every color reads from --os-primary / --os-secondary (and their -rgb twins), set inline in from Branding & Settings. Change the brand colors there and this entire stylesheet re-colors automatically. ========================================================================== */ :root { --os-ink: #101827; --os-ink-soft: #5b6472; --os-border: #e7e8ec; --os-surface-muted: #f6f7fb; --os-radius-lg: 20px; --os-radius-md: 14px; --os-radius-pill: 999px; --os-shadow-card: 0 1px 2px rgba(16, 24, 39, .04), 0 8px 24px rgba(16, 24, 39, .06); } /* This plugin's own pages render through public/templates/page-template.php, a bare document with no theme styling applied — this resets the basics normally supplied by a theme's stylesheet. */ body.os-managed-page { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--os-ink); -webkit-font-smoothing: antialiased; } body.os-managed-page img { max-width: 100%; height: auto; } body.os-managed-page * { box-sizing: border-box; } /* Guaranteed breathing room before the footer on every page, no matter which shortcode/section happens to end it (features grid, pricing, contact info, etc.) — this is a container padding rather than relying on the last section's own margin, so it's consistent everywhere. */ .os-page-content { padding-bottom: 56px; } .os-site-header, .os-site-footer, .os-hero, .os-pricing-section, .os-industries-section, .os-steps-section, .os-cta-band, .os-features, .os-about, .os-contact { box-sizing: border-box; } .os-site-header *, .os-site-footer *, .os-hero *, .os-pricing-section *, .os-industries-section *, .os-steps-section *, .os-cta-band *, .os-features *, .os-about *, .os-contact * { box-sizing: border-box; } /* ---------- Header ---------- */ .os-site-header { background: #fff; border-bottom: 1px solid var(--os-border); position: sticky; top: 0; z-index: 500; } .os-site-header-inner { max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 32px; } .os-site-header .os-nav { margin-left: auto; } .os-site-header .os-btn { flex-shrink: 0; } /* ---------- Logo lockup ---------- */ .os-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .os-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .os-logo-name { font-weight: 800; font-size: 1.05em; color: var(--os-ink); } .os-logo-tagline { font-size: .72em; color: var(--os-ink-soft); } /* ---------- Nav ---------- */ .os-nav ul { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; } .os-nav a { text-decoration: none; font-weight: 600; font-size: .95em; color: var(--os-ink); opacity: .85; } .os-nav a:hover { opacity: 1; color: var(--os-primary); } /* ---------- Buttons ---------- */ .os-btn { display: inline-block; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: .95em; border: none; cursor: pointer; transition: opacity .15s ease, transform .1s ease; text-align: center; } .os-btn:hover { opacity: .9; } .os-btn:active { transform: translateY(1px); } .os-btn-pill { border-radius: var(--os-radius-pill); } .os-btn-block { display: block; width: 100%; } .os-btn-primary { background: var(--os-primary); color: #fff; } .os-btn-primary:hover { color: #fff; } .os-btn-secondary { background: var(--os-secondary); color: #fff; } .os-btn-secondary:hover { color: #fff; } .os-btn-dark { background: var(--os-ink); color: #fff; } .os-btn-dark:hover { color: #fff; } .os-btn-outline { background: #fff; color: var(--os-ink); border: 1.5px solid var(--os-border); } .os-btn-outline:hover { border-color: var(--os-primary); color: var(--os-primary); opacity: 1; } /* ---------- Eyebrow (small uppercase label with a dot) ---------- */ .os-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78em; font-weight: 700; letter-spacing: .06em; color: var(--os-secondary); margin: 0 0 14px; } .os-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--os-secondary); display: inline-block; } /* ---------- Hero ---------- */ .os-hero { text-align: center; padding: 88px 24px 72px; background: radial-gradient(60% 90% at 15% 20%, rgba(var(--os-primary-rgb), .10), transparent 60%), radial-gradient(60% 90% at 85% 30%, rgba(var(--os-secondary-rgb), .12), transparent 60%), #fff; max-width: 100%; } .os-hero-title { color: var(--os-ink); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; font-weight: 800; margin: 0 auto 18px; max-width: 820px; } .os-accent-word { color: var(--os-secondary); } .os-hero-subtitle { color: var(--os-ink-soft); font-size: 1.15em; max-width: 620px; margin: 0 auto 32px; line-height: 1.6; } .os-hero-bar { display: flex; align-items: center; gap: 8px; max-width: 540px; margin: 0 auto; background: #fff; border: 1px solid var(--os-border); border-radius: var(--os-radius-pill); padding: 6px; box-shadow: var(--os-shadow-card); } .os-hero-input { flex: 1; border: none; outline: none; background: transparent; padding: 10px 16px; font-size: .95em; color: var(--os-ink); min-width: 0; } .os-hero-bar .os-btn { flex-shrink: 0; } .os-hero-meta { margin: 18px 0 0; font-size: .82em; color: var(--os-ink-soft); } /* ---------- Section heading (shared by pricing/industries/steps) ---------- */ .os-section-heading { text-align: center; max-width: 640px; margin: 0 auto 48px; } .os-section-heading .os-eyebrow { justify-content: center; } .os-section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--os-ink); margin: 0 0 12px; } .os-section-subtitle { color: var(--os-ink-soft); font-size: 1.05em; margin: 0; } /* ---------- Features (legacy 4-card grid, still available) ---------- */ .os-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1160px; margin: 48px auto; padding: 0 24px; } .os-feature-card { border: 1px solid var(--os-border); border-radius: var(--os-radius-md); padding: 24px; background: #fff; } .os-feature-card h3 { margin-top: 0; color: var(--os-primary); } .os-feature-card p { color: var(--os-ink-soft); margin-bottom: 0; } /* ---------- Pricing ---------- */ .os-pricing-section { max-width: 1160px; margin: 0 auto; padding: 80px 24px; } .os-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; } .os-price-card { position: relative; background: #fff; border: 1px solid var(--os-border); border-radius: var(--os-radius-lg); padding: 32px 28px; box-shadow: var(--os-shadow-card); display: flex; flex-direction: column; } .os-price-card-recommended { border: 2px solid var(--os-secondary); transform: translateY(-8px); } .os-price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--os-secondary); color: #fff; font-size: .7em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--os-radius-pill); white-space: nowrap; } .os-price-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(var(--os-secondary-rgb), .12); display: flex; align-items: center; justify-content: center; font-size: 1.5em; margin-bottom: 18px; } .os-price-card h3 { margin: 0 0 6px; font-size: 1.25em; color: var(--os-ink); } .os-price-desc { color: var(--os-ink-soft); font-size: .92em; margin: 0 0 18px; min-height: 2.6em; } .os-price-amount { font-size: 1.5em; font-weight: 800; color: var(--os-ink); margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--os-border); } .os-price-amount span { font-size: .5em; font-weight: 500; color: var(--os-ink-soft); } .os-price-features { list-style: none; margin: 0 0 24px; padding: 0; flex-grow: 1; } .os-price-features li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: .92em; color: var(--os-ink); } .os-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--os-secondary-rgb), .15); color: var(--os-secondary); font-size: .7em; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* ---------- Industries / "who we help" grid ---------- */ .os-industries-section { max-width: 1160px; margin: 0 auto; padding: 80px 24px; } .os-industries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; } .os-industry-card { display: flex; align-items: center; gap: 12px; background: var(--os-surface-muted); border: 1px solid var(--os-border); border-radius: var(--os-radius-md); padding: 18px 20px; font-weight: 600; color: var(--os-ink); } .os-industry-icon { font-size: 1.4em; } /* ---------- Steps ---------- */ .os-steps-section { max-width: 1160px; margin: 0 auto; padding: 80px 24px; } .os-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .os-step-card { background: #fff; border: 1px solid var(--os-border); border-radius: var(--os-radius-lg); padding: 28px; } .os-step-number { display: inline-block; font-weight: 800; font-size: .85em; color: var(--os-primary); background: rgba(var(--os-primary-rgb), .10); padding: 4px 12px; border-radius: var(--os-radius-pill); margin-bottom: 16px; } .os-step-card h3 { margin: 0 0 8px; color: var(--os-ink); font-size: 1.1em; } .os-step-card p { margin: 0; color: var(--os-ink-soft); line-height: 1.6; } /* ---------- CTA band ---------- */ .os-cta-band { background: var(--os-ink); color: #fff; text-align: center; padding: 72px 24px; } .os-cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; } .os-cta-band p { color: rgba(255,255,255,.72); margin: 0 0 28px; font-size: 1.05em; } /* ---------- About / Contact (simple content pages) ---------- */ .os-about, .os-contact { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; line-height: 1.75; color: var(--os-ink); } .os-contact p { margin: 0 0 10px; } .os-contact .os-social a { margin-right: 14px; color: var(--os-primary); font-weight: 600; } .os-portal-missing { background: rgba(var(--os-secondary-rgb), .1); border: 1px solid rgba(var(--os-secondary-rgb), .35); color: var(--os-ink); padding: 14px 18px; border-radius: var(--os-radius-md); max-width: 640px; margin: 0 auto 24px; } /* ---------- Footer ---------- */ .os-site-footer { background: var(--os-ink); color: rgba(255,255,255,.85); } .os-site-footer-inner { max-width: 1160px; margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; } .os-footer-brand .os-logo-name { color: #fff; } .os-footer-brand .os-logo-tagline { color: rgba(255,255,255,.6); } .os-footer-blurb { color: rgba(255,255,255,.6); font-size: .92em; margin: 14px 0 0; max-width: 260px; } .os-footer-col h4 { color: #fff; font-size: .82em; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; } .os-footer-col ul { list-style: none; margin: 0; padding: 0; } .os-footer-col li { margin-bottom: 10px; font-size: .92em; } .os-footer-col a { color: rgba(255,255,255,.75); text-decoration: none; } .os-footer-col a:hover { color: var(--os-secondary); } .os-site-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); text-align: center; padding: 20px 24px; font-size: .82em; color: rgba(255,255,255,.55); } /* ---------- Responsive ---------- */ @media (max-width: 780px) { .os-site-header-inner { flex-wrap: wrap; gap: 14px; } .os-nav { order: 3; width: 100%; } .os-nav ul { flex-wrap: wrap; gap: 16px; } .os-hero-bar { flex-direction: column; border-radius: var(--os-radius-md); } .os-hero-bar .os-btn { width: 100%; } .os-hero-input { width: 100%; text-align: center; } .os-price-card-recommended { transform: none; } .os-site-footer-inner { grid-template-columns: 1fr; } }