/* ============================================================ OptionsPlay Developer Docs — shared stylesheet Single source of brand truth for docs.optionsplay.com. Tokens lifted from the in-app design system (OptionsPlayWidgets/documents/design-system-palette.html) Chrome (header / hero / CTA / footer) follows the marketing landing language (OptionsPlayWidgets/documents/marketing-landing-kit/DESIGN-GUIDE.md) Pages link this and should NOT redefine brand colors locally. Light mode only by design — tokens are named so a dark theme can be layered later without rework. ============================================================ */ :root { /* ---- Brand ramps ---- */ --op-brand-green-900:#1a2e15; --op-brand-green-800:#2d4a1e; --op-brand-green-700:#3d6129; --op-brand-green-600:#4f7a34; --op-brand-green-500:#619640; --op-brand-green-400:#7ac143; --op-brand-green-300:#94cc66; --op-brand-green-200:#aed788; --op-brand-green-100:#c8e3aa; --op-brand-green-50:#e3f0d4; --op-brand-blue-900:#001f3f; --op-brand-blue-800:#003056; --op-brand-blue-700:#00416d; --op-brand-blue-600:#005284; --op-brand-blue-500:#00639b; --op-brand-blue-400:#0074b2; --op-brand-blue-300:#3390c1; --op-brand-blue-200:#66acd0; --op-brand-blue-100:#99c8df; --op-brand-blue-50:#cce4ef; /* ---- Neutrals ---- */ --op-neutral-900:#111827; --op-neutral-800:#1f2937; --op-neutral-700:#374151; --op-neutral-600:#4b5563; --op-neutral-500:#6b7280; --op-neutral-400:#9ca3af; --op-neutral-300:#d1d5db; --op-neutral-200:#e5e7eb; --op-neutral-100:#f3f4f6; --op-neutral-50:#f9fafb; --op-neutral-0:#ffffff; /* ---- Semantic (used by API reference: method badges, status) ---- */ --op-success-600:#059669; --op-success-500:#10b981; --op-success-100:#d1fae5; --op-success-50:#ecfdf5; --op-error-600:#dc2626; --op-error-500:#ef4444; --op-error-100:#fee2e2; --op-error-50:#fef2f2; --op-warning-600:#d97706; --op-warning-500:#f59e0b; --op-warning-100:#fef3c7; --op-warning-50:#fffbeb; --op-info-600:#4f46e5; --op-info-500:#6366f1; --op-info-100:#e0e7ff; --op-info-50:#eef2ff; /* ---- Functional aliases ---- */ --op-text-primary:var(--op-neutral-900); --op-text-secondary:var(--op-neutral-500); --op-text-tertiary:var(--op-neutral-400); --op-bg-primary:var(--op-neutral-0); --op-bg-secondary:var(--op-neutral-50); --op-bg-tertiary:var(--op-neutral-100); --op-border-default:var(--op-neutral-200); --op-border-subtle:var(--op-neutral-100); --op-border-emphasis:var(--op-neutral-300); --op-primary:var(--op-brand-green-600); --op-primary-hover:var(--op-brand-green-700); --op-primary-active:var(--op-brand-green-800); --op-primary-light:var(--op-brand-green-100); /* ---- Signature gradients (landing language) ---- */ --op-hero-gradient:linear-gradient(135deg, #003056 0%, #3d6129 100%); --op-cta-gradient:linear-gradient(135deg, #7ac143, #4f7a34); --op-highlight-gradient:linear-gradient(135deg, #7ac143, #aed788); /* ---- Shape ---- */ --op-radius-md:6px; --op-radius-lg:8px; --op-radius-xl:12px; /* ---- Back-compat aliases for pages still using the old names ---- (lets a page link this sheet before its inline vars are fully removed) */ --primary:var(--op-primary); --primary-dark:var(--op-primary-active); --accent:var(--op-brand-green-400); --text:var(--op-text-primary); --text-light:var(--op-text-secondary); --bg:var(--op-bg-primary); --bg-alt:var(--op-bg-secondary); --border:var(--op-border-default); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; line-height:1.6; color:var(--op-text-primary); background:var(--op-bg-primary); -webkit-font-smoothing:antialiased; } a { color:var(--op-primary); } /* ============================================================ Header — brand bar with logo assets (persistent across pages) ============================================================ */ header { background:var(--op-hero-gradient); color:#fff; padding:1rem 2rem; box-shadow:0 2px 10px rgba(0,0,0,0.1); position:sticky; top:0; z-index:100; } header nav { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:1rem; } header .logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-size:1.25rem; font-weight:600; } header .logo img { display:block; } header .logo .logo-ball { height:30px; width:auto; } header .logo .logo-wordmark { height:20px; width:auto; } /* fallback when a page keeps a text logo */ header .logo span { opacity:0.82; font-weight:400; } header .nav-links { display:flex; align-items:center; } header .nav-links a { color:#fff; text-decoration:none; margin-left:2rem; opacity:0.9; transition:opacity .2s; font-weight:500; } header .nav-links a:hover { opacity:1; } /* ============================================================ Hero — diagonal blue→green, white headline, green highlight ============================================================ */ .hero { background:var(--op-hero-gradient); color:#fff; padding:5rem 2rem; text-align:center; } .hero-content { max-width:820px; margin:0 auto; } .hero h1 { font-size:3rem; line-height:1.1; letter-spacing:-0.5px; margin-bottom:1rem; color:#fff; } .highlight { background:var(--op-highlight-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .hero p { font-size:1.25rem; color:rgba(255,255,255,0.82); margin-bottom:2rem; } .hero .cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } /* ============================================================ Buttons — 8px rounded rectangle, green-gradient primary (no pills) ============================================================ */ .btn { padding:0.8rem 2rem; border-radius:var(--op-radius-lg); text-decoration:none; font-weight:600; transition:all .2s; display:inline-block; border:2px solid transparent; } .btn-primary { background:var(--op-cta-gradient); color:#fff; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(122,193,67,0.35); } /* Default secondary = light-background style (visible on any white section). */ .btn-secondary { background:#fff; color:var(--op-primary); border-color:var(--op-primary); } .btn-secondary:hover { background:var(--op-primary); color:#fff; } /* On the dark gradient hero, secondary flips to a white outline. */ .hero .btn-secondary { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.7); } .hero .btn-secondary:hover { background:#fff; color:var(--op-brand-blue-800); border-color:#fff; } /* ============================================================ API console — shared Authorize bar (api-reference.html) ============================================================ */ .op-authbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--op-bg-secondary); border:1px solid var(--op-border-default); border-radius:var(--op-radius-lg); padding:14px 16px; margin:0 0 1.5rem; } .op-authbar label { font-weight:600; font-size:0.9rem; color:var(--op-text-primary); } .op-authbar input { flex:1 1 280px; min-width:200px; padding:0.55rem 0.7rem; font:inherit; border:1px solid var(--op-border-emphasis); border-radius:var(--op-radius-md); } .op-authbar button { padding:0.5rem 1rem; border-radius:var(--op-radius-md); font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent; } .op-authbar .op-auth-save { background:var(--op-primary); color:#fff; } .op-authbar .op-auth-save:hover { background:var(--op-primary-hover); } .op-authbar .op-auth-clear { background:transparent; color:var(--op-text-secondary); border-color:var(--op-border-emphasis); } .op-authbar .op-auth-clear:hover { color:var(--op-text-primary); border-color:var(--op-text-tertiary); } .op-authbar .op-auth-status { font-size:0.85rem; font-weight:600; color:var(--op-text-secondary); } .op-authbar .op-auth-status.ok { color:var(--op-primary); } .op-authbar .op-auth-note { flex-basis:100%; margin:0; font-size:0.8rem; color:var(--op-text-tertiary); } /* ============================================================ Content ============================================================ */ /* Landing content wrapper. Deliberately NOT named `.container` — that name is reused by the app-layout pages (sidebar/three-column) and by Bootstrap on the demo page, so a generic `.container` here would collide. Landing pages opt in with `.op-shell`. */ .op-shell { max-width:1200px; margin:0 auto; padding:4rem 2rem; } .section { margin-bottom:4rem; } .section h2 { font-size:2rem; margin-bottom:1rem; color:var(--op-text-primary); letter-spacing:-0.3px; } .section > p { font-size:1.1rem; color:var(--op-text-secondary); margin-bottom:2rem; } /* Resource cards (landing). Namespaced `.op-card` so the shared sheet doesn't bleed into Bootstrap's `.card` on the demo page (padding/border/hover). */ .resources { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem; } .op-card { background:var(--op-bg-primary); border:1px solid var(--op-border-default); border-radius:var(--op-radius-xl); padding:2rem; transition:all .2s; text-decoration:none; color:inherit; display:block; } .op-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); border-color:var(--op-primary); } .card-icon { font-size:2.5rem; margin-bottom:1rem; } .op-card h3 { font-size:1.5rem; margin-bottom:0.75rem; color:var(--op-text-primary); } .op-card p { color:var(--op-text-secondary); margin-bottom:1rem; font-size:1rem; } .op-card .learn-more { color:var(--op-primary); font-weight:600; display:inline-flex; align-items:center; gap:0.5rem; } .op-card .learn-more::after { content:"→"; transition:transform .2s; } .op-card:hover .learn-more::after { transform:translateX(4px); } /* Features grid */ .features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem; } .feature { text-align:center; } .feature-icon { font-size:3rem; margin-bottom:1rem; } .feature h3 { font-size:1.25rem; margin-bottom:0.5rem; color:var(--op-text-primary); } .feature p { color:var(--op-text-secondary); font-size:0.95rem; } /* Quick links */ .quick-links { background:var(--op-bg-secondary); border:1px solid var(--op-border-subtle); border-radius:var(--op-radius-xl); padding:2rem; margin-top:2rem; } .quick-links h3 { font-size:1.25rem; margin-bottom:1rem; color:var(--op-text-primary); } .quick-links ul { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; } .quick-links li a { color:var(--op-primary); text-decoration:none; font-weight:500; display:flex; align-items:center; gap:0.5rem; } .quick-links li a:hover { text-decoration:underline; } .quick-links li a::before { content:"→"; color:var(--op-brand-green-400); } /* ============================================================ Footer — deep brand green (landing language) ============================================================ */ footer { background:var(--op-brand-green-900); color:rgba(255,255,255,0.82); padding:3rem 2rem; margin-top:4rem; } .footer-content { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; } .footer-section h4 { font-size:1rem; margin-bottom:1rem; color:#fff; } .footer-section ul { list-style:none; } .footer-section ul li { margin-bottom:0.5rem; } .footer-section ul li a { color:rgba(255,255,255,0.82); text-decoration:none; transition:color .2s; } .footer-section ul li a:hover { color:var(--op-brand-green-400); } .footer-bottom { max-width:1200px; margin:2rem auto 0; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.15); text-align:center; color:rgba(255,255,255,0.6); font-size:0.875rem; } /* Links in a plain (non-structured) footer — light on the deep-green ground. Structured `.footer-section` links are more specific and keep their own style. */ footer a { color:var(--op-brand-green-200); text-decoration:none; } footer a:hover { color:#fff; } /* Doc-page inner footers (a small credit