/* =====================================================================
Agntix — Newsletter sidebar widget (Contact Form 7)
---------------------------------------------------------------------
Port of the newsletter box from all-in-fabrics/blogs-details.html.
What the theme ALREADY ships (verified against the static export — do
not duplicate it here, agntix-core.css is byte-identical to main.css
for these):
.sidebar-search main.css 8184-8244
.sidebar-search input + placeholders
.sidebar-search input:focus
.sidebar-search button / :hover
.agntix-light .sidebar-search * main.css 47390, 47861-47874
.sidebar-widget-title main.css 8291
.mb-20 spacing.css
`.sidebar-search-input` and `.tp-news-latter-sidebar-widget` carry no
styles in the export — they are plain hooks — so nothing is missing
from the static markup.
What IS missing, and is the whole job of this file: the static page had
a hand-written . Contact Form 7 renders its own
markup instead — an ; make it block so the 100%-wide
input measures against it. */
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7-form-control-wrap {
display: block;
}
/* Breathing room if the form carries more than the one email field. */
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7 form p + p,
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
margin-top: 12px;
}
/* ---- 2. Submit → the arrow button from the design ------------------
`.sidebar-search input` styles every input, so the submit has to be
pulled back out of that rule and rebuilt as the 16px arrow pinned to
the right of the field. `value=` still supplies the accessible name,
so hiding the label text costs nothing for screen readers. */
.tp-news-latter-sidebar-widget .sidebar-search input[type="submit"] {
position: absolute;
top: 0;
right: 25px;
width: 16px;
height: 60px;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 0;
line-height: 0;
text-indent: -9999px;
cursor: pointer;
color: var(--tp-common-white);
/* Fallback for the ~0.1% without mask-image: a fixed-colour arrow in
the light-theme ink ( always carries .agntix-light here). */
background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 11L11 1M11 1H1M11 1V11' stroke='%232A4C3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
background-size: 16px 16px;
-webkit-appearance: none;
appearance: none;
}
/* Preferred path: paint the arrow through a mask so it follows `color`
exactly like the original SVG's stroke="currentcolor" did. */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
.tp-news-latter-sidebar-widget .sidebar-search input[type="submit"] {
background: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 11L11 1M11 1H1M11 1V11' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 11L11 1M11 1H1M11 1V11' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask-size: 16px 16px;
mask-size: 16px 16px;
}
}
/* Mirrors `.sidebar-search button:hover` and the .agntix-light override,
which only ever matched a real . */
.tp-news-latter-sidebar-widget .sidebar-search input[type="submit"]:hover,
.tp-news-latter-sidebar-widget .sidebar-search input[type="submit"]:focus-visible {
color: #D0FF71;
}
.agntix-light .tp-news-latter-sidebar-widget .sidebar-search input[type="submit"] {
color: var(--tp-common-black);
}
.agntix-light .tp-news-latter-sidebar-widget .sidebar-search input[type="submit"]:hover,
.agntix-light .tp-news-latter-sidebar-widget .sidebar-search input[type="submit"]:focus-visible {
color: #D0FF71;
}
/* A raw in the CF7 template already picks up the
theme's `.sidebar-search button` rules — except `height: 100%`, which
was written for a box holding nothing but the input. CF7 adds a
response panel below it, so pin the height to the field instead. */
.tp-news-latter-sidebar-widget .sidebar-search button[type="submit"],
.tp-news-latter-sidebar-widget .sidebar-search button:not([type]) {
height: 60px;
line-height: 60px;
padding: 0;
border: 0;
background: transparent;
}
/* ---- 3. Spinner ---------------------------------------------------
CF7 ships it inline with `margin: 0 24px`, which drops an empty line
under the field. Float it inside the pill, left of the arrow. */
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7-spinner {
position: absolute;
top: 30px;
right: 51px;
width: 16px;
height: 16px;
margin: 0;
transform: translateY(-50%);
}
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7-spinner::before {
top: 3px;
left: 3px;
width: 4px;
height: 4px;
transform-origin: 5px 5px;
}
/* ---- 4. Response panel + validation -------------------------------
CF7's default is `margin: 2em 0.5em 1em` with a 2px border — far too
loud for a sidebar. Border COLOUR is left to CF7 so sent / invalid /
failed keep their own green / yellow / red. */
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7 form .wpcf7-response-output {
margin: 15px 0 0;
padding: 10px 16px;
border-width: 1px;
border-radius: 10px;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
.tp-news-latter-sidebar-widget .sidebar-search .wpcf7-not-valid-tip {
margin-top: 8px;
font-size: 14px;
line-height: 1.4;
}
.tp-news-latter-sidebar-widget .sidebar-search input.wpcf7-not-valid {
border-color: #dc3232;
}
/* ---- 5. Editor-only notice ----------------------------------------
Shown to logged-in admins when the shortcode produced nothing, so a
mistyped CF7 id is visible instead of silently blank. */
.tp-news-latter-sidebar-widget .agntix-newsletter-notice {
margin: 0;
padding: 12px 16px;
border: 1px dashed rgba(220, 50, 50, 0.6);
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
color: #dc3232;
}