/* Digital Field Book -- small supplementary stylesheet, loaded after the theme's own CSS. Only covers what the theme doesn't already provide: the placeholder-link dialog and a couple of minor additions (pricing-card limits line). Everything else (layout, colors, animations) is the original template's own theme.css -- left untouched, per "keep the design". */ .site-dialog { border: none; border-radius: 14px; padding: 0; max-width: 460px; width: calc(100% - 40px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); font-family: inherit; } .site-dialog::backdrop { /* no backdrop-filter here -- it triggered a Chromium rendering bug (page mirrored behind the dialog) the last time this was tried on this project; a plain dim overlay is safer and still reads clearly */ background: rgba(20, 26, 18, 0.55); } /* THE DIALOG SCROLLS INSIDE A FRAME, NOT AT ITS EDGE -- 2026-09-26. The signup form is taller than a laptop screen, and the browser's own answer was a scrollbar down the dialog's right edge: full height, square against the rounded corners, and no white margin on that side while the left had 32 pixels of it. So the dialog itself no longer scrolls. It keeps an 8-pixel white frame on all four sides and clips to its rounded corners, and the content scrolls inside that frame with a thin scrollbar. The gutter is reserved on BOTH edges, so the left margin grows by exactly what the scrollbar takes on the right and the two sides stay mirror images, scrolling or not. */ .site-dialog[open] { display: flex; flex-direction: column; overflow: hidden; padding: 8px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } .site-dialog .dialog-inner { padding: 24px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c5cfc2 transparent; scrollbar-gutter: stable both-edges; } /* a scrolling box takes the focus in current Chromium, and its ring would be drawn just inside the frame; the frame and the dialog's own backdrop already say where the reader is */ .site-dialog .dialog-inner:focus { outline: none; } .site-dialog h3 { margin: 0 0 12px; font-size: 1.25rem; } .site-dialog p { margin: 0 0 22px; color: #4d5c47; } .dialog-close-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem; } /* the two buttons of every dialog are one shape: the same pill, the same type, the same height. They differed in all three -- a bold pill in the browser's default face beside a rounded rectangle in Nunito -- because they were written at different times, and a button element does not inherit the page's font unless it is told to. */ .dialog-close-btn, .dialog-submit-btn { font: inherit; font-weight: 700; line-height: 1.25; border: none; border-radius: 999px; padding: 10px 22px; color: #fff; cursor: pointer; } .dialog-close-btn { background: #5b8c51; } .dialog-close-btn:hover { background: #3f6b37; } .dfb-product-limits { line-height: 1.5; } /* the theme's own hero slider (Swiper "fade" effect + a custom GSAP reveal timeline in theme.js) never finishes initializing correctly in this static export: Swiper's internal .translate state is computed but never actually applied to the DOM, and each slide's own inline opacity:0 (its fade-effect "hidden" state) is never animated to 1 by the paired GSAP timeline -- the net result is a live-but-permanently- invisible slide sitting off in the wrong position. Rather than debug a third-party widget's internal GSAP orchestration, this replaces slide positioning/visibility with a plain CSS crossfade that js/site- extra.js drives directly, bypassing Swiper's translate/fade logic entirely while keeping every other part of the design (backgrounds, fonts, colors, layout) exactly as the theme already built it. */ #intro .swiper-wrapper { transform: none !important; } #intro .swiper-slide { position: absolute !important; inset: 0 !important; width: 100% !important; opacity: 0 !important; transition: opacity 0.6s ease !important; pointer-events: none !important; } #intro .swiper-slide.dfb-hero-active { position: relative !important; opacity: 1 !important; pointer-events: auto !important; } /* Swiper's loop mode keeps recreating its own duplicate padding slides during normal operation (not just at init), and a freshly cloned duplicate can inherit a stale .dfb-hero-active class straight off its source via cloneNode() -- js/site-extra.js's one-time .dfb-hero-clone pass can't catch clones made later, so duplicates are unconditionally hidden here instead; this is live against the DOM and doesn't depend on when a given clone was created. */ /* Swiper's loop mode marks per-view "group" duplicates (needed when slides_per_view > 1, as with the pricing carousel below) with compound classes like swiper-slide-duplicate-active/-next/-prev, not just the plain swiper-slide-duplicate -- an exact-class selector misses those, so this matches on any class containing "swiper-slide-duplicate" instead. */ #intro .swiper-slide[class*="swiper-slide-duplicate"], #intro .swiper-slide.dfb-hero-clone { display: none !important; } #intro .swiper-slide .slide-background, #intro .swiper-slide .slide-container { opacity: 1 !important; } /* theme.js runs each heading/subtitle through GSAP's SplitText, animating the resulting .pxl-char spans in via a staggered ScrollTrigger (trigger: the element itself, toggleActions "play none none none" -- fires once based on scroll position, not visibility). Since our slides only ever change via this crossfade's class toggling and never trigger an actual scroll event, a slide revisited after its first activation can be caught with that stagger frozen partway through (fractional opacity per character, matching a fade-in that started but was interrupted) instead of either its pre- or post- animation state -- same root cause as the slide-level fade bug this whole crossfade already works around, just one layer deeper (per-character instead of per-slide). Forcing the split text straight to its finished state sidesteps GSAP's timeline entirely rather than chasing why the retrigger stalls. */ #intro .swiper-slide .text-animated { visibility: visible !important; } #intro .swiper-slide .pxl-char, #intro .swiper-slide .pxl-line, #intro .swiper-slide .pxl-word { opacity: 1 !important; transform: none !important; } /* hero slide background photos, and the green tint over each of them that keeps the white headline readable */ #intro .swiper-slide.dfb-item-b153571 .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide01.webp') !important; background-size: cover !important; background-position: center !important; } #intro .swiper-slide.dfb-item-f61da63 .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide08.webp') !important; background-size: cover !important; background-position: center !important; } #intro .swiper-slide.dfb-item-86cc5c8 .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide09.webp') !important; background-size: cover !important; background-position: center !important; } #intro .swiper-slide.dfb-item-a1b2c3d .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide05.webp') !important; background-size: cover !important; background-position: center !important; } #intro .swiper-slide.dfb-item-d4e5f6a .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide06.webp') !important; background-size: cover !important; background-position: center !important; } #intro .swiper-slide.dfb-item-7c8d9e0 .slide-background { background-color: #d3b4b4 !important; background-image: url('../field_book_image/slide07.webp') !important; background-size: cover !important; background-position: center !important; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-b153571 .slide-background::before { background-color: #244f0b7d; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-f61da63 .slide-background::before { background-color: #244f0b7d; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-86cc5c8 .slide-background::before { background-color: #244f0b7d; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-a1b2c3d .slide-background::before { background-color: #244f0b7d; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-d4e5f6a .slide-background::before { background-color: #244f0b7d; } .dfb-8625 .dfb-element.dfb-el-aba5457 .dfb-slider .swiper-slide.dfb-item-7c8d9e0 .slide-background::before { background-color: #244f0b7d; } /* footer background photo -- switched off by the 2026-09-26 redesign; the rule is kept as the place to put one. It was a subtle, mostly-hidden-behind-a-dark-overlay texture, so this is a plain pattern rather than another visible generation-prompt callout; suggested prompt for a future real asset: "wide aerial photo of a farm field at dusk, with a tractor and a faint overlay of a translucent app dashboard graphic, dark green tones" -- matches dfb-8062, the separate template id this theme uses for the shared footer */ .dfb-el-5bdbc19:not(.dfb-motion-bg-type), .dfb-8062 .dfb-element.dfb-el-5bdbc19 > .dfb-motion-container > .dfb-motion-layer { /* no texture: the redesign shows the plain footer colour */ } /* products/pricing carousel: with slides_per_view_lg:3 and FOUR real plan cards -- Free, Basic, Standard and Pro, which is what [data-plan-slot] counts in the markup -- Swiper's loop mode still pads the row with clones for seamless looping, hidden here so only the real cards show. This comment said "exactly 3" until 2026-09-12 (finding C9-98): true before the free tier shipped, and the rule below never counted them, so nothing failed when it stopped being true. Swiper marks per-view "group" duplicates with compound classes such as swiper-slide-duplicate-active/-next/-prev (not just the plain swiper-slide-duplicate), so this matches on any class containing "swiper-slide-duplicate" rather than that one exact token -- the 3 uncaught duplicate-group slides were what inflated the section to ~3x its real height/width. */ #products .swiper-slide[class*="swiper-slide-duplicate"] { display: none !important; } #products .swiper-wrapper { justify-content: center !important; } /* the widget's own responsive CSS gives its wrapper a -264px right margin at wide breakpoints -- a "peek the next slide" bleed effect left over from when this carousel was designed to show 5-6 cards per view. For an auto-width block box a negative margin-right expands the box's own computed width to compensate (box-model math: margin-left+width+margin-right must equal the container's width, so width grows when margin-right goes negative) -- that's what was pushing every element down the chain (widget-container, .dfb-swiper, .swiper-inner, .swiper-container) past their actual available space, and Swiper then sized each of the 3 slides off that inflated 1835px figure instead of the section's real ~1500px, running the row off the right edge. Forcing the whole chain to a plain 100%-of-parent width sidesteps the interaction rather than chasing which breakpoint's margin rule wins here. */ #products .dfb-widget-container, #products .dfb-swiper, #products .swiper-inner, #products .swiper-container { width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } /* THE ROW IS FOUR CARDS WIDE, and this is where that is decided. It used to pin every slide to 33.333% -- correct while the page carried three plan cards, and the reason the fourth could not simply be added to the markup: a fourth card at a third of the row is a card that wraps onto a second line on its own, under three that fit. The platform sells four plans (free, basic, standard, pro) and public.plan.data.php has always returned all four, so three slots meant every card was labelled with the plan above it and the top tier was not for sale at all. The base pin is gone and the two breakpoints below it stay: the widget's container is already forced to 100% of its parent above, which is what the pin was really compensating for, and Swiper's own inline per-slide width then sizes the row correctly for however many cards there are. FOUR EQUAL COLUMNS, PINNED, for the same reason three were: Swiper is running in loop mode with its clones hidden, so it sizes the slides off its own view calculation and parks the row one slide to the left -- which with an unpinned width put the FREE card, the first one and the one with the least friction, off the left edge of the section. A quarter each makes the four real cards exactly one row, which is what the section is. */ #products .swiper-slide { width: 25% !important; flex: 0 0 25% !important; } /* AND BELOW THE DESKTOP BREAKPOINTS THE ROW WRAPS INSTEAD OF SLIDING. Swiper is in loop mode here, and loop mode parks the row one slide to the left of where it starts -- which on a narrow screen, where two cards fit rather than four, hid the FREE and BASIC cards off the left edge and the PRO card off the right. A visitor on a phone met the pricing table showing Standard, with no bullets ( they are hidden below ) and nothing saying there was anything either side of it. Dropping the transform and letting the flex row wrap turns the same four cards into two rows of two, and then into one column, in the order the plans actually ladder. Nothing about a card changes; only whether a phone can see it at all, which for a pricing table is the whole job. */ @media (max-width: 991px) { #products .swiper-slide { width: 50% !important; flex-basis: 50% !important; } #products .swiper-wrapper { flex-wrap: wrap !important; transform: none !important; } } @media (max-width: 767px) { #products .swiper-slide { width: 100% !important; flex-basis: 100% !important; } } /* the pagination bullets are redundant with a fixed 3-card row that never actually scrolls/pages */ #products .swiper-pagination { display: none !important; } /* the pricing "Începe acum" button lost its icon-chip styling when its original add_to_cart_button class (a WooCommerce class the theme's own CSS keys off, unrelated to actual cart behavior here) was removed along with the rest of the WooCommerce cart wiring -- restyled directly instead of restoring that class, matching the theme's own intended look: plain text + a small bordered icon-chip, not a solid pill around both. */ #products .dfb-add-btn { background-color: initial !important; color: #0a2803 !important; display: inline-flex !important; align-items: center !important; gap: 11px !important; } #products .dfb-add-btn .dfb-button-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 2px !important; border: thin solid #3c3c3c !important; background-color: #eddd5e !important; flex-shrink: 0; } /* --------------------------------------------------------------------------------------------------- The signup dialog (js/pricing.js). Deliberately built on the theme's existing .site-dialog rather than as a new component: the visitor has already seen that dialog open from other links on this page, and a purchase is the wrong moment to introduce an unfamiliar piece of interface. Only what a form needs is added on top. --------------------------------------------------------------------------------------------------- */ .signup-dialog .dialog-inner { max-width: 34rem; text-align: left; } .signup-plan-line { margin: 0 0 1rem; color: #5c6672; font-size: .95rem; } .signup-field { display: block; margin-bottom: .85rem; font-size: .9rem; color: #3f4a56; } .signup-field > span { display: block; margin-bottom: .3rem; } /* the country selector is drawn like the text boxes around it. theme.css styles every bare select as an underline 50 pixels tall, which made it the one field on the form that looked like a different form. */ .signup-field input, .signup-field select { width: 100%; padding: .6rem .75rem; border: 1px solid #d5dbd2; border-radius: .4rem; font: inherit; line-height: 1.5; background: #fff; color: #222f1d; } .signup-field input:focus, .signup-field select:focus { outline: none; border-color: #3f6b37; box-shadow: 0 0 0 3px rgba( 63, 107, 55, .15 ); } /* two names side by side on anything wider than a phone, stacked below it -- a form that scrolls on a phone loses people at exactly the point they were about to pay */ .signup-row { display: flex; gap: .75rem; } .signup-row .signup-field { flex: 1 1 0; } @media ( max-width: 30rem ) { .signup-row { display: block; } } .signup-consent { display: flex; gap: .5rem; align-items: flex-start; margin: .9rem 0; font-size: .82rem; line-height: 1.45; color: #3f4a56; } .signup-consent input { margin-top: .2rem; } .signup-note { margin: 0 0 .75rem; font-size: .8rem; color: #5c6672; } /* empty until there is something to say, so it takes no vertical space and the dialog does not jump when a message appears */ .signup-message { margin: 0; font-size: .85rem; } .signup-message.is-error { color: #a4302a; } .signup-message.is-ok { color: #3f6b37; } /* its shape is the close button's -- see .dialog-close-btn near the top; only the colour says which is the action */ .dialog-submit-btn { background: #3f6b37; } .dialog-submit-btn:hover { background: #2f5229; } /* beside the submit button, the way out is the quiet one. Two greens a shade apart read as two equal choices on the one form where the difference matters; the other dialogs have a single button and keep the green. */ .signup-dialog .dialog-close-btn { background: #e7ece5; color: #2f3b2c; } .signup-dialog .dialog-close-btn:hover { background: #d6ddd3; } .dialog-submit-btn:disabled { opacity: .6; cursor: default; } /* the Art. 13 line under the consent checkbox -- deliberately small and grey rather than hidden behind a link, because information given at the point of collection is only given if it is read */ .signup-privacy { margin: 0 0 .75rem; font-size: .78rem; line-height: 1.5; color: #6b7480; } .signup-consent a { color: #3f6b37; text-decoration: underline; } /* --- the billing-period switch -- 2026-09-23, finding E-6 --------------------------------------------------- Two buttons and not a checkbox: a checkbox states one period and leaves the other to be inferred, and the page is quoting money. Both are always readable, and the pressed one is the one the cards below are showing. `aria-pressed` carries that to a screen reader; the colour is not the only thing saying which is chosen. */ .dfb-widget-billing-period { display: flex; justify-content: center; margin: 0 0 1.75rem; } .dfb-billing-period { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid #d5dbd2; border-radius: 999px; background: #ffffff; } .dfb-billing-period-option { appearance: none; border: 0; background: transparent; color: #3f4a56; font: inherit; font-size: .95rem; line-height: 1; padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .dfb-billing-period-option:hover { color: #3f6b37; } .dfb-billing-period-option.is-active { background: #3f6b37; color: #ffffff; } /* the keyboard has to be able to see where it is -- the theme removes outlines globally */ .dfb-billing-period-option:focus-visible { outline: 2px solid #3f6b37; outline-offset: 2px; } /* --- the 2026-09-26 redesign -------------------------------------------------------------------------------------- */ /* the GDPR-ready stamp sits on a dark photograph, so it is drawn white */ .dfb-el-e00db3d .dfb-image-item img { filter: brightness( 0 ) invert( 1 ) drop-shadow( 0 0 5px rgba( 0, 0, 0, .5 ) ); } /* Magnific Popup's image box, centred vertically -- the lightbox the screenshots open in */ .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-title { font-family: inherit; font-size: .95rem; padding-right: 60px; } /* ABOVE THE STICKY HEADER, AND WITH ROOM FOR ITS OWN CONTROLS -- 2026-09-26. Two faults, both invisible on a tall screen. The theme's sticky header is z-index 9999 and Magnific Popup's viewer 1043, so wherever the picture reached the top of the window the header was drawn over it -- and over the close button. And theme.css strips the picture's padding (`body img.mfp-img { padding: 0 !important }`), which is the strip Magnific keeps above the picture for the close button and below it for the caption and the "2 of 6" counter; without it the close button sat on the picture and the counter fell off the bottom of the window. Scoped to this page's own viewer, the `dfb-shot-lightbox` class site-extra.js gives it. */ .mfp-bg.dfb-shot-lightbox { z-index: 10042; } .mfp-wrap.dfb-shot-lightbox { z-index: 10043; } .dfb-shot-lightbox img.mfp-img { padding: 44px 0 44px !important; } /* theme.css zeroes this too (`body .mfp-bottom-bar { margin-top: 0 }`), which parks the caption at 100% of the figure -- one pixel below the window whenever the picture fills its height. Magnific's own -36px puts it back inside the strip reserved above. */ .dfb-shot-lightbox .mfp-bottom-bar { margin-top: -36px; } /* THE CLOSE BUTTON IS A WHITE DISC, not a bare "×". This vendor.css lacks Magnific's image-viewer rule that makes the "×" white, so it fell back to `.mfp-close-btn-in .mfp-close { color: #333 }` -- dark grey on a near-black backdrop, at 65 % opacity, and barely there. A disc reads on the backdrop and on a white screenshot alike. */ .dfb-shot-lightbox .mfp-close { top: 2px; right: 0; width: 40px; height: 40px; padding: 0; line-height: 40px; text-align: center; border-radius: 999px; background: #ffffff; color: #0a2803; opacity: 1; font-size: 30px; box-shadow: 0 2px 10px rgba( 0, 0, 0, .45 ); } .dfb-shot-lightbox .mfp-close:hover, .dfb-shot-lightbox .mfp-close:focus-visible { background: #eddd5e; } /* THE ANDROID BOX IN THE FOOTER -- site-extra.js fills [data-android-store]: a sentence while the listing is not public, a Google Play button once ANDROID_STORE_URL is set. The box is green and its text white, so the button is drawn white and the pending sentence stays in the box's own colour. */ .dfb-store-link { display: block; margin-top: .9rem; font-size: .9rem; line-height: 1.45; } .dfb-store-link.is-pending { font-style: italic; opacity: .9; } .dfb-store-link a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; background: #ffffff; color: #0a2803 !important; font-weight: 700; text-decoration: none; } .dfb-store-link a:hover { background: #eddd5e; } .dfb-store-link a::before { content: '\25B6'; font-size: .8em; } /* the QR code for the same listing: drawn with its own white quiet zone, so it scans on the green box */ /* centred in the box under the button (2026-09-28, the user's request) */ .dfb-store-qr { display: block; width: 120px; height: 120px; margin: .8rem auto 0; border-radius: 6px; } .dfb-store-note { display: block; margin-top: .6rem; font-style: italic; opacity: .9; } /* a detail that has nowhere to link to is text, not a link */ .dfb-icon-box-title .dfb-title-text-plain { color: inherit; }