/* VideographyWP — design tokens + components. See .claude/skills/videographywp-design/ */ :root { --vwp-red-50:#FDECEC; --vwp-red-100:#FAD2D1; --vwp-red-500:#E8312E; --vwp-red-600:#D11F1C; --vwp-red-700:#A81715; --vwp-ink-900:#2A2A2A; --vwp-ink-800:#3A3A3A; --vwp-ink-700:#4A4A4A; --vwp-ink-500:#767676; --vwp-ink-300:#D4D4D4; --vwp-ink-200:#E7E7E7; --vwp-ink-100:#F4F4F4; --vwp-ink-50:#FAFAFA; --vwp-white:#FFFFFF; --vwp-radius-sm:6px; --vwp-radius:10px; --vwp-radius-lg:16px; --vwp-radius-pill:999px; --vwp-shadow-sm:0 1px 2px rgba(42,42,42,.06); --vwp-shadow:0 4px 16px rgba(42,42,42,.08); --vwp-shadow-lg:0 12px 32px rgba(42,42,42,.12); } /* Badge */ .vwp-badge{display:inline-block;background:var(--vwp-red-50);color:var(--vwp-red-700); border-radius:var(--vwp-radius-pill);padding:4px 12px;font-size:.8rem;text-transform:uppercase; letter-spacing:.04em;font-weight:600;line-height:1.6} /* Card (applied to core group/column via .vwp-card className). No height:100% — equal heights in grids come from the flex container's align-items:stretch; forcing 100% breaks cards stacked inside a column. */ .vwp-card{background:var(--vwp-white);border:1px solid var(--vwp-ink-200);border-radius:var(--vwp-radius); box-shadow:var(--vwp-shadow-sm);padding:24px;transition:box-shadow .15s ease, transform .15s ease} .vwp-card:hover{box-shadow:var(--vwp-shadow);transform:translateY(-2px)} /* Surface section */ .vwp-surface{background:var(--vwp-ink-100)} .vwp-ink-section{background:var(--vwp-ink-900)} /* FAQ via details/summary inside wp:html */ .vwp-faq details{border-bottom:1px solid var(--vwp-ink-200);padding:16px 0} .vwp-faq summary{cursor:pointer;font-weight:600;color:var(--vwp-ink-900);font-size:1.0625rem;list-style:none} .vwp-faq summary::-webkit-details-marker{display:none} .vwp-faq summary::after{content:"+";float:right;color:var(--vwp-red-500);font-weight:700} .vwp-faq details[open] summary::after{content:"–"} .vwp-faq p{margin:12px 0 0;color:var(--vwp-ink-700)} /* Theme chips list */ .vwp-theme-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0} .vwp-theme-chips li{margin:0} .vwp-theme-chips a{display:inline-block;background:var(--vwp-ink-100);border:1px solid var(--vwp-ink-200); border-radius:var(--vwp-radius-pill);padding:6px 14px;color:var(--vwp-ink-800);text-decoration:none;font-size:.9rem} .vwp-theme-chips a:hover{background:var(--vwp-red-50);border-color:var(--vwp-red-100);color:var(--vwp-red-700)} /* Keyword accent for hero word */ .vwp-accent{color:var(--vwp-red-500)} /* Framed product screenshot */ .vwp-shot{margin:24px 0} .vwp-shot img{border:1px solid var(--vwp-ink-200);border-radius:var(--vwp-radius);box-shadow:var(--vwp-shadow);height:auto;max-width:100%;cursor:zoom-in} .vwp-shot figcaption{color:var(--vwp-red-700);font-size:.9rem;text-align:center;margin-top:12px;font-style:italic} /* Small centered screenshot (portrait panels) */ .vwp-shot-sm{max-width:340px;margin-left:auto;margin-right:auto} /* Feature-spoke intro body (raw wp:html under the hero): match the branded section look — centered headings, a readable centered text column, and constrained centered screenshots (max 900px, click to enlarge via .vwp-shot). */ .vwp-feature-body{max-width:1000px;margin-left:auto;margin-right:auto} .vwp-feature-body h2{text-align:center;font-size:var(--wp--preset--font-size--xx-large);line-height:1.15;margin:8px 0 20px} .vwp-feature-body p,.vwp-feature-body ol,.vwp-feature-body ul,.vwp-feature-body pre{max-width:760px;margin-left:auto;margin-right:auto} .vwp-feature-body .vwp-shot{max-width:900px;margin-left:auto;margin-right:auto} .vwp-feature-body .vwp-shot-sm{max-width:340px} /* Screenshot lightbox modal */ .vwp-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center; background:rgba(20,20,20,.92);padding:24px;cursor:zoom-out} .vwp-lightbox.is-open{display:flex} .vwp-lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:8px; box-shadow:0 12px 48px rgba(0,0,0,.5);cursor:default} .vwp-lightbox-close{position:absolute;top:16px;right:24px;width:44px;height:44px;font-size:2rem;line-height:1; color:#fff;background:none;border:none;cursor:pointer;opacity:.85} .vwp-lightbox-close:hover{opacity:1} /* ---- Header / nav ---- */ .vwp-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--vwp-ink-200); -webkit-backdrop-filter:saturate(180%) blur(6px);backdrop-filter:saturate(180%) blur(6px)} .vwp-header-inner{width:100%;align-items:center;gap:24px} .vwp-logo{font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:1.5rem; letter-spacing:-.02em;color:var(--vwp-ink-900);text-decoration:none;line-height:1;white-space:nowrap} .vwp-logo:hover{color:var(--vwp-ink-900)} .vwp-header .wp-block-navigation{font-family:"Inter",system-ui,sans-serif;font-weight:500;font-size:.95rem} .vwp-header .wp-block-navigation a{color:var(--vwp-ink-700);text-decoration:none} .vwp-header .wp-block-navigation a:hover{color:var(--vwp-red-600)} .vwp-header-cta .wp-block-button__link{padding:9px 20px;font-size:.95rem} /* let nav take the middle, push CTA right */ .vwp-header-inner>.wp-block-navigation{margin-left:auto} .vwp-header-inner>.vwp-header-cta{margin-left:8px} @media(max-width:781px){.vwp-header-cta{display:none}} /* ---- Mobile nav overlay (full-screen) ---- The sticky header uses backdrop-filter, which establishes a containing block that traps the core nav's position:fixed overlay (it rendered small inside the header bar instead of the viewport). Drop the filter on mobile so the overlay fills the screen, and give it a solid background, large tap targets and a clearly visible close button. */ @media(max-width:781px){ .vwp-header{-webkit-backdrop-filter:none;backdrop-filter:none} /* hamburger (open) button — comfortable tap target */ .vwp-header .wp-block-navigation__responsive-container-open{padding:6px;color:var(--vwp-ink-900)} .vwp-header .wp-block-navigation__responsive-container-open svg{width:28px;height:28px} /* full-screen open overlay */ .vwp-header .wp-block-navigation__responsive-container.is-menu-open{ position:fixed;inset:0;height:100dvh; background:#fff;padding:18px clamp(20px,6vw,32px); overflow-y:auto;z-index:100000} /* stacked, large menu items */ .vwp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{width:100%} .vwp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:0;width:100%} .vwp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%} .vwp-header .wp-block-navigation__responsive-container.is-menu-open a{ display:block;width:100%;padding:15px 2px;font-size:1.25rem;font-weight:600; color:var(--vwp-ink-900);border-bottom:1px solid var(--vwp-ink-200)} .vwp-header .wp-block-navigation__responsive-container.is-menu-open a:hover{color:var(--vwp-red-600)} /* visible close button, top-right */ .vwp-header .wp-block-navigation__responsive-container-close{top:16px;right:clamp(20px,6vw,32px);color:var(--vwp-ink-900)} .vwp-header .wp-block-navigation__responsive-container-close svg{width:30px;height:30px} /* "Get PRO" — shown only inside the mobile overlay, styled as a pill button */ .vwp-header .wp-block-navigation__responsive-container.is-menu-open .vwp-nav-getpro{margin-top:20px} .vwp-header .wp-block-navigation__responsive-container.is-menu-open .vwp-nav-getpro a{ display:inline-block;width:auto;border:none;border-radius:999px; background:var(--vwp-red-600);color:#fff;padding:13px 30px;font-size:1.1rem} .vwp-header .wp-block-navigation__responsive-container.is-menu-open .vwp-nav-getpro a:hover{background:var(--vwp-red-700);color:#fff} } /* Get PRO nav item is mobile-overlay only; desktop already has the CTA button */ @media(min-width:782px){.vwp-header .vwp-nav-getpro{display:none}} /* ---- Footer ---- */ /* Kill the theme's top-level block-gap above the footer so it sits flush against the last content section (which already has its own padding). TT5 wraps the footer part in