/* Global UI typography Portal + Creator Editor should NOT inherit theme typography (e.g. Twenty Twenty-Five / Manrope) because it causes inconsistent navigation fonts between shell pages. */ body.scl-portal-body, body.scl-portal-body .scl-breakout, body.scl-portal-body .scl-shell, body.scl-portal-body .scl-global-nav, body.scl-portal-body .scl-portal-footer{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif} .scl-portal{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#111} .scl-portal__container{max-width:1440px;margin:0 auto;padding:24px} .scl-portal__hero{background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));border-bottom:1px solid rgba(0,0,0,.08)} .scl-portal__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7} .scl-portal__heroTop{display:flex;align-items:center;justify-content:space-between;gap:12px} .scl-portal__legalTop{font-size:13px;font-weight:600;text-decoration:none;color:#111;opacity:.9} .scl-portal__legalTop:hover{text-decoration:underline} .scl-portal__title{font-size:32px;line-height:1.15;margin:10px 0 12px} .scl-portal__subtitle{font-size:16px;line-height:1.6;max-width:780px;opacity:.9} .scl-portal__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px} .scl-portal__btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.16);text-decoration:none;color:#111;background:#fff} .scl-portal__btn--primary{border-color:rgba(0,0,0,.22);background:#111;color:#fff} .scl-portal__grid{padding:6px 0 28px} .scl-portal__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px} .scl-portal__card{background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:170px} .scl-portal__cardTitle{font-weight:700;font-size:15px} .scl-portal__cardDesc{font-size:13px;line-height:1.5;opacity:.85;flex:1} .scl-portal__cardCta{font-size:13px;font-weight:600;text-decoration:none} .scl-portal__cardCtaRow{margin-top:2px} .scl-portal__card--disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25)} /* RC25: Disable pointer events for all elements inside a disabled card. This prevents clicks on nested tags. */ .scl-portal__card--disabled *{pointer-events:none} .scl-portal__badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06);align-self:flex-start} .scl-portal__lpList{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px} .scl-portal__lpListTitle{font-size:12px;font-weight:700;opacity:.75;margin-bottom:6px} .scl-portal__lpUl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .scl-portal__lpLi{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .scl-portal__lpA{text-decoration:none;font-size:13px;font-weight:600;color:#111} .scl-portal__lpA:hover{text-decoration:underline} .scl-portal__lpMeta{font-size:12px;opacity:.65;white-space:nowrap} .scl-portal__muted{font-size:13px;opacity:.65} .scl-portal__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .scl-portal__metaBox{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:14px} .scl-portal__metaBox--wide{grid-column:1/-1} .scl-portal__metaTitle{font-weight:700;margin-bottom:6px} .scl-portal__metaText{font-size:13px;line-height:1.6;opacity:.9} .scl-portal__notice{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;font-size:13px} .scl-portal__notice--ok{border-color:rgba(0,0,0,.14)} .scl-portal__form{margin-top:12px} .scl-portal__formRow{display:flex;flex-direction:column;gap:6px;margin:10px 0} .scl-portal__check{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700} .scl-portal__formGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px} .scl-portal__field{display:flex;flex-direction:column;gap:6px;font-size:13px} .scl-portal__fieldLabel{font-weight:700;opacity:.85} .scl-portal__field input{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;font-size:14px} .scl-portal__formActions{margin-top:12px} .scl-portal__list{margin:8px 0 0 18px;padding:0;font-size:13px;line-height:1.6;opacity:.9} @media (max-width: 980px){.scl-portal__cards{grid-template-columns:repeat(2,1fr)}} @media (max-width: 560px){.scl-portal__cards{grid-template-columns:1fr}.scl-portal__meta{grid-template-columns:1fr}.scl-portal__title{font-size:26px}} @media (max-width: 980px){.scl-portal__formGrid{grid-template-columns:1fr}} /* ------------------------------------------------------------ Portal Dashboard (tile view) The portal dashboard markup uses `scl-dash-grid` + `scl-tile`. Without these rules, tiles fall back to normal block flow and appear “untereinander”. ------------------------------------------------------------ */ .scl-dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} @media (max-width: 980px){.scl-dash-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 560px){.scl-dash-grid{grid-template-columns:1fr}} .scl-tile{background:var(--scl-card-bg,#fff);border:1px solid var(--scl-border,rgba(0,0,0,.10));border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:170px} .scl-tile--wide{grid-column:1/-1} .scl-tile__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .scl-tile__title{font-weight:800;font-size:15px;line-height:1.2} .scl-tile__badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .scl-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06)} .scl-tile__body{font-size:13px;line-height:1.55;opacity:.95;flex:1} .scl-tile__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;font-weight:700} .scl-link{color:var(--scl-link,#111);text-decoration:none;font-weight:700} .scl-link:hover{text-decoration:underline} .scl-link--muted{opacity:.7;font-weight:700} .scl-miniList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .scl-miniList li{display:flex;gap:10px;align-items:baseline;justify-content:space-between} .scl-miniList li a{flex:1} .scl-muted{font-size:12px;opacity:.7} .scl-tile__statRow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0} @media (max-width: 560px){.scl-tile__statRow{grid-template-columns:1fr}} .scl-tile__stat{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;display:flex;justify-content:space-between;gap:10px} .scl-tile__stat strong{font-weight:800} .scl-tile__details{margin-top:8px;border-top:1px solid rgba(0,0,0,.08);padding-top:8px} .scl-tile__details summary{cursor:pointer;font-weight:800;font-size:13px} .scl-tile__details--dock{margin-top:10px} .scl-tile__dockBody{margin-top:10px} .scl-newsDock{margin-top:14px} /* Footer */ .scl-portal-footer{border-top:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02)} .scl-portal-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:14px;padding-top:18px;padding-bottom:22px} .scl-portal-footer__title{font-weight:800;font-size:13px;margin-bottom:8px} .scl-portal-footer__muted{font-size:12px;opacity:.7} .scl-portal-footer__ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .scl-portal-footer__ul a{color:#111;text-decoration:none;font-size:13px;opacity:.85} .scl-portal-footer__ul a:hover{text-decoration:underline;opacity:1} @media (max-width: 980px){.scl-portal-footer__grid{grid-template-columns:1fr 1fr}} /* * Hide the default WordPress theme header on pages that load the Schnappnot * portal styles. Our plugin renders its own navigation bar at the top of * each portal‑side page (login, register, onboarding, creator dashboard, * editor, forum, etc.). Without hiding the theme header, two headers * would appear on these pages. This rule targets the block template * part header used by modern themes (e.g. Twenty Twenty‑four). Because * portal.css is enqueued only on Schnappnot pages via SCL_Portal::maybe_enqueue_assets * or by the global nav partial, this does not affect other site pages. */ .wp-site-blocks > header.wp-block-template-part { display: none !important; } /* Hide theme "Powered by WordPress" credits only on pages that embed [scl_portal]. This avoids global theme changes while respecting portal branding requirements. */ body.scl-portal-shortcode .wp-block-site-generator{display:none!important} body.scl-portal-shortcode .powered-by-wordpress{display:none!important} body.scl-portal-shortcode .site-info a[href*="wordpress.org"]{display:none!important} /* ----------------------------------------------------------------- Global navigation (Portal + Creator pages) A simple horizontal navigation bar that appears on portal pages to mirror the header found on Creator Editor pages. It contains links to the Creator hub, the landingpage editor, login/onboarding/register pages and the legal page. The bar sits above the hero section and spans the container width. On smaller screens the items wrap gracefully. */ /* IMPORTANT: do NOT use the `background:` shorthand here. It would wipe out `background-image` injected from the LP theme (LP ID 6). Use background-color only. */ .scl-global-nav{background-color:#fff;border-bottom:1px solid rgba(0,0,0,.08);margin:0 0 18px 0;font-size:14px;font-weight:600;font-family:inherit} .scl-global-nav *, .scl-global-nav a{font-family:inherit} .scl-global-nav.alignfull{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);} .scl-global-nav.alignfull{max-width:none;} .scl-global-nav .scl-portal__container{max-width:none;width:100%;margin:0;padding-left:24px;padding-right:24px;} .scl-global-nav .scl-portal__container{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-top:12px;padding-bottom:12px;gap:10px} .scl-global-nav__row{display:flex;align-items:center;justify-content:flex-start;gap:16px} .scl-global-nav__row--bottom{justify-content:center} .scl-global-nav__list{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0} /* RC38+: Responsive burger menu Portal must mirror the burger used on Creator Landing pages (.nav-burger). We re-use the same visual language (pill button, subtle blur, strong hit area). */ .nav-burger{display:none;background:var(--scl-btn-bg,rgba(255,255,255,.92));color:var(--scl-btn-text,#111827);border:1px solid var(--scl-btn-border,rgba(0,0,0,.12));padding:7px 12px;border-radius:999px;cursor:pointer;font-size:16px;line-height:1;font-weight:900;backdrop-filter: blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.18)} .nav-burger:hover{opacity:.85} .nav-burger:focus-visible{outline:2px solid rgba(59,130,246,.9);outline-offset:2px} .nav-burger span{pointer-events:none;display:inline-block} /* Portal theme: when a header background image is present (from LP theme source), size the header responsively so the image is actually visible and scales on mobile. NOTE: we deliberately do NOT define ::before here because the shell injects a gradient overlay inline (following LP6). */ .scl-global-nav{background-color:var(--scl-card-bg,#fff);background-repeat:no-repeat;background-size:cover;background-position:center center} .scl-global-nav.scl-nav--has-bg{position:relative;min-height:var(--scl-nav-minh,140px);border-bottom:1px solid rgba(0,0,0,.18)} .scl-global-nav.scl-nav--has-bg .scl-portal__container{position:relative;min-height:var(--scl-nav-minh,140px);padding-top:var(--scl-nav-pad,28px);padding-bottom:var(--scl-nav-pad,28px);justify-content:space-between} .scl-global-nav.scl-nav--has-bg a{color:#fff} .scl-global-nav.scl-nav--has-bg a:hover{text-decoration:underline} /* When the portal header uses a background image, the burger must remain legible. */ .scl-global-nav.scl-nav--has-bg .nav-burger{background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.25)} /* Keep the portal breakpoint aligned with the Landingpage header breakpoint. Landingpages use 820px as the canonical switch for burger/mobile header rules. Using the same breakpoint avoids "looks different" regressions between LP6 and portal pages. */ @media (max-width: 820px){ .scl-global-nav__row--top{display:flex;justify-content:flex-start} .scl-global-nav__row--bottom{display:none} .nav-burger{display:inline-flex;align-items:center;justify-content:center} /* Keep header height stable: hide the in-flow desktop list on mobile */ .scl-global-nav__list--desktop{display:none !important} /* Landingpages-style menu layer */ body.scl-nav-layer-open{overflow:hidden} .scl-nav-layer[hidden]{display:none !important} .scl-nav-layer{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:rgba(0,0,0,.45)} .scl-nav-panel{width:min(92vw,420px);margin-top:78px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);backdrop-filter: blur(12px);box-shadow:0 20px 60px rgba(0,0,0,.35)} /* Default: light panel */ .scl-nav-panel{background:rgba(255,255,255,.92);color:#111827} .scl-nav-panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06)} .scl-nav-panel__title{font-weight:800;font-size:13px;letter-spacing:.2px;opacity:.85} .scl-nav-panel__close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.04);color:inherit;cursor:pointer;line-height:1;font-size:20px} .scl-nav-panel__close:hover{filter:brightness(0.98)} .scl-nav-panel__close:focus-visible{outline:2px solid rgba(59,130,246,.9);outline-offset:2px} .scl-nav-layer__list{padding:12px 14px} .scl-nav-layer__list a{border-radius:14px;background:rgba(0,0,0,.03)} /* When the header uses a background image, use a darker panel for contrast */ .scl-global-nav.scl-nav--has-bg .scl-nav-panel{background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.22)} .scl-global-nav.scl-nav--has-bg .scl-nav-panel__head{border-bottom-color:rgba(255,255,255,.14)} .scl-global-nav.scl-nav--has-bg .scl-nav-panel__close{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08)} .scl-global-nav.scl-nav--has-bg .scl-nav-layer__list a{background:rgba(255,255,255,.06)} .scl-global-nav.scl-nav--has-bg .scl-nav-layer__list a{border-color:rgba(255,255,255,.14)} } @media (min-width: 821px){ /* Ensure nav items are visible and burger hidden on wide screens */ /* Keep the menu on ONE line on desktop to avoid the "one line higher"/wrap jitter. If items exceed width, allow horizontal scroll instead of wrapping. */ .scl-global-nav__list{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch} .scl-global-nav__list::-webkit-scrollbar{height:6px} .scl-global-nav__list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)} .nav-burger{display:none} /* Desktop: burger row is mobile-only. */ .scl-global-nav__row--top{display:none} /* Desktop: keep menu in the bottom row and centered; header height remains stable. */ .scl-global-nav__row--bottom{justify-content:center} } .scl-global-nav:not(.scl-nav--has-bg) .scl-global-nav__list a{color:#111827;text-decoration:none;opacity:.85} .scl-global-nav.scl-nav--has-bg .scl-global-nav__list a{color:#fff;text-decoration:none;opacity:.92} .scl-global-nav__list a:hover{text-decoration:underline;opacity:1} /* * RC33: Hide the default WordPress header and footer on all portal‑side * pages. Without this rule, the active block theme’s header and footer * (wrapped in
and *