/* ============================================================ Pixeroom — shared stylesheet Monochrome (black / white), rounded modern type (Quicksand) ============================================================ */ :root { /* Brand / text colors are driven by Astra Global Colors (Appearance -> Customize -> Global -> Colors). Changing the palette there updates the whole site. Fallbacks match the original design in case Astra vars are unavailable. */ --brand: var(--ast-global-color-0, #111111); --brand-dark: var(--ast-global-color-1, #000000); --brand-light: #3A3A3A; --brand-50: #F2F2F2; --accent: var(--ast-global-color-0, #111111); --ink: var(--ast-global-color-2, #0A0A0A); --ink-2: var(--ast-global-color-3, #2C2C2C); --muted: var(--ast-global-color-6, #7A7A7A); --line: var(--ast-global-color-7, #ECECEC); --line-2: #D8D8D8; --bg: #FFFFFF; --bg-soft: var(--ast-global-color-5, #F7F7F7); --bg-soft-2: #F0F0F0; --danger: #D92D20; --warning: #B58100; --radius: 16px; --radius-sm: 11px; --radius-lg: 26px; --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.04); --shadow-md: 0 8px 30px rgba(0,0,0,.09); --shadow-lg: 0 24px 70px rgba(0,0,0,.16); --maxw: 1180px; /* Brand gradient (from the logo) — always left-to-right, used sparingly: the hero accent word, and primary call-to-action buttons. */ --grad-start: #831EFE; --grad-end: #3565F6; --grad: linear-gradient(to right, var(--grad-start), var(--grad-end)); --grad-hover: linear-gradient(to right, #7414e6, #2c58e0); } /* Gradient text — strictly left-to-right, never angled. */ .grad-text { background: var(--grad); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; } html { scroll-behavior: smooth; } /* Font family, base font-size, text color and heading sizes/weights are all inherited from Astra Global Typography & Colors (Appearance -> Customize). Only layout-specific overrides live here. */ body { -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, svg, canvas, video { max-width: 100%; } img { display: block; } /* Keep only tight heading rhythm; sizes/weights/family come from Astra globals. */ h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.01em; } h1 { letter-spacing: -.03em; } h2 { letter-spacing: -.02em; } p { margin: 0 0 1rem; } .brand-accent { background: var(--grad); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .muted { color: var(--muted); } /* App Store pricing clarification note (web vs. iOS/macOS apps) */ .pix-appnote { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 26px auto 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.55; text-align: left; } .pix-appnote .pix-appnote-icon { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.5; } .pix-appnote strong { color: var(--ink); font-weight: 700; } .pix-hero-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; } .center { text-align: center; } /* ---------- Buttons ---------- */ .btn, .btn:hover, .btn:focus, .btn:active, .btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 700; font-size: .98rem; padding: .82em 1.6em; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; text-decoration: none !important; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad); color: #fff; border-color: transparent; } .btn-primary:hover { background: var(--grad-hover); box-shadow: 0 10px 26px rgba(131,30,254,.28); color: #fff; } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink); color: var(--ink); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; box-shadow: 0 10px 26px rgba(0,0,0,.22); color: #fff; } .btn-lg, .btn-lg:hover, .btn-lg:focus, .btn-lg:active, .btn-lg:visited { padding: 1.02em 2em; font-size: 1.05rem; } .btn-sm, .btn-sm:hover, .btn-sm:focus, .btn-sm:active, .btn-sm:visited { padding: .58em 1.05em; font-size: .85rem; } .btn-block { width: 100%; } /* Header & primary navigation are rendered by the Astra theme (Customizer). */ /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: 84px 0 44px; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 460px at 84% 6%, rgba(0,0,0,.05), transparent 62%), radial-gradient(520px 400px at 6% 96%, rgba(0,0,0,.04), transparent 60%); z-index: -1; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: .8rem; padding: .5em 1.05em; border-radius: 999px; margin-bottom: 22px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; } .section-head .eyebrow { background: var(--brand-50); color: var(--ink); } .section-head .eyebrow .dot { background: var(--ink); } .hero p.lead { font-size: 1.2rem; max-width: 540px; color: var(--ink-2); } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0 18px; } .trust { display: flex; align-items: center; gap: 16px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; } .trust .stars { color: var(--ink); letter-spacing: 2px; } /* Hero preview (before/after card) */ .preview-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px; position: relative; } .ba { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; background: conic-gradient(#eee 90deg, #fff 90deg 180deg, #eee 180deg 270deg, #fff 270deg) 0 0 / 22px 22px; } .ba .half { position: absolute; inset: 0; display: grid; place-items: center; } .ba .after-half { clip-path: inset(0 0 0 50%); } .ba .label { position: absolute; bottom: 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: rgba(10,10,10,.82); color: #fff; padding: .35em .7em; border-radius: 999px; } .ba .label.l { left: 12px; } .ba .label.r { right: 12px; } .ba .divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); } .ba .divider::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; background: var(--ink); border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-md); font-size: 15px; color: #fff; } /* ---------- Logos strip ---------- */ .logos { padding: 30px 0 8px; } .logos .row { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .42; } .logos .row span { font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -.02em; } /* ---------- Sections ---------- */ .section { padding: 88px 0; } .section.alt { background: var(--bg-soft); } .section.dark { background: var(--ink); color: #fff; } /* ---------- Register / auth card ---------- */ .pix-auth-wrap { max-width: var(--maxw); margin: 0 auto; padding: 70px 24px 90px; display: flex; justify-content: center; } .pix-auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow-md); } .pix-auth-card h1 { font-size: 1.6rem; margin-bottom: .3em; } .pix-auth-card .sub { color: var(--muted); margin: 0 0 26px; } .pix-auth-error { background: #FEECEC; color: var(--danger); border: 1px solid #F5C2C2; border-radius: var(--radius-sm); padding: 10px 14px; font-size: .88rem; margin-bottom: 18px; } .pix-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .75em 1em; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 700; font: inherit; font-size: .95rem; cursor: pointer; text-decoration: none !important; transition: background .2s ease; } .pix-google-btn:hover { background: var(--bg-soft); color: var(--ink); } .pix-google-btn[disabled] { opacity: .55; cursor: not-allowed; } /* Nextend Social Login's Google button: real server-rendered , not a Google-hosted iframe, so it can be fully restyled and stays permanently in our own rounded button design — no language/skin re-render risk. */ .pix-nsl-wrap .nsl-container { width: 100%; } .pix-nsl-wrap .nsl-container-buttons { display: flex; } .pix-nsl-wrap a[data-provider="google"] { display: block; width: 100%; text-decoration: none !important; } .pix-nsl-wrap .nsl-button { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .75em 1em; border-radius: 999px; border: 1.5px solid var(--line-2) !important; background: #fff !important; color: var(--ink); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .2s ease; } .pix-nsl-wrap .nsl-button:hover { background: var(--bg-soft) !important; } .pix-nsl-wrap .nsl-button-label-container { color: var(--ink) !important; font-weight: 700; font-family: inherit; font-size: .95rem; } .pix-nsl-wrap .nsl-button-label-container b { font-weight: 700; } .pix-nsl-wrap .nsl-button-svg-container { display: flex; align-items: center; flex: none; } .pix-nsl-wrap .nsl-button-svg-container svg { width: 18px; height: 18px; } .pix-google-siwg-wrap { display: flex; justify-content: center; margin-bottom: 4px; } .pix-google-siwg-wrap .googlesitekit-sign-in-with-google__frontend-output-button { width: 100%; max-width: 100%; } .pix-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; margin: 20px 0; } .pix-divider::before, .pix-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .pix-auth-card form label { display: block; font-size: .85rem; font-weight: 700; margin: 14px 0 6px; } .pix-auth-card form label:first-of-type { margin-top: 0; } .pix-auth-card form input { width: 100% !important; padding: .7em .9em !important; border: 1.5px solid var(--line-2) !important; border-radius: var(--radius-sm) !important; font: inherit !important; font-size: .95rem !important; background: #fff !important; color: var(--ink) !important; } /* !important above because on /my-account/lost-password/ specifically, a WooCommerce compatibility stylesheet (woocommerce-grid.min.css) ships a wide selector list targeting input[type=text|email|password|...] that otherwise wins the cascade and flattens the border-radius to 0 — this generic .pix-auth-card rule never needed !important on Register/Contact/ login since that WooCommerce CSS only applies inside .woocommerce markup. */ /* Scoped to the lost-password endpoint only (via body_class filter) so normal page/post titles elsewhere keep their left-aligned default. */ body.pix-lost-password .entry-header, body.pix-lost-password .entry-title { text-align: center; } .pix-auth-card form input:focus { outline: none; border-color: var(--ink); } .pix-auth-card form button[type="submit"] { margin-top: 22px; } /* Register/Contact's submit buttons carry explicit .btn.btn-primary.btn-block classes in their markup; WooCommerce's own account form buttons (e.g. Lost password's "Reset password") can't easily be given those classes without a template override, so give any submit button inside .pix-auth-card the same visual treatment generically. */ .pix-auth-card form button[type="submit"] { display: block; width: 100%; padding: .82em 1.6em; border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; background: var(--grad); color: #fff; text-align: center; transition: background .2s ease, box-shadow .2s ease; } .pix-auth-card form button[type="submit"]:hover { background: var(--grad-hover); box-shadow: 0 10px 26px rgba(131,30,254,.28); } /* WooCommerce's lost-password intro copy ("Lost your password? ...") is the form's own first paragraph, not a class we control — style it like every other card's .sub line structurally instead. */ .pix-auth-card .woocommerce-ResetPassword > p:first-child { color: var(--muted); margin: 0 0 26px; font-size: .95rem; } .pix-auth-card .woocommerce-form-row { margin: 0; width: 100% !important; float: none !important; display: block !important; } .pix-auth-card .woocommerce-ResetPassword .required { color: var(--danger); } .pix-auth-foot { text-align: center; margin-top: 22px; font-size: .9rem; color: var(--muted); } .pix-auth-foot a { color: var(--ink); font-weight: 700; text-decoration: underline; } @media (max-width: 560px) { .pix-auth-wrap { padding: 44px 18px 60px; } .pix-auth-card { padding: 30px 24px; } } .site-logo-img { padding-right: 0 !important; } .site-logo-img .custom-logo { width: 30px !important; height: 30px !important; margin-right: 8px; } .site-branding.ast-site-identity { display: flex; align-items: center; } /* "Start Free" nav CTA button in the header menu */ .main-header-menu .pix-nav-cta { margin-left: 6px; } .main-header-menu .pix-nav-cta { display: flex; align-items: center; align-self: center; } .main-header-menu .pix-nav-cta > a { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff !important; font-weight: 700; padding: .62em 1.4em !important; border-radius: 999px; height: auto !important; min-height: 0 !important; width: auto !important; line-height: normal !important; white-space: nowrap; text-decoration: none !important; transition: background .2s ease; } .main-header-menu .pix-nav-cta > a:hover, .main-header-menu .pix-nav-cta > a:focus { background: var(--grad-hover); color: #fff !important; } @media (max-width: 921px) { /* Hide the original CTA inside the collapsible mobile dropdown — a standalone copy is injected into the top bar instead (see main.js). */ .main-header-menu .pix-nav-cta { display: none !important; } } /* App Store nav link -- pill-outline button, small Apple-silhouette icon + label, sits to the left of the primary "Start Free" CTA. */ .main-header-menu .pix-nav-app { margin-left: 18px; display: flex; align-items: center; align-self: center; } .main-header-menu .pix-nav-app > a { display: inline-flex; align-items: center; gap: .45em; justify-content: center; background: transparent; color: var(--ink) !important; font-weight: 700; font-size: .92rem; border: 1.5px solid var(--line); padding: .56em 1.15em !important; border-radius: 999px; height: auto !important; min-height: 0 !important; width: auto !important; line-height: normal !important; white-space: nowrap; text-decoration: none !important; transition: border-color .2s ease, background .2s ease; } .main-header-menu .pix-nav-app > a:hover, .main-header-menu .pix-nav-app > a:focus { border-color: var(--ink); background: var(--bg-soft); color: var(--ink) !important; } .main-header-menu .pix-nav-app .pix-app-icon { flex: 0 0 auto; } /* Reusable outline/ghost button matching the header's App Store pill colors (transparent bg, ink text/border) -- used wherever an App Store link needs the same size as a nearby primary button but a visually secondary color. */ .btn-apple { background: transparent; color: var(--ink) !important; border: 1.5px solid var(--line-2); } .btn-apple:hover, .btn-apple:focus { background: var(--bg-soft); border-color: var(--ink); color: var(--ink) !important; } .btn-apple .pix-app-icon { flex: 0 0 auto; } .btn-lg.btn-apple .pix-app-icon { width: 19px; height: 19px; } .pix-auth-card > a.btn-apple { margin-top: 14px; } /* Standalone mobile top-bar CTA, injected between the logo and hamburger. */ .pix-nav-cta-mobile { display: none; background: var(--grad); color: #fff !important; font-weight: 700; font-size: .84rem; padding: .5em 1.05em !important; border-radius: 999px; text-decoration: none !important; white-space: nowrap; margin-right: 10px; align-self: center; } .pix-nav-cta-mobile:hover, .pix-nav-cta-mobile:focus { background: var(--grad-hover); color: #fff !important; } @media (max-width: 921px) { .pix-nav-cta-mobile { display: inline-flex; align-items: center; } } /* "My Subscription" empty-state → See Pricing button, styled like the nav CTA */ .woocommerce_account_subscriptions .no_subscriptions a.woocommerce-Button.button { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff !important; font-weight: 700; padding: .62em 1.4em; border-radius: 999px; border: 0; text-decoration: none !important; margin-top: 10px; transition: background .2s ease; } .woocommerce_account_subscriptions .no_subscriptions a.woocommerce-Button.button:hover { background: var(--grad-hover); color: #fff !important; } /* Astra's default ".ast-article-single" top padding (3.34em desktop / 1.5em mobile) is meant for blog-post spacing before the title. Our app pages (home/pricing/studio/register) manage their own spacing via .hero/.section and don't use Astra's title bar, so it just shows up as a stray white gap under the fixed header. Zeroed out only for these pages — real blog posts keep Astra's normal spacing. */ .pixeroom-app-page .ast-article-single { padding-top: 0 !important; } /* Full-bleed backgrounds: these sections sit inside a boxed page container, so their background needs to break out to true viewport edges while the .container child inside keeps its own max-width/centering untouched. */ .hero, .section.alt, .section.dark { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .section.dark h2 { color: #fff; } .section.dark p { color: rgba(255,255,255,.7); } .section-head { max-width: 680px; margin: 0 auto 50px; text-align: center; } .section-head .eyebrow { margin-bottom: 16px; } /* Feature grid */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .feat-card .ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; margin-bottom: 18px; background: var(--ink); color: #fff; } .feat-card h3 { font-size: 1.15rem; } .feat-card p { margin: 0; font-size: .96rem; } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; } .step { text-align: center; padding: 10px; } .step .num { counter-increment: step; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; } .step .num::before { content: counter(step); } .step h3 { font-size: 1.05rem; } .step p { font-size: .9rem; margin: 0; } /* CTA band */ .cta-band { background: var(--ink); border-radius: var(--radius-lg); padding: 60px; text-align: center; color: #fff; box-shadow: var(--shadow-lg); } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.72); max-width: 520px; margin: 0 auto 28px; } .cta-band .btn-primary { background: #fff; color: var(--ink); } .cta-band .btn-primary:hover { background: #f1f1f1; color: var(--ink); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; } @media (max-width: 1100px) and (min-width: 861px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; } } .price-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .price-card.featured { border: 2px solid var(--ink); box-shadow: var(--shadow-lg); transform: translateY(-6px); } .price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .42em 1.05em; border-radius: 999px; } .price-card h3 { font-size: 1.35rem; margin-bottom: 4px; } .price-card .tier-desc { font-size: .9rem; color: var(--muted); min-height: 40px; } .price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 6px; } .price .amount { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; } .price .per { color: var(--muted); font-size: .95rem; } .price-card ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 13px; } .price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; color: var(--ink-2); } .price-card li .ck { color: var(--ink); font-weight: 800; flex: none; } .price-card li.off { color: var(--muted); } .price-card li.off .ck { color: var(--line-2); } .price-card .btn { margin-top: auto; } .billing-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-soft); padding: 6px; border-radius: 999px; margin: 0 auto; border: 1px solid var(--line); } .billing-toggle button { border: 0; background: transparent; font: inherit; font-weight: 700; padding: .55em 1.3em; border-radius: 999px; cursor: pointer; color: var(--muted); } .billing-toggle button.active { background: var(--ink); color: #fff; } .save-badge { background: #fff; color: var(--ink); font-size: .7rem; font-weight: 700; padding: .2em .6em; border-radius: 999px; margin-left: 4px; border: 1px solid var(--line-2); } .billing-toggle button.active .save-badge { background: #fff; color: var(--ink); border: 0; } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } .faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 22px; margin-bottom: 12px; background: #fff; } .faq summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ink); } .faq details[open] summary::after { content: "–"; } .faq details p { margin: 0 0 18px; font-size: .95rem; } /* Astra's footer copyright bar renders as display:flex, so text-align:center alone leaves the

pinned to the left. Center the flex child. */ .ast-footer-copyright { justify-content: center; } /* The below-footer builder row is configured as a 3-equal-column grid, but only the copyright block is placed in it — the other two grid cells are empty. That leaves the copyright text stuck centered inside just the left third of the row instead of the full footer width. Collapse this specific row to a single column so its own centering spans the whole width. */ .site-below-footer-inner-wrap.ast-builder-footer-grid-columns { grid-template-columns: 1fr !important; } /* ---------- Footer widget columns (inside Astra's footer) ---------- */ .pix-foot-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; } .pix-foot-col a { display: block; font-size: .92rem; margin-bottom: 9px; opacity: .82; } .pix-foot-col a:hover { opacity: 1; } /* Astra's footer builder row has no side padding on mobile (single-column stacked layout), so text sits flush against the screen edge. Match the same inset used by the rest of the site's content on mobile. */ @media (max-width: 544px) { .site-footer .ast-builder-grid-row-container-inner { padding-left: 18px; padding-right: 18px; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .hero-grid { gap: 36px; } .feat-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .hero { padding: 56px 0 30px; } .hero-grid { grid-template-columns: 1fr; } .hero .preview-card { max-width: 460px; } .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .footer-grid { grid-template-columns: 1fr 1fr; } .price-card.featured { transform: none; } .nav-links { display: none; } .nav-toggle { display: block; } .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: #fff; padding: 18px 24px; border-bottom: 1px solid var(--line); gap: 16px; } .section { padding: 60px 0; } .feat-grid, .steps { grid-template-columns: 1fr 1fr; gap: 14px; } .feat-card { padding: 20px 16px; } .feat-card .ico { width: 40px; height: 40px; font-size: 18px; margin-bottom: 12px; } .feat-card h3 { font-size: 1rem; } .feat-card p { font-size: .86rem; } .step .num { width: 38px; height: 38px; font-size: .95rem; margin-bottom: 10px; } .step h3 { font-size: .95rem; } .step p { font-size: .82rem; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .cta-band { padding: 40px 22px; } .container { padding: 0 18px; } } /* ===== Animated hamburger + mobile menu (Astra) ===== */ .ast-mobile-menu-buttons .menu-toggle, .ast-button-wrap .menu-toggle, .main-header-menu-toggle { transition: background-color .25s ease, transform .25s ease; border-radius: 8px; } .main-header-menu-toggle .mobile-menu-toggle-icon { position: relative; display: inline-flex; width: 24px; height: 24px; } .main-header-menu-toggle svg.ast-mobile-svg { display: inline-block !important; transition: opacity .28s ease, rotate .32s cubic-bezier(.4,0,.2,1), scale .32s cubic-bezier(.4,0,.2,1); position: absolute; top: 0; left: 0; } .main-header-menu-toggle svg.ast-menu-svg { opacity: 1; rotate: 0deg; scale: 1; } .main-header-menu-toggle svg.ast-close-svg { opacity: 0; rotate: -90deg; scale: .6; } .main-header-menu-toggle.toggled svg.ast-menu-svg { opacity: 0; rotate: 90deg; scale: .6; } .main-header-menu-toggle.toggled svg.ast-close-svg { opacity: 1; rotate: 0deg; scale: 1; } .main-header-menu-toggle.toggled { background-color: rgba(0,0,0,.05); } /* Smooth reveal for the mobile nav panel */ .main-header-bar-navigation.ast-mobile-header-content, .main-header-bar-navigation { transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .28s ease; } @media (max-width: 921px) { .main-header-bar-navigation #ast-mobile-site-navigation, .main-header-bar-navigation .main-header-menu { transition: opacity .3s ease .05s, transform .32s cubic-bezier(.4,0,.2,1); } .main-header-bar-navigation:not(.toggle-on) #ast-mobile-site-navigation { opacity: 0; transform: translateY(-8px); pointer-events: none; } .main-header-bar-navigation.toggle-on #ast-mobile-site-navigation { opacity: 1; transform: translateY(0); } .main-header-bar-navigation.toggle-on .main-header-menu .menu-item { animation: pixeroomMenuItemIn .32s cubic-bezier(.4,0,.2,1) both; } .main-header-bar-navigation.toggle-on .main-header-menu .menu-item:nth-child(1) { animation-delay: .04s; } .main-header-bar-navigation.toggle-on .main-header-menu .menu-item:nth-child(2) { animation-delay: .09s; } .main-header-bar-navigation.toggle-on .main-header-menu .menu-item:nth-child(3) { animation-delay: .14s; } .main-header-bar-navigation.toggle-on .main-header-menu .menu-item:nth-child(4) { animation-delay: .19s; } } @keyframes pixeroomMenuItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ===== Blog (archive + single) — matches site design language ===== */ #primary.ast-grid-3, #primary.content-area.primary { padding-top: 56px; padding-bottom: 40px; } #primary .ast-container, .ast-container { max-width: var(--maxw); } .ast-separate-container #primary, #primary { background: transparent; } /* Astra sets a 16:9 aspect-ratio on archive thumbnails but stretches the image to fill it (object-fit: fill) instead of cropping — force a real crop. */ .ast-article-post .post-thumb img, .ast-article-post .ast-blog-featured-section img { object-fit: cover !important; } /* Archive cards */ .ast-article-post { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); margin-bottom: 22px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .ast-article-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .ast-article-post .cat-links { display: none; } .ast-article-post .cat-links a { background: var(--brand-50); color: var(--ink); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: .35em .9em; border-radius: 999px; } .ast-article-post .entry-title { font-size: 1.3rem; margin: 0 0 .3em; } .ast-article-post .entry-title a { color: var(--ink); } .ast-article-post .entry-title a:hover { color: var(--brand); } .ast-article-post .entry-meta { color: var(--muted); font-size: .85rem; margin-bottom: 12px; } .ast-article-post .ast-excerpt-container p { color: var(--ink-2); margin: 0; } .ast-article-post .ast-button, .ast-article-post .ast-read-more { display: none; } /* Single post (blog posts only — NOT pages, which reuse Astra's .ast-article-single class too) */ article.type-post.ast-article-single { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-sm); max-width: 760px; margin: 0 auto; } article.type-post.ast-article-single .pix-post-featured-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 28px; display: block; } article.type-post.ast-article-single .entry-title { font-size: 2rem; margin-bottom: .3em; } article.type-post.ast-article-single .entry-meta { color: var(--muted); font-size: .9rem; margin-bottom: 30px; } article.type-post.ast-article-single .entry-content { color: var(--ink-2); } article.type-post.ast-article-single .entry-content p { margin: 0 0 1.1em; line-height: 1.7; } article.type-post.ast-article-single .entry-content h2 { margin-top: 1.6em; } /* Pagination */ .ast-pagination, nav.pagination, .navigation.pagination { max-width: var(--maxw); margin: 20px auto 0; padding: 0 24px; } .ast-pagination a, .ast-pagination span.current, .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4em; height: 2.4em; padding: 0 .6em; margin-right: 6px; border-radius: 999px; border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 700; } .ast-pagination span.current, .pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); } /* ===== Sticky header (desktop + mobile) ===== position:fixed is used (not sticky) because sticky is disabled by the overflow-x:hidden set on html/body above (needed to stop horizontal swipe). */ #masthead.site-header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; } body:not(.wp-admin-bar) { padding-top: var(--pixeroom-header-h, 0px); } html { scroll-padding-top: var(--pixeroom-header-h, 90px); } [id] { scroll-margin-top: var(--pixeroom-header-h, 90px); } /* ===== Checkout: identity-only fields + returning-customer login prompt ===== */ .pix-checkout-account-note { background: var(--brand-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; font-size: .88rem; color: var(--ink-2); margin: 0 0 20px; line-height: 1.5; } .woocommerce-form-login-toggle { max-width: var(--maxw); margin: 0 auto 24px; padding: 0 24px; } .woocommerce-form-login-toggle .woocommerce-info { background: #fff !important; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px !important; display: block; list-style: none; font-size: .92rem; color: var(--ink-2); line-height: 1.6; } .woocommerce-form-login-toggle .woocommerce-info a.showlogin { display: inline-block; margin-left: 6px; font-weight: 700 !important; color: var(--ink) !important; text-decoration: underline !important; text-decoration-color: var(--grad-end) !important; text-underline-offset: 2px; } .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover { color: var(--grad-end) !important; } /* WooCommerce's hidden marketing-attribution tracking fields render inside a custom element; it's meant to be invisible (hidden inputs only) but shows up as a stray filled black box on some browsers when unstyled. */ wc-order-attribution-inputs { display: none !important; } /* WooCommerce's default info-notice icon is positioned assuming its original 3.5em left padding (which we removed above) — without that reserved space the icon glyph renders on top of the first word of text. Drop the icon entirely since our redesigned box doesn't use it. */ .woocommerce-form-login-toggle .woocommerce-info::before { content: none !important; display: none !important; } /* Defensive: hide the WordPress/WooCommerce password-strength meter box in case its script ever loads on checkout again — it renders blank/unstyled until the customer types, which looked like a stray black box. */ #pass-strength-result, .woocommerce-password-strength { display: none !important; } /* The actual "black box" under password fields: WooCommerce's JS (core woocommerce.js, not the strength-meter script already removed above) injects a real