/** * OwlDraft Publisher, wearing the theme's clothes. * * The theme's one stylesheet for markup the Publisher stack prints rather than * the theme. Everything the theme itself draws for the plugin — the header's * Sign in / Account link — is styled inline from compat.php beside this file, * because it is only ever emitted with the markup it dresses. What lands here is * the other case: screens a plugin renders whole, in its own house style, which * the theme can only correct after the fact. * * Loaded from compat.php, and only on a page where the stack is actually present. * Nothing in the theme proper refers to it. * * SECTIONS * ------------------------------------------------ * A. Paid Memberships Pro - the pages a reader pays on * B. OwlDraft Publisher - the paywall and the buttons beside it * * * A. PAID MEMBERSHIPS PRO * ================================================ * * Publisher bills through PMPro, so levels, checkout, account and the front-end * login are that plugin's markup, not the theme's. Left alone they arrive * rounded, drop-shadowed and in PMPro's own navy: a second design system sitting * inside the paper. * * This is deliberately not a restyle. PMPro 3.x publishes a token API * (--pmpro--*), so almost everything below is one block of tokens pointed at the * theme's own: the plugin's rules then do the work, and keep doing it after the * next PMPro release. The handful of selectors after that exist only where PMPro * hard-codes a value with no token behind it — a shadow, a circle, a * Bootstrap-blue focus ring. * * 1. Tokens - the theme's palette and corners, handed to PMPro * 2. Buttons - the theme's button, not PMPro's * 3. Squared - the corners and shadows PMPro hard-codes * 4. Focus - the theme's focus ring instead of Bootstrap blue * 5. Headings - PMPro's own type scale, back on the theme's * 6. Page nav - the lone "Go to your account" link, unpinned from the edge * 7. First card - no margin above the card a page opens on */ /* 1. TOKENS ------------------------------------------------ Doubled :root on purpose. PMPro prints its admin-chosen colors as a plain :root block in wp_head - after every enqueued stylesheet, this one included - so an equal-specificity :root here would lose. :root:root is the same element at one class more weight, which is all it takes. */ :root:root { /* corners. Buttons follow the theme's own --button-radius, so the customizer's Style section drives the checkout button exactly as it drives the header CTA; everything else - cards, sections, inputs, tables - is square, like the theme. */ --pmpro--btn--border-radius: var(--button-radius); --pmpro--base--border-radius: 0; /* the theme's button measures 10px/18px. PMPro's is 12px/18px with a 40px floor, undone in section 2. */ --pmpro--btn--top-bottom-padding: 10px; --pmpro--btn--left-right-padding: 18px; /* no depth anywhere. The theme separates with hairlines, never shadow. */ --pmpro--box-shadow: none; /* palette. --base is PMPro's "paper" - card backgrounds and the text on a filled button both - which is exactly what the theme's --bg is. The accent variation is flattened onto the accent itself: the theme never shifts hue on hover, it dims (section 2), and a lightened navy underneath would fight that. */ --pmpro--color--base: var(--bg); --pmpro--color--contrast: var(--text); --pmpro--color--accent: var(--accent); --pmpro--color--accent--variation: var(--accent); /* one hairline for the plugin too. --border--variation is PMPro's card border. */ --pmpro--color--border: var(--border); --pmpro--color--border--variation: var(--border); } /* 2. BUTTONS ------------------------------------------------ The tokens above already fix the color and the corner; what is left is the shape of the type. PMPro sets 16px/700 with a 40px floor - a chunkier button than the theme's, which simply inherits the body and dims on hover. #loginform's submit is PMPro's copy of the same button, written out longhand against a WordPress id, so it is named alongside rather than left behind. */ .pmpro .pmpro_btn, .pmpro .pmpro_section #loginform .login-submit .button { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 1.15; /* normalize's button line-height, as the theme's buttons use */ min-height: 0; box-shadow: none; transition: opacity .2s; } /* The theme's hover, on every variant at once. Because the accent variation is flattened above, the filled, outline, cancel and delete buttons all keep their own colors here and only dim - one gesture for the whole page. */ .pmpro .pmpro_btn:hover, .pmpro .pmpro_btn:focus, .pmpro .pmpro_section #loginform .login-submit .button:hover, .pmpro .pmpro_section #loginform .login-submit .button:focus { opacity: .85; } /* Links inside PMPro's pages hover the same way, for the same reason: with the accent variation flattened there is no color left to shift to. */ .pmpro a:not(.pmpro_btn):hover { opacity: .85; } /* 3. SQUARED ------------------------------------------------ The values PMPro writes as literals, with no token to aim at. */ .pmpro .pmpro_btn, .pmpro .pmpro_btn-cancel, .pmpro .pmpro_section #loginform .login-submit .button, .pmpro .avatar { box-shadow: none; } .pmpro .avatar { border-radius: 0; /* the theme leaves comment avatars square; so does this */ } /* 4. FOCUS ------------------------------------------------ PMPro rings a focused field in Bootstrap's blue, which belongs to neither the theme nor the accent. Swapped for the theme's own ring - the same 2px accent outline every other focusable thing on the site gets. */ .pmpro [class*="pmpro_form_input"]:focus, .pmpro .pmpro_section #loginform .input:focus, .pmpro .pmpro_form_field-password-toggle button:focus, .pmpro .pmpro_form_field-password-toggle button:active { border-color: var(--accent); box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; } /* 5. HEADINGS ------------------------------------------------ PMPro sizes the account and checkout screens on its own scale: 32px for a section title, 24px for the card title inside it, both written as literals with no token to aim at. On the account page that lands "Your account" a hair under the page title itself and "Welcome, name" level with an article heading -- three competing headlines before the reader reaches a single fact. The theme's own scale is the browser's, untouched: h1 for the page title, 1.5em for an h2, 1.17em for an h3. These are exactly that, in em rather than px so the customizer's body size carries them the way it carries every other heading on the site. Typed selectors (h2., h3.) on purpose: PMPro's own rules are class-only, so one element name is all the weight needed to land after them, and no !important appears anywhere in this file. */ .pmpro h2.pmpro_section_title { font-size: 1.5em; } .pmpro h3.pmpro_card_title { font-size: 1.17em; } /* And the gap between them. PMPro separates sections by twice its large spacing -- 72px, which reads as a page break rather than a change of subject, and leaves the card orphaned from the heading below it. The theme already has a value for "between minor sections", and it rides the mobile retune. :first-of-type keeps PMPro's zero top margin: theirs is one class heavier than this. */ .pmpro .pmpro_section { margin: var(--spacing-xl) 0; } /* 6. PAGE NAV ------------------------------------------------ The "Go to your account -> " line at the foot of billing, cancel and the invoice. PMPro lays that strip out as a flex row with a left slot and a right slot, and right-aligns the right one -- correct when both are filled, which is the case it was written for. Every one of these pages fills only the right slot, so the reader gets a single link pinned to the far edge of the column with the whole width empty beside it. It is loudest on the billing page with no membership, where PMPro prints one bare sentence and nothing else: the page is then a line of text on the left and an unattached link on the right. :only-child is the whole condition -- alone, it reads down the column with everything above it; beside a left item, PMPro's own alignment stands. */ .pmpro .pmpro_actions_nav-right:only-child { text-align: left; } /* The strip carries no margin of its own, so it lands hard against whatever ends above it -- a card edge, or that lone sentence. */ .pmpro .pmpro_actions_nav { margin-top: var(--spacing); } /* 7. THE FIRST CARD ------------------------------------------------ PMPro gives every .pmpro_card a top and bottom margin, which is right between two cards and wrong above the first one: the page title already sets the gap, and the card's own margin adds a second one under it that no other template in the theme has. Written as "no card has a top margin, a card after another card does" rather than :first-child, because the first card is never the first child - PMPro prints hidden inputs and an empty message div ahead of it - and never the first of its type either, since that message div is a div too. */ .pmpro .pmpro_form > .pmpro_card, .pmpro .pmpro_section > .pmpro_card { margin-top: 0; } .pmpro .pmpro_form > .pmpro_card ~ .pmpro_card, .pmpro .pmpro_section > .pmpro_card ~ .pmpro_card { margin-top: var(--pmpro--base--spacing--medium, 18px); } /* B. OWLDRAFT PUBLISHER ================================================ * * The paywall at the foot of a locked post, and the Subscribe / Upgrade button * inside it, are the plugin's markup: it prints them itself so that no theme can * leak a paid post by getting its template wrong. Left alone they arrive in the * plugin's neutral house style - a grey hairline, an off-white panel, a 4px * corner - which is a second set of values sitting inside the paper. * * Like PMPro above, this is not a restyle. The plugin publishes custom properties * for exactly this and asks a theme to set them, so the block below is three of * them pointed at the theme's own tokens and nothing else. The corner goes to * zero for the panel and the button both: Stoat separates with hairlines and * square edges, and --button-radius is not used here because panel and button * share the one token and the panel must stay square whatever the customizer * does to buttons. * * The two left alone are --owldraft-accent and its contrast, the button's fill. * The plugin's near-black is the one place the paywall is meant to shout, and * the theme's navy accent is already the color of every link in the paragraph * above it. Point them at var(--accent) / white here if that changes. * * Doubled :root for the same reason as section A - the plugin's defaults are a * plain :root, and equal specificity would come down to load order. */ :root:root { --owldraft-radius: 0; /* panel and button both, like the theme */ --owldraft-border: var(--border); /* the one hairline the whole theme draws */ --owldraft-surface: var(--bg); /* the theme boxes on the page's own paper */ } /* B2. THE MAGIC-LINK FORM ------------------------------------------------ * Sign in, sign up, and the sign-up box on a gated checkout are one piece of * markup — .owldraft-publisher-form — printed by the plugin with a small * stylesheet of its own: a system font stack, a 24rem measure, a 4px corner, * a hairline field and a blue button. On a bare theme that is a working form; * inside Stoat it is a second design system on the page, and the sign-in * screen is a whole page of it. * * Unlike the token blocks above there is no API to aim at here, so this is the * one place the theme overwrites the plugin's values outright. What it writes * are the theme's own controls from style.css section 1.2 — the 48px field on * its faint grey fill, and the accent button beside it — so the sign-in screen * reads like the comment form and the search box, because it is the same * control. * * Doubled class, for the same reason :root is doubled above: the plugin prints * its rules inline in wp_head, after every enqueued stylesheet including this * one, so at equal weight it would win on order alone. */ .owldraft-publisher-form.owldraft-publisher-form { max-width: none; font: inherit; } .owldraft-publisher-form.owldraft-publisher-form label { margin: 0 0 6px; font-weight: 600; } /* The theme's field: full width, one 48px control height, square, no border — the fill is the outline. Repeated rather than inherited because the plugin's own rule is more specific than the element selector that would carry it. */ .owldraft-publisher-form.owldraft-publisher-form input[type="text"], .owldraft-publisher-form.owldraft-publisher-form input[type="email"] { width: 100%; height: 48px; margin: 0 0 16px; padding: 0 12px; font-family: inherit; font-size: inherit; color: var(--dark); background: rgba(0, 0, 0, .05); border: 0; border-radius: 0; } /* Sign in's one row: the field takes the width, the button ends it. The margin under the field is the stacked form's gap between fields, and there is no field under this one. Said here as well as in the plugin because the field rule above is heavier than the plugin's own row rule. */ .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-row input[type="email"] { flex: 1 1 12rem; width: auto; margin: 0; } .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-row .owldraft-publisher-btn { flex: 0 0 auto; } .owldraft-publisher-form.owldraft-publisher-form label.owldraft-publisher-check { margin: 0 0 16px; font-size: inherit; font-weight: 400; } /* The theme's button, on the plugin's class. The accent rather than the paywall's near-black: this one sits in a page of the theme's own text, where every other button is the accent, and the paywall panel is the only place that shouts. */ .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 18px; font-family: inherit; font-size: inherit; color: #fff; /* The accent, and the plugin's near-black only if a build of the theme ever ships without one -- never the plugin's blue, which belongs to no palette here. */ background: var(--accent, #15171a); border-radius: var(--button-radius); } .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-btn:hover, .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-btn:focus { color: #fff; opacity: .85; } /* Square, and on the theme's hairline, like every other notice it draws. */ .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-notice { background: rgba(0, 0, 0, .04); border-left: 3px solid var(--accent); border-radius: 0; } .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-error { border-radius: 0; } /* The plan picker on the sign-up page. The plugin draws it with its own border, corner and accent; those are the three things the theme has opinions about, so those are the three said here — square corners on the theme's hairline, and the theme's accent on the chosen row. Everything structural about the rows is left to the plugin. */ .owldraft-publisher-form.owldraft-publisher-form .owldraft-publisher-plan { border: 1px solid var(--border, rgba(0, 0, 0, .12)); border-radius: 0; /* A plan row is a