/* * OSB Build Page — CSS Variable Theming System * ───────────────────────────────────────────── * Default theme: Dark (OSB brand — black + lime) * * To swap themes, add a class to the element: * * .osb-build-theme-light — white card, blue + orange (Alpha-1 style) * .osb-build-theme-warm — cream background, navy + coral * .osb-build-theme-ocean — deep teal, electric cyan * * Or define your own by overriding the variables below. */ /* ── Default: Dark (OSB Brand) ───────────────────────────── */ :root, body.osb-build-page { --ob-page-bg: #0a0a0a; --ob-card-bg: #111111; --ob-card-border: rgba(255,255,255,.08); --ob-card-shadow: 0 24px 80px rgba(0,0,0,.6); --ob-card-radius: 24px; --ob-nav-bg: rgba(10,10,10,.95); --ob-nav-border: rgba(255,255,255,.08); --ob-nav-text: rgba(255,255,255,.6); --ob-nav-link-hover: rgba(255,255,255,.06); --ob-nav-cta-bg: rgba(170,255,96,1); --ob-nav-cta-text: #0a0a0a; --ob-headline: #ffffff; --ob-text: rgba(255,255,255,.75); --ob-muted: rgba(255,255,255,.4); --ob-eyebrow-bg: rgba(170,255,96,.12); --ob-eyebrow-fg: rgba(170,255,96,1); --ob-pill-bg: rgba(255,255,255,.05); --ob-pill-border: rgba(255,255,255,.1); --ob-pill-text: rgba(255,255,255,.7); --ob-upload-bg: rgba(255,255,255,.03); --ob-upload-border: rgba(170,255,96,.25); --ob-upload-hover-bg: rgba(170,255,96,.07); --ob-upload-hover-bdr: rgba(170,255,96,.55); --ob-upload-icon: rgba(170,255,96,.7); --ob-upload-title: #ffffff; --ob-upload-sub: rgba(255,255,255,.45); --ob-btn-bg: rgba(170,255,96,1); --ob-btn-text: #0a0a0a; --ob-btn-shadow: 0 8px 24px rgba(170,255,96,.25); --ob-btn-hover-shadow: 0 12px 32px rgba(170,255,96,.35); --ob-bar-track: rgba(255,255,255,.08); --ob-bar-fill: rgba(170,255,96,1); --ob-auth-bg: rgba(255,255,255,.04); --ob-auth-border: rgba(255,255,255,.1); --ob-auth-secondary: rgba(255,255,255,.08); --ob-auth-secondary-bdr: rgba(255,255,255,.15); --ob-auth-secondary-text: rgba(255,255,255,.75); --ob-link: rgba(170,255,96,.8); --ob-link-hover: rgba(170,255,96,1); --ob-footer-text: rgba(255,255,255,.25); } /* ── Theme: Light (Alpha-1 / Blue + Orange) ──────────────── */ body.osb-build-theme-light { --ob-page-bg: #f0f4f8; --ob-card-bg: #ffffff; --ob-card-border: #e5edf5; --ob-card-shadow: 0 18px 50px rgba(15,40,70,.09); --ob-nav-bg: rgba(255,255,255,.96); --ob-nav-border: rgba(229,237,245,.8); --ob-nav-text: #42617d; --ob-nav-link-hover: #eef7ff; --ob-nav-cta-bg: linear-gradient(90deg,#0f5d95,#f7931e); --ob-nav-cta-text: #ffffff; --ob-headline: #0e2e4f; --ob-text: #42617d; --ob-muted: #627d96; --ob-eyebrow-bg: #eef7ff; --ob-eyebrow-fg: #0c5e97; --ob-pill-bg: #ffffff; --ob-pill-border: #d9e6f2; --ob-pill-text: #134a75; --ob-upload-bg: #f7fbff; --ob-upload-border: #c9dff0; --ob-upload-hover-bg: #eef7ff; --ob-upload-hover-bdr: #0f5d95; --ob-upload-icon: #0f5d95; --ob-upload-title: #0e2e4f; --ob-upload-sub: #627d96; --ob-btn-bg: linear-gradient(90deg,#0f5d95,#1a7fc4); --ob-btn-text: #ffffff; --ob-btn-shadow: 0 8px 24px rgba(18,68,110,.18); --ob-btn-hover-shadow: 0 12px 32px rgba(18,68,110,.25); --ob-bar-track: #d0e9f8; --ob-bar-fill: linear-gradient(90deg,#0f5d95,#f7931e); --ob-auth-bg: #f7fbff; --ob-auth-border: #e5edf5; --ob-auth-secondary: #ffffff; --ob-auth-secondary-bdr: #d9e6f2; --ob-auth-secondary-text: #42617d; --ob-link: #0f5d95; --ob-link-hover: #0a4878; --ob-footer-text: #a0b4c8; } /* ── Theme: Warm (cream + navy/coral) ────────────────────── */ body.osb-build-theme-warm { --ob-page-bg: #f5f0e8; --ob-card-bg: #fffdf8; --ob-card-border: #e8dcc8; --ob-card-shadow: 0 18px 50px rgba(26,14,6,.08); --ob-nav-bg: rgba(255,253,248,.95); --ob-nav-border: #e8dcc8; --ob-nav-text: #5c4a30; --ob-nav-link-hover: rgba(232,100,58,.06); --ob-nav-cta-bg: #1a1a2e; --ob-nav-cta-text: #ffffff; --ob-headline: #1a1a2e; --ob-text: #5c4a30; --ob-muted: #8a7060; --ob-eyebrow-bg: rgba(232,100,58,.1); --ob-eyebrow-fg: #c04a1e; --ob-pill-bg: #fff8ee; --ob-pill-border: #e8cba8; --ob-pill-text: #7c3800; --ob-upload-bg: #fff8ee; --ob-upload-border: #e8cba8; --ob-upload-hover-bg: rgba(232,100,58,.06); --ob-upload-hover-bdr: #e8643a; --ob-upload-icon: #e8643a; --ob-upload-title: #1a1a2e; --ob-upload-sub: #8a7060; --ob-btn-bg: linear-gradient(90deg,#1a1a2e,#2d2d50); --ob-btn-text: #ffffff; --ob-btn-shadow: 0 8px 24px rgba(26,26,46,.22); --ob-btn-hover-shadow: 0 12px 32px rgba(26,26,46,.3); --ob-bar-track: #e8dcc8; --ob-bar-fill: #e8643a; --ob-auth-bg: #fff8ee; --ob-auth-border: #e8dcc8; --ob-auth-secondary: #fffdf8; --ob-auth-secondary-bdr: #e8dcc8; --ob-auth-secondary-text: #5c4a30; --ob-link: #e8643a; --ob-link-hover: #c04a1e; --ob-footer-text: #c8b49a; } /* ── Theme: Ocean (deep teal + electric cyan) ─────────────── */ body.osb-build-theme-ocean { --ob-page-bg: #06131a; --ob-card-bg: #0a1f28; --ob-card-border: rgba(0,210,210,.12); --ob-card-shadow: 0 24px 80px rgba(0,0,0,.7); --ob-nav-bg: rgba(6,19,26,.95); --ob-nav-border: rgba(0,210,210,.1); --ob-nav-text: rgba(255,255,255,.55); --ob-nav-link-hover: rgba(0,210,210,.06); --ob-nav-cta-bg: #00d2d2; --ob-nav-cta-text: #06131a; --ob-headline: #e0f8f8; --ob-text: rgba(224,248,248,.7); --ob-muted: rgba(224,248,248,.4); --ob-eyebrow-bg: rgba(0,210,210,.12); --ob-eyebrow-fg: #00d2d2; --ob-pill-bg: rgba(0,210,210,.06); --ob-pill-border: rgba(0,210,210,.15); --ob-pill-text: rgba(224,248,248,.75); --ob-upload-bg: rgba(0,210,210,.04); --ob-upload-border: rgba(0,210,210,.2); --ob-upload-hover-bg: rgba(0,210,210,.08); --ob-upload-hover-bdr: rgba(0,210,210,.6); --ob-upload-icon: #00d2d2; --ob-upload-title: #e0f8f8; --ob-upload-sub: rgba(224,248,248,.45); --ob-btn-bg: #00d2d2; --ob-btn-text: #06131a; --ob-btn-shadow: 0 8px 24px rgba(0,210,210,.25); --ob-btn-hover-shadow: 0 12px 32px rgba(0,210,210,.4); --ob-bar-track: rgba(0,210,210,.1); --ob-bar-fill: #00d2d2; --ob-auth-bg: rgba(0,210,210,.05); --ob-auth-border: rgba(0,210,210,.12); --ob-auth-secondary: rgba(255,255,255,.04); --ob-auth-secondary-bdr: rgba(0,210,210,.15); --ob-auth-secondary-text: rgba(224,248,248,.7); --ob-link: #00d2d2; --ob-link-hover: #00eeee; --ob-footer-text: rgba(224,248,248,.2); } /* ════════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════════ */ html, body.osb-build-page { margin: 0; padding: 0; min-height: 100%; background: var(--ob-page-bg); font-family: system-ui, -apple-system, Arial, sans-serif; } body.osb-build-page #wpadminbar { position: fixed; } /* ── Nav ─────────────────────────────────────────────────── */ .ob-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--ob-nav-bg); border-bottom: 1px solid var(--ob-nav-border); backdrop-filter: blur(10px); box-sizing: border-box; } body.osb-build-page.admin-bar .ob-nav { top: 32px; } .ob-nav-logo img { height: 30px; width: auto; display: block; } .ob-nav-logo { text-decoration: none; } .ob-nav-links { display: flex; align-items: center; gap: 6px; } .ob-nav-link { padding: 7px 14px; border-radius: 8px; color: var(--ob-nav-text); font-size: 0.86rem; font-weight: 600; text-decoration: none; transition: background .15s; } .ob-nav-link:hover { background: var(--ob-nav-link-hover); } .ob-nav-cta { padding: 8px 16px; border-radius: 8px; background: var(--ob-nav-cta-bg); color: var(--ob-nav-cta-text) !important; font-size: 0.86rem; font-weight: 700; text-decoration: none; transition: opacity .15s; } .ob-nav-cta:hover { opacity: .85; } /* ── Page shell ─────────────────────────────────────────── */ .ob-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 20px 48px; box-sizing: border-box; } body.osb-build-page.admin-bar .ob-shell { padding-top: 132px; } /* ── Card ────────────────────────────────────────────────── */ .ob-card { width: 100%; max-width: 680px; background: var(--ob-card-bg); border: 1px solid var(--ob-card-border); border-radius: var(--ob-card-radius); box-shadow: var(--ob-card-shadow); padding: 44px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; } /* ── Copy block ─────────────────────────────────────────── */ .ob-eyebrow { display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 999px; background: var(--ob-eyebrow-bg); color: var(--ob-eyebrow-fg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .ob-headline { margin: 0 0 14px; font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 800; line-height: 1.1; color: var(--ob-headline); } .ob-desc { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.7; color: var(--ob-text); } .ob-logo-wrap { text-align: center; } .ob-logo { display: block; margin: 0 auto; max-width: 360px; width: 100%; height: auto; } .ob-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .ob-pill { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; background: var(--ob-pill-bg); border: 1px solid var(--ob-pill-border); color: var(--ob-pill-text); font-size: 12px; font-weight: 700; } .ob-pill-check { color: var(--ob-eyebrow-fg); font-size: 13px; } /* ── Auth gate (shown when not logged in) ───────────────── */ .ob-auth-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 32px 24px; background: var(--ob-auth-bg); border: 1px solid var(--ob-auth-border); border-radius: 16px; } .ob-auth-gate-headline { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ob-headline); } .ob-auth-gate-sub { margin: -8px 0 0; font-size: 0.9rem; color: var(--ob-muted); max-width: 400px; line-height: 1.6; } .ob-auth-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .ob-auth-primary { display: inline-block; padding: 12px 28px; border-radius: 10px; background: var(--ob-btn-bg); color: var(--ob-btn-text) !important; font-size: 0.9rem; font-weight: 800; text-decoration: none; box-shadow: var(--ob-btn-shadow); transition: box-shadow .18s, opacity .18s; } .ob-auth-primary:hover { box-shadow: var(--ob-btn-hover-shadow); opacity: .92; } .ob-auth-secondary { display: inline-block; padding: 12px 24px; border-radius: 10px; background: var(--ob-auth-secondary); border: 1px solid var(--ob-auth-secondary-bdr); color: var(--ob-auth-secondary-text) !important; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: opacity .18s; } .ob-auth-secondary:hover { opacity: .8; } /* ── Upload zone ────────────────────────────────────────── */ .ob-upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: 36px 24px; border: 2px dashed var(--ob-upload-border); border-radius: 18px; background: var(--ob-upload-bg); cursor: pointer; text-align: center; box-sizing: border-box; transition: border-color .18s, background .18s; overflow: hidden; } .ob-upload-zone:hover, .ob-upload-zone.is-drag-over { border-color: var(--ob-upload-hover-bdr); background: var(--ob-upload-hover-bg); } .ob-upload-icon { font-size: 48px; line-height: 1; margin-bottom: 12px; pointer-events: none; filter: drop-shadow(0 0 12px var(--ob-upload-icon)); } .ob-upload-title { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--ob-upload-title); pointer-events: none; } .ob-upload-sub { margin: 0 0 20px; font-size: 0.82rem; color: var(--ob-upload-sub); pointer-events: none; } .ob-upload-btn { position: relative; z-index: 2; display: inline-block; padding: 11px 28px; border-radius: 10px; background: var(--ob-btn-bg); color: var(--ob-btn-text) !important; font-size: 0.88rem; font-weight: 800; text-decoration: none; cursor: pointer; border: none; box-shadow: var(--ob-btn-shadow); transition: box-shadow .18s, opacity .18s; } .ob-upload-btn:hover { box-shadow: var(--ob-btn-hover-shadow); opacity: .9; } .ob-no-content-link { position: relative; z-index: 2; margin-top: 12px; font-size: 0.78rem; color: var(--ob-muted); text-decoration: none; font-weight: 600; pointer-events: auto; transition: color .15s; } .ob-no-content-link:hover { color: var(--ob-link-hover); } /* ── Progress bar ────────────────────────────────────────── */ .ob-progress { display: none; width: 100%; margin-top: 16px; } .ob-progress-track { height: 5px; border-radius: 3px; background: var(--ob-bar-track); overflow: hidden; } .ob-progress-fill { height: 100%; border-radius: 3px; background: var(--ob-bar-fill); width: 0%; transition: width .3s ease; } .ob-progress-msg { margin: 8px 0 0; font-size: 0.8rem; color: var(--ob-muted); } /* ── Save-for-later hint (guests only) ───────────────────── */ .ob-save-hint { margin: 14px 0 0; text-align: center; font-size: 0.85rem; color: var(--ob-muted); } .ob-save-hint a { color: var(--ob-link); text-decoration: none; font-weight: 700; transition: color .15s; } .ob-save-hint a:hover { color: var(--ob-link-hover); } /* ── Footer ──────────────────────────────────────────────── */ .ob-footer { text-align: center; font-size: 11px; color: var(--ob-footer-text); padding: 24px 0 12px; } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 600px) { .ob-card { padding: 28px 22px; } .ob-shell { padding: 90px 14px 32px; } .ob-nav { padding: 0 16px; } }