A Lovasember: CSS and component guide for Gemini

Use this guide together with lovasember-reference.html, the assigned variant's complete prompt and template-v2.html. The reference was extracted from https://www.lovasember.hu/ on 24 September 2026. It is the design authority. The supplied reusable template is a second source of section structures, not a replacement visual identity.

1. What the reference actually contains

lovasember-reference.html contains the existing site's visible navbar, hero/header, every visible content section and footer. The real Webflow stylesheet and all embedded section styles are included inside the HTML, in their original cascade order. The images, font files and Webflow interaction scripts use the original public asset URLs. This is the practical file to attach to Gemini.

lovasember-reference-offline.html is the optional larger version for viewing without network access. It embeds the original image, font and runtime bytes. Both files preserve the current component geometry. The supplied original-fragments/ files retain the literal original navbar, hero and footer source, including original text, class names and attributes. They make it possible to compare exact extraction rather than a recreation.

The extracted reference removes tracking, the cookie overlay and three designs already hidden on the live site. It does not replace the visible design. Responsive image srcset lists are omitted in favour of the original full image src. Legal links resolve to the original site. These portability changes are not design changes.

Important: this is a source/design reference. Its old offers, medical language, duplicate proof and broken # form link are not the new content brief. Use the new copy and confirmed offer facts. The currently visible hero is .hero-original-section. The obsolete .home-hero and hidden .section_hero are not alternative current heroes.

2. Visual hierarchy and non-negotiable shell

The identity comes from the combination of a white fixed navigation, deep green expanses, large Lora headlines, warm light backgrounds, real outdoor photography, gold details, generous section spacing and alternating editorial compositions. Copying only green and gold is insufficient.

Copy .navbar1_component and .footer4_component from the reference. Preserve their nested markup, logo assets, alignment, component classes, proportions and responsive behaviour. The source navbar is the actual header shell. The hero immediately below it is the header content reference. A variant may change hero content/composition according to its brief while retaining the site's visual language.

The exact reference retains the original labels and copyright line. In a generated variant, the necessary Rólam → Rólunk navigation label and working page/anchor destinations may be changed to match the new joint site. Keep the shell's visual treatment. Preserve legal destinations. Do not copy an empty href="#" as a working application button. Keep one visible H1, meaningful anchor IDs and a complete footer.

3. Exact colour and type foundations

The original custom CSS defines these values:

:root {
  --color-green: #0C2107;
  --color-gold: #D1A300;
  --color-cream: #fdfcf8;
  --color-white: #ffffff;
  --color-text: #333333;
  --color-text-light: #4a4a4a;
  --font-head: 'Lora', serif;
  --font-body: system-ui, -apple-system, sans-serif;
  --font-reading: 'Georgia', 'Times New Roman', serif;
  --font-sig: 'Dancing Script', cursive;
}

The booking component also has its own token names (--dark-green, --gold, --cream, --text-dark). The Webflow stylesheet has a further set of generated variable names. Keep the original declarations and their order. Introducing a second globally conflicting token system is unnecessary.

The reference includes the original font-face definitions. The Webflow family name Lora Variablefont Wght and Google Lora occur in different components. They are not a reason to substitute a different serif. Use the actual source font rules first.

4. Width, spacing and image geometry

Keep the image-to-text scale. A page with the same colours but many tiny images, narrow cards and compressed vertical spacing will not resemble the source. Let long content flow in meaningful editorial blocks. Use accordion answers for supporting detail, not to hide the main argument.

5. Buttons, cards and section transitions

The original primary custom button is .btn-gold: deep-green text, gold background, Lora 700, uppercase, 16px 32px padding, 4px radius and a soft gold shadow. Its hover changes to #bfa020 and translates upward 3px. The outline button is .btn-outline, transparent with a gold border, white text, 14px 30px padding and 14px type. The navbar's .button.is-small belongs to the Webflow family and should retain that source treatment.

The .design-card uses white, 50px 40px padding, 8px radius, a 5px gold top border and a soft shadow. It reduces to 30px 20px on mobile. Reuse it where the content is genuinely parallel. A row of cards is not the default answer for every section.

The 60px by 3px .decor-line, subtle photographic borders, numbered method cards and shaped section edges are part of the existing design. The hero has a 25px scalloped transition built with a radial gradient and a 40px repeat. Other .section-divider and .section-divider-bottom elements use their own source backgrounds. Reuse the whole transition with the correct adjacent background colours. Do not place a cream scallop over another cream section and expect it to be visible.

6. Component catalogue: locate it directly in the HTML

The reference adds nonvisual data-reference-section="Sxx" attributes and nearby comments. Each maps to actual source markup.

Repeated use is allowed when it serves the argument. Vary image side, emphasis and background only within the source system. Keep equal visual weight for Sanyi and Dóri. A generic card bearing Dóri's name is not a substitute for an equally considered introduction.

7. Using template-v2.html without importing its brand

The supplied template is copied unchanged from Matt's file. Its placeholder wording, business examples, calculators, prices, claims and colour choices are not Lovasember facts. Use selected section mechanics and layout, then dress them with the original Lovasember tokens, type, spacing, buttons, imagery and transitions.

The before/after and statistics sections are optional structure ideas only. There are no verified before/after clinical outcomes, success percentages or new-program sales numbers to fill them. Choose another composition when the content does not warrant these patterns.

When adapting a template section, place it under a scoped class such as .lv-variant-section. Reuse the Lovasember tokens. Avoid unscoped template rules for body, h1, .container, .button, nav or footer that would overwrite the exact shell. Preserve any copied template interaction only if the final page uses it.

8. Responsive behaviour and interaction

The source uses Webflow breakpoints at 991px, 767px and 479px, plus desktop-specific rules starting at 992px. The visible hero stacks below 991px; its text column has order: 2, so its mobile order must be inspected rather than guessed. At the narrowest breakpoint the source H1 is 2.2rem and hero top padding is 100px. Keep mobile CTA labels readable and touch targets usable.

The original runtime drives the Webflow navbar and testimonial slider. The remaining source scripts handle quote expansion, image-proof touch states, FAQ toggles and reveal transitions. If producing a standalone output, either retain the dependencies or reproduce those particular behaviours faithfully. A visible hamburger without an opening menu is unfinished. The current source mobile menu was not clickable at 390px in the source comparison. Preserve its visual shell, but explicitly repair and test the menu interaction in the new Gemini output rather than inheriting this defect.

For new output, reveal animations must have a readable fallback. Existing .booking-card-wrapper begins at opacity zero and needs its .is-visible state. The source mobile .fade-up-text booking introduction also remained opacity-zero during the source/reference check. The completed page must not hide its booking card, heading or opening copy when JavaScript or an observer fails. This is a functional improvement for the new output, not a reason to redraw the reference.

Use native buttons with keyboard support, labels linked to inputs, clear focus styles, and aria-expanded for custom accordions/menus. Keep content visible in reduced-motion mode. Avoid autoplay movement that makes copy hard to read. These practical checks apply equally to any chosen template section.

9. Photos, copy and factual integrity

The reference contains 21 distinct image URLs, including logos, real location/program photos and named testimonial portraits. Their original URLs remain on data-original-src. PHOTO-INDEX.md identifies the actual files and alt text. Use subject and attribution, not a filename guess, to choose a photo. Existing client portraits remain attached to their own quotations.

The newly mentioned Messenger photos are not in this package. Dóri's own published biography is available, but a joint portrait and approved final imagery are separate inputs. An intentional, well-designed text introduction is preferable to a false portrait. Do not generate a photorealistic likeness and present it as either person.

Customer-facing copy comes from the assigned variant. Editorial instructions, source uncertainty, implementation fees, campaign targeting and review status belong outside the finished prospect page. The source site's old therapeutic language is not a mandate to repeat it. Maintain the distinction between coaching/counselling and clinical treatment, without turning the page into a wall of warnings.

10. Build and review standard for the Gemini output

Deliver one complete HTML for the assigned variant with its CSS and working demo interactions. Keep all 14 substantive copy sections unless two are deliberately combined into at least 12 equally substantive sections. Header, footer, navigation, an ad appendix and individual form steps do not count toward that minimum. Preserve the actual body copy, questions, answers, cards and action microcopy. A headline plus two lines is not an implementation of a detailed section.

The page should have a deliberate reading rhythm: a strong hero, substantial image/text explanations, enough dark/light contrast, grounded proof, a clear process, useful detail and a confident final action. The supplied component suggestions are a route to that result, not an excuse to make every section look identical. Use as much vertical space as the complete content needs.

Inspect desktop at 1440px and mobile at 390px, as well as a tablet width. Compare the header, hero, one editorial section, one dark section and footer against the actual reference. Check that fonts loaded, images show, crops make sense, nothing overlaps, all copy is readable, and menus/accordions/forms work. Compare visual quality as well as technical validity. A passing link check alone says nothing about layout quality.

For this assignment, form/calendar/payment routes are honest demonstrations. A form may advance to a demo thank-you and booking state, but cannot say data was saved, email sent, availability confirmed or payment taken. Do not put agency review controls into the customer's normal page content. Provide any remaining source-dependent notes after the delivered HTML rather than replacing sections with generic placeholders.