/* De-Ro shared design system — header, footer, nav, language switcher. Brand colors sourced from the real logo (public/images/...de-ro-logo-prim-potp.svg): antracit #231f20 + red #f5333f, not the Tilda template's orange accent. */ /* Tilda's own base stylesheet sets `*, *:before, *:after { box-sizing: content-box }` site-wide (loaded after this file, so it wins) -- fine for Tilda's own pixel-tuned content, but every one of our own dero-* components was built assuming the normal modern default, border-box. Re-asserting it, scoped to our own class prefix only, is what a width + padding combo like the mobile panel's actually needs to render at the size specified instead of width-plus-padding (a real bug this caused: the panel measured 380px when its CSS said 340px). Scoped by attribute selector rather than changing the global `*` rule, which would risk shifting Tilda's own already-tuned layouts across all 52 pages. */ [class*="dero-"] { box-sizing: border-box; } :root { --ink: #231f20; --ink-soft: #3a3436; --accent: #f5333f; --accent-dark: #d92834; --bg: #ffffff; --bg-soft: #f7f7f8; --border: #e7e5e5; --muted: #706b6c; --header-h: 76px; --container: 1240px; --radius: 10px; --shadow: 0 2px 16px rgba(35, 31, 32, 0.08); } /* Roboto is the site's brand font (imported in layout.ts's ), but was previously only ever applied to Tilda's own content classes (.t-text, .t-name, ...) inside #allrecords -- never to `body` itself. Our own header/footer/mobile-menu markup (the .dero-* classes throughout this file) sits outside those classes, so it fell back to the browser's default serif font with no font-family set here at all. This is the single biggest fix for "the menu looks unstyled/inconsistent". */ body { font-family: "Roboto", Arial, sans-serif; /* Safety net: several decorative pseudo-elements in this file (diagonal dividers, blurred accent blobs) are deliberately offset past their own box's edges, and a mistake in one (as happened once already) turns into a page-wide horizontal scrollbar rather than a contained visual glitch. This does not affect position:sticky (the header) as long as body remains the page's only scrolling element, which it is here. */ overflow-x: hidden; } .dero-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .dero-header { position: sticky; top: 0; z-index: 500; background: var(--bg); border-bottom: 1px solid var(--border); height: var(--header-h); overflow: hidden; } .dero-header::before { content: ""; position: absolute; inset: 0; background-image: var(--corrugated-bg-red); pointer-events: none; } .dero-header__inner { position: relative; z-index: 1; } .dero-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .dero-header__logo { display: flex; align-items: center; flex-shrink: 0; } .dero-header__logo img { height: 42px; width: auto; display: block; } .dero-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .dero-nav__item { position: relative; } .dero-nav__link { display: flex; align-items: center; gap: 4px; padding: 10px 14px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; white-space: nowrap; } .dero-nav__link:hover, .dero-nav__link:focus-visible { color: var(--accent); background: var(--bg-soft); } .dero-nav__link.is-active { color: var(--accent); } .dero-nav__caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; } .dero-nav__item:hover .dero-nav__caret { transform: rotate(225deg) translateY(2px); } .dero-submenu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; } .dero-nav__item:hover .dero-submenu, .dero-nav__item:focus-within .dero-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .dero-submenu__link { display: block; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 6px; } .dero-submenu__link:hover { background: var(--bg-soft); color: var(--accent); } /* Language switcher */ .dero-langs { display: flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; flex-shrink: 0; } .dero-langs__link { padding: 5px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); text-decoration: none; border-radius: 999px; } .dero-langs__link.is-active { background: var(--ink); color: #fff; } .dero-langs__link:hover:not(.is-active) { color: var(--ink); } .dero-header__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } /* "Zatraži ponudu" / "Request a quote" -- the site's primary conversion action, one click away from every page instead of buried inside the spare-parts catalog only. Reuses .dero-btn (footer's "Get directions" button) so every solid brand-red CTA on the site looks and behaves the same way. */ .dero-btn--quote { padding: 9px 16px 9px 14px; font-size: 13px; } .dero-btn--quote svg { flex-shrink: 0; } /* Mobile burger + slide-in panel */ .dero-burger { display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .dero-burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; } .dero-mobile-panel { position: fixed; inset: 0; z-index: 900; visibility: hidden; } .dero-mobile-panel__backdrop { position: absolute; inset: 0; background: rgba(35, 31, 32, 0.5); opacity: 0; transition: opacity 0.2s ease; } .dero-mobile-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--bg); padding: 18px 20px 24px; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease; } .dero-mobile-panel.is-open { visibility: visible; } .dero-mobile-panel.is-open .dero-mobile-panel__backdrop { opacity: 1; } .dero-mobile-panel.is-open .dero-mobile-panel__sheet { transform: translateX(0); } .dero-mobile-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .dero-mobile-panel__head .dero-header__logo img { height: 32px; } .dero-mobile-panel__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--bg-soft); border-radius: 50%; cursor: pointer; color: var(--ink); flex-shrink: 0; transition: background-color 0.15s ease, color 0.15s ease; } .dero-mobile-panel__close:hover { background: rgba(245, 51, 63, 0.12); color: var(--accent); } /* Full-width primary CTA at the top of the panel -- the same request-a- quote button as the header's, just full-width for a touch target. */ .dero-mobile-quote { width: 100%; justify-content: center; padding: 13px 16px; font-size: 14px; margin-bottom: 8px; } .dero-mobile-nav { margin-top: 12px; display: flex; flex-direction: column; } .dero-mobile-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 14px 6px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; font-family: inherit; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; transition: background-color 0.15s ease, color 0.15s ease; } .dero-mobile-nav__link:hover, .dero-mobile-nav__link:active { background: var(--bg-soft); color: var(--accent); } .dero-mobile-nav__caret { flex-shrink: 0; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease; } .dero-mobile-nav__toggle[aria-expanded="true"] .dero-mobile-nav__caret { transform: rotate(225deg); } .dero-mobile-nav__children { display: flex; flex-direction: column; padding-left: 14px; } .dero-mobile-nav__children[hidden] { display: none; } .dero-mobile-nav__children .dero-mobile-nav__link { font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: none; padding: 10px 6px; justify-content: flex-start; } .dero-mobile-langs { margin-top: 20px; display: flex; gap: 8px; } .dero-mobile-langs a { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 13px; transition: border-color 0.15s ease, color 0.15s ease; } .dero-mobile-langs a:hover:not(.is-active) { border-color: var(--accent); color: var(--accent); } .dero-mobile-langs a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } /* 1180px, not 960px: the header row (logo + nav + quote button + language switcher) needs about 1108px of natural width now that the quote button is part of it -- 960px used to be enough back when the row only had nav+langs, but left as-is it now leaves a ~150px range (960-1108px, which is exactly where a phone's "Desktop site" mode renders) where the desktop row is shown but doesn't actually fit, overflowing the page horizontally instead of switching to the burger menu. */ @media (max-width: 1180px) { .dero-nav, .dero-langs, .dero-header__right .dero-btn--quote { display: none; } .dero-burger { display: flex; } } /* ---------- Footer ---------- */ .dero-footer { position: relative; overflow: hidden; background: var(--ink); color: #f1efef; } .dero-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--corrugated-bg); pointer-events: none; } .dero-footer > * { position: relative; z-index: 1; } /* ---------- EU co-financing notice --------------------------------------- Required alongside the footer for the "Usklađivanje sa ZKS-om" grant. A separate section, not part of .dero-footer, but styled to match it exactly (same dark background/typography/spacing) and directly adjacent above it, so the two read as one continuous dark footer area. The diagonal "torn edge" + corrugated texture that used to sit on the footer's own top edge moves here instead, since this is now the first dark section a visitor reaches scrolling down. */ .dero-eu-notice { position: relative; overflow: hidden; background: var(--ink); color: #cfc9ca; margin-top: 64px; padding: 28px 0; } .dero-eu-notice::before { content: ""; position: absolute; inset: 0; background-image: var(--corrugated-bg); pointer-events: none; } .dero-eu-notice::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none; } .dero-eu-notice__inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr 1fr; gap: 28px; align-items: center; } .dero-eu-notice__col { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; } .dero-eu-notice__flag { flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; } .dero-eu-flag { width: 60px; height: 40px; flex-shrink: 0; display: block; border-radius: 2px; } .dero-eu-notice__flag span { font-weight: 700; color: #fff; font-size: 12.5px; } .dero-eu-notice__project strong { color: #fff; font-size: 13px; margin-bottom: 2px; } .dero-eu-notice__disclaimer { color: #a79f9f; font-size: 11px; } @media (max-width: 860px) { .dero-eu-notice__inner { grid-template-columns: 1fr; gap: 20px; } } .dero-footer__top { padding: 56px 0 40px; display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 40px; } .dero-footer__heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; margin: 0 0 16px; } .dero-footer__logo { display: inline-block; } .dero-footer__logo img { height: 48px; margin-bottom: 16px; } .dero-footer__text { font-size: 14px; line-height: 1.7; color: #cfc9ca; margin: 0 0 6px; } .dero-footer__text a { color: #fff; text-decoration: none; } .dero-footer__text a:hover { color: var(--accent); } .dero-footer__links { display: flex; flex-direction: column; gap: 9px; } .dero-footer__links a { color: #cfc9ca; text-decoration: none; font-size: 14px; } .dero-footer__links a:hover { color: #fff; } .dero-footer__map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); aspect-ratio: 16/10; margin-bottom: 14px; } .dero-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; } .dero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .dero-btn:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(217, 40, 52, 0.3); } .dero-btn:active { transform: translateY(0); box-shadow: none; } .dero-social { display: flex; gap: 10px; margin-top: 16px; } .dero-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; } .dero-social a:hover { background: var(--accent); } .dero-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 18px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-size: 12.5px; color: #a79f9f; } .dero-footer__bottom a { color: #a79f9f; text-decoration: none; } .dero-footer__bottom a:hover { color: #fff; } .dero-footer__bottom-spacer { display: block; } /* "Powered by Smart Beez" is always shown in English, unhyphenated, with the same bee icon regardless of page language -- a fixed attribution badge rather than translated UI copy. Centered in the bottom bar via the grid above (a matching empty spacer keeps it centered rather than pulled toward the shorter copyright text on the left). */ .dero-powered { justify-self: center; display: inline-flex; align-items: center; gap: 4px; color: #a79f9f; font-weight: 400; white-space: nowrap; } .dero-powered a { color: #d8d2d2; text-decoration: none; font-weight: 700; } .dero-powered a:hover { color: var(--accent); } @media (max-width: 860px) { .dero-footer__top { grid-template-columns: 1fr; gap: 32px; } .dero-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; } .dero-footer__bottom-spacer { display: none; } } /* ---------- Page-content polish ----------------------------------------- These target Tilda's own block classes (t846 = icon/feature list, t558 = testimonials, t814 = CTA banner) so one change here applies across every page and all 4 languages, without editing 52 pages of extracted markup. */ /* Alternate section backgrounds for visual rhythm on long pages. */ #allrecords > .r:nth-of-type(even) { background-color: var(--bg-soft) !important; } /* "Naša ponuda" / feature-list icons: circular tinted backdrop. */ .t846__imgwrapper { width: 64px; height: 64px; border-radius: 50%; background: rgba(245, 51, 63, 0.09); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .t846__img { width: 28px; height: 28px; max-width: 28px; } /* Testimonials ("Naše reference"): proper cards instead of flat bubbles. */ .t558__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .t558__col { display: flex !important; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); width: auto !important; max-width: none !important; margin: 0 !important; } .t558__col .t-cell:first-child { width: auto !important; } .t558__bgimg { width: 44px; height: 44px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--bg-soft); flex-shrink: 0; } .t558__bubble-tail { display: none !important; } .t558__cell { width: auto !important; } .t558__bubble { background: none !important; padding: 0 !important; border: none !important; } .t558__bubble::before { display: none !important; } .t558__name { font-weight: 700 !important; color: var(--ink); } .t528__descr { color: var(--muted) !important; font-size: 12.5px !important; margin-bottom: 8px; } .t558__text { border-left: 2px solid var(--accent); padding-left: 14px; color: var(--ink-soft) !important; font-size: 13.5px !important; line-height: 1.6 !important; } /* CTA banner: brand-colored instead of the default pale green tint. */ .t814__blocktext { background-color: var(--ink) !important; } .t814__title, .t814__descr { color: #fff !important; } .t814__line { background-color: var(--accent) !important; opacity: 1 !important; } .t814 .t-btn { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* Smooth in-page jumps (T993 category nav below), offset so the sticky header — and, on pages that have one, the sticky jump-nav bar — never covers the top of the section being jumped to. */ html { scroll-behavior: smooth; } [id^="rec"] { scroll-margin-top: calc(var(--header-h) + 64px); } /* ---------- Long-scroll catalog pages ("Novi strojevi" / "Potrošni materijal"): sticky category nav + modern accordion -------------------- These pages (T993 jump-nav + T1118 accordions) are the longest single- scroll pages on the site (8 pages across 4 languages). Rather than restructure the content, the jump-nav becomes a sticky pill toolbar with scroll-spy highlighting (site.js), and the accordion becomes a proper card list — both purely visual, so the underlying Tilda markup/JS keeps working unchanged. */ .t993 { background: #fff; border-bottom: 1px solid var(--border); } /* Pinned by site.js once the page scrolls past the nav's natural position — plain `position: sticky` only stays stuck for as long as its own (short) Tilda record wrapper is in view, not across the much taller accordion sections below it, so this needs a JS-driven fixed position instead (a hidden placeholder of the same height keeps content from jumping when it switches). */ .t993.is-pinned { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 400; box-shadow: 0 2px 8px rgba(35, 31, 32, 0.08); } .t993__container { padding: 14px 0 !important; max-width: none !important; } .t993__col { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* The 24px horizontal inset lives on the scrollable list itself (not the static container above) so it scrolls away with the content instead of sitting beyond the scroll-clip boundary as a dead strip. With it on the container, that strip was outside `.t993__items-list`'s own clipping box -- a pill cut off at the screen edge visually blended into that padding, and tapping the last few px of a partially-visible pill landed on the (unclickable) container behind it instead of the button. */ .t993__items-list { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0 24px 4px; touch-action: pan-x; } .t993__items-list::-webkit-scrollbar { height: 5px; } .t993__items-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .t993 .t-btn.t993__btn_btn { background: var(--bg-soft) !important; color: var(--ink) !important; border-radius: 999px !important; padding: 10px 18px !important; margin: 0 !important; width: auto !important; min-height: auto !important; height: auto !important; flex: 0 0 auto !important; font-size: 13.5px !important; font-weight: 600 !important; transition: background-color 0.15s ease, color 0.15s ease; touch-action: manipulation; } .t993 .t-btn.t993__btn_btn:hover { background: rgba(245, 51, 63, 0.12) !important; } .t993 .t993__btn-text-wrapper { padding: 0 !important; margin: 0 !important; white-space: nowrap !important; overflow-wrap: normal !important; } .t993 .t-btn.t993__btn_btn.is-jump-active { background: var(--ink) !important; color: #fff !important; } /* Category heading used both above an accordion (T1118) and as a standalone intro (T004, e.g. "PREO – sustavi za toplo i hladno ljepljenje") — a small red accent rule instead of a plain heading. */ .t1118 .t-section__title { font-weight: 800 !important; color: var(--ink) !important; } .t1118 .t-section__title::after, .t004 .t-text > p:first-child > strong[style*="font-size"]::after { content: ""; display: block; width: 56px; height: 3px; background: var(--accent); border-radius: 3px; margin: 14px auto 0; } .t004 .t-text > p:first-child > strong[style*="font-size"] { display: inline-block; position: relative; font-size: 26px !important; color: var(--ink) !important; padding-bottom: 14px; } /* Accordion items → modern cards. */ .t1118 .t-container { display: flex !important; align-items: flex-start; gap: 24px; } .t1118 .t-col_6 { width: auto !important; flex: 1 1 0 !important; min-width: 0; } .t1118__accordion.t_faq__accordion { border: 1px solid var(--border) !important; border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .t1118__accordion.t_faq__accordion:hover { border-color: rgba(245, 51, 63, 0.35) !important; box-shadow: var(--shadow); } .t1118__trigger-button { padding: 18px 20px !important; } .t1118__title { font-weight: 700 !important; color: var(--ink) !important; font-size: 15px !important; } .t1118__icon circle { fill: rgba(245, 51, 63, 0.1); } .t1118__icon .t1118__lines path { stroke: var(--accent); } .t1118__trigger-button[aria-expanded="true"] .t1118__icon { transform: rotate(45deg); } .t1118__icon { transition: transform 0.2s ease; } .t1118__content { padding: 0 20px 22px !important; } .t1118__textwrapper { display: flex; flex-wrap: wrap; gap: 20px; } .t1118__image { border-radius: 8px; border: 1px solid var(--border); max-width: 260px; flex-shrink: 0; } .t1118__descr { color: var(--ink-soft) !important; font-size: 13.5px !important; line-height: 1.7 !important; flex: 1 1 280px; min-width: 0; } .t1118__descr ul { padding-left: 18px; margin: 8px 0; } .t1118__descr li { margin-bottom: 4px; } @media (max-width: 900px) { .t1118 .t-container { flex-direction: column; } } /* Floating "back to top" button, injected by site.js — useful on these long single-scroll pages (and any other long page). */ .dero-backtotop { position: fixed; right: 20px; bottom: 24px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(35, 31, 32, 0.25); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease; z-index: 60; } .dero-backtotop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .dero-backtotop:hover { background: var(--accent); } /* ---------- Modern / dynamic pass ---------------------------------------- Scroll-reveal, content-image treatment and a subtle industrial accent -- all global, CSS/JS-only (site.js), so it applies uniformly across every page without touching the 52 pages of extracted per-page content. */ /* Scroll-reveal: each top-level section fades/slides in the first time it enters the viewport. site.js applies this progressively -- it sets the *hidden* starting state itself (inline style, only once it has confirmed IntersectionObserver is available and an observer is watching), so a page with JS disabled or erroring never ends up with content stuck invisible; this class only ever defines the transition + revealed state. */ .dero-reveal { transition: opacity 0.6s ease, transform 0.6s ease; } .dero-reveal.is-revealed { opacity: 1 !important; transform: none !important; } /* Content images: soft rounded corners + a subtle hover lift wherever a photo is the main element of its own block -- not logos/icons/badges, which keep their own sizing and don't invite a "hover" affordance. */ .t-img:not(.dero-header__logo img):not(.dero-footer__logo img):not(.t846__img):not(.t558__bgimg) { border-radius: 10px; } .t107 img, .t396 img, .t1148__img { transition: transform 0.35s ease; } .t107:hover img, .t1148__item:hover .t1148__img { transform: scale(1.03); } .t107 { overflow: hidden; } /* Corrugated-cardboard accent: a field of thin repeating sine-wave lines -- literally the cross-section profile of the product this company sells -- as a faint watermark texture behind the two dark, brand-colored sections (the CTA banner and the footer), plus a diagonal "torn edge" wedge where each of those sections meets the lighter section above it, instead of a flat rectangular seam. Both are deliberately subtle: a low-opacity texture and a shallow-angle cut, not a loud graphic effect. */ :root { --corrugated-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7C3.5 0 10.5 0 14 7C17.5 14 24.5 14 28 7' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'/%3E%3C/svg%3E"); /* Same wave, in the brand red, for use on light backgrounds (white doesn't show up on white) -- the header. */ --corrugated-bg-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7C3.5 0 10.5 0 14 7C17.5 14 24.5 14 28 7' fill='none' stroke='%23f5333f' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E"); } .t814__blocktext { position: relative; overflow: hidden; } .t814__blocktext::before { content: ""; position: absolute; inset: 0; background-image: var(--corrugated-bg); pointer-events: none; } .t814__title, .t814__descr, .t814__line, .t814 .t-btn { position: relative; z-index: 1; } /* Diagonal red accent line where the header meets the page content -- scrolls away with the page (the header itself stays sticky/plain), a small dynamic touch right at the top of every page instead of a flat border. Oversized left/right so the skew never reveals a gap at the viewport edges. */ .dero-hero-divider { position: relative; height: 0; overflow: visible; pointer-events: none; } .dero-hero-divider::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--accent); transform: skewY(-1deg); } /* Hero (homepage) image accent: a soft blurred color-blob peeking out from behind the rounded photo instead of it sitting flat on white -- a restrained version of the "blurred gradient blob" hero treatment. */ .t1001__img-wrapper { position: relative; z-index: 0; } .t1001__img-wrapper::before { content: ""; position: absolute; z-index: -1; width: 55%; height: 65%; top: -10%; right: 0; background: radial-gradient(circle, rgba(245, 51, 63, 0.28), rgba(245, 51, 63, 0) 70%); filter: blur(50px); pointer-events: none; } .t1001__img-wrapper::after { content: ""; position: absolute; z-index: -1; width: 45%; height: 55%; bottom: -8%; left: 0; background: radial-gradient(circle, rgba(35, 31, 32, 0.22), rgba(35, 31, 32, 0) 70%); filter: blur(50px); pointer-events: none; } /* ---------- Content headings (dero-h1/h2/h3) ------------------------- Every extracted Tilda page used a plain
for its headings -- no real

/

/

anywhere in body content, which is both a real SEO gap (no page-topic signal for search engines) and the reason heading sizes look inconsistent from page to page: each Tilda block template shipped its own arbitrary size (52px here, 42px there, 36px somewhere else) for what is structurally the same role. The one-off migration script that promoted those divs to real h1/h2/h3 tags (keeping every original class untouched, so nothing else regresses) also added one of these three marker classes so this stylesheet can give every heading *level* one consistent size sitewide, instead of whatever that page's block happened to ship with. Only font-size/weight/line-height/color are touched (not margin/padding) so each block's own tuned spacing survives. !important because the per-page Tilda bundle loads AFTER this stylesheet in and matches at equal or higher specificity via its own (often multi-class) selectors. */ #allrecords .dero-h1, #allrecords .dero-h2, #allrecords .dero-h3 { font-family: "Roboto", Arial, sans-serif !important; } #allrecords .dero-h1 { font-size: 40px !important; font-weight: 700 !important; line-height: 1.2 !important; } #allrecords .dero-h2 { font-size: 26px !important; font-weight: 600 !important; line-height: 1.3 !important; } #allrecords .dero-h3 { font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; } @media (max-width: 760px) { #allrecords .dero-h1 { font-size: 30px !important; } #allrecords .dero-h2 { font-size: 21px !important; } }