/* ===================================================================== DENIR INŽINERIJA — PREMIUM DESIGN SYSTEM (v3.0.0) --------------------------------------------------------------------- Loads AFTER assets/denir.css and re-skins every widget to the brochure brand (navy + leaf green) with a modern European product-design language: generous 8px-based spacing, refined type scale, glass header, soft elevation, organic shapes and subtle cubic-bezier micro-interactions. It is a pure override layer — no markup changes required. Everything is scoped under .denir-hp so the theme and Elementor chrome stay untouched. SECTIONS 01 Design tokens (brand, type, space, radius, elevation, motion) 02 Base + typography scale 03 Layout rhythm, section backgrounds, organic dividers 04 Buttons + links 05 Header / navigation (glass) + mobile menu 06 Hero 07 Cards (services, features, projects, testimonials, contact) 08 Forms 09 Footer 10 Motion + reveal system 11 Responsive 12 Accessibility + reduced motion ===================================================================== */ /* ===================================================================== 01 — DESIGN TOKENS ===================================================================== */ .denir-hp{ /* Brand palette — GREEN / DARK GREEN / WHITE / LIGHT GRAY only. The dark tone is a deep forest green, not navy: every rule in denir.css paints "dark" with var(--navy), so redefining that token converts the entire site away from blue in one place. No blue remains anywhere. */ --green:#5CA524;--green-2:#6FBF2E;--green-dark:#3F7D1B;--green-deep:#2F6114; --green-soft:#EDF7E3;--green-tint:#F6FBF1; --forest:#16351C;--forest-2:#1E4726;--forest-3:#0F2614; /* Legacy "navy" tokens now resolve to the forest-green scale. */ --navy:var(--forest);--navy-2:var(--forest-2);--navy-3:var(--forest-3);--navy-deep:var(--forest-3); /* Legacy aliases — every rule in denir.css that still asks for orange now resolves to the brand green, so the rebrand is complete without touching a single widget template. */ --orange:var(--green);--orange-dark:var(--green-dark);--orange-soft:var(--green-soft); --accent:var(--green);--accent-dark:var(--green-dark); /* Neutrals — warm-neutral light grays (no blue cast). */ --bg:#F7F8F6;--bg-2:#F1F5EE;--surface:#FFFFFF;--surface-2:#FAFBF9; --line:#E7EAE4;--line-2:#DCE1D6; --text:#17211A;--muted:#5F6B60;--muted-light:#A9B4A6;--star:#E8A317; /* Typography */ --f-display:"Plus Jakarta Sans","Inter","Segoe UI",system-ui,sans-serif; --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* Layout — 1280px content inside a 1440px shell, generous gutters. */ --maxw:1280px; --gutter:clamp(1.25rem,5vw,3rem); --sect:clamp(3.75rem,9vw,7.5rem); /* 60 → 120px */ --gap:clamp(1.25rem,2.2vw,2rem); /* 8px spacing scale */ --s-1:.5rem;--s-2:1rem;--s-3:1.5rem;--s-4:2rem;--s-5:2.5rem; --s-6:3rem;--s-8:4rem;--s-10:5rem;--s-15:7.5rem; /* Radius */ --r:16px;--r-lg:24px;--r-xl:32px;--r-2xl:40px;--r-pill:999px; /* Elevation — low-contrast, wide, navy-tinted (never grey mud). */ --sh-xs:0 1px 2px rgba(22,53,28,.04),0 2px 6px rgba(22,53,28,.04); --sh-sm:0 2px 4px rgba(22,53,28,.03),0 8px 20px -8px rgba(22,53,28,.10); --sh:0 4px 10px rgba(22,53,28,.04),0 20px 44px -22px rgba(22,53,28,.22); --sh-lg:0 8px 18px rgba(22,53,28,.05),0 40px 80px -32px rgba(22,53,28,.30); --sh-green:0 14px 30px -14px rgba(92,165,36,.55); /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.36,.64,1); --t-fast:.22s;--t:.4s;--t-slow:.7s; font-family:var(--f-body); font-size:1.0625rem; /* 17px base → 18px paragraph via .lead */ line-height:1.7; letter-spacing:-.002em; color:var(--text); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ===================================================================== 02 — BASE + TYPOGRAPHY SCALE ===================================================================== */ .denir-hp h1,.denir-hp h2,.denir-hp h3,.denir-hp h4{ font-family:var(--f-display);font-weight:700;color:var(--navy); line-height:1.12;letter-spacing:-.028em;text-wrap:balance; } .denir-hp .display{font-size:clamp(2.6rem,5.6vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.035em} .denir-hp .h1{font-size:clamp(2.2rem,4.4vw,3.25rem);letter-spacing:-.032em} .denir-hp .h2{font-size:clamp(1.9rem,3.4vw,3.25rem);letter-spacing:-.03em;line-height:1.14} .denir-hp .h3{font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.3} .denir-hp .lead{font-size:clamp(1.0625rem,1.25vw,1.175rem);line-height:1.72;color:var(--muted);max-width:60ch} .denir-hp p{line-height:1.72} .denir-hp small,.denir-hp .fine{font-size:.9375rem;line-height:1.6} /* Eyebrow — small caps label above every section heading. */ .denir-hp .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:var(--f-body);font-weight:700;font-size:.8125rem; letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark); margin-bottom:1rem; } .denir-hp .eyebrow::before{ content:"";width:22px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--green),var(--green-2)); } .denir-hp .section--navy .eyebrow,.denir-hp .hero .eyebrow{color:var(--green-2)} /* Section head — generous breathing room, never crowded. */ .denir-hp .section-head{max-width:56ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)} .denir-hp .section-head .h2{margin-bottom:1.125rem} .denir-hp .section-head.center{margin-inline:auto} .denir-hp .section-head.center .lead{margin-inline:auto} .denir-hp .head-flex{align-items:flex-end;gap:var(--s-4)} /* Pill / badge */ .denir-hp .pill{ font-size:.8125rem;letter-spacing:.04em;padding:.5rem 1.05rem; background:var(--green-soft);color:var(--green-deep); border:1px solid rgba(92,165,36,.18);font-weight:600;text-transform:none; } .denir-hp .pill .dot{background:var(--green);box-shadow:0 0 0 4px rgba(92,165,36,.18)} .denir-hp .section--navy .pill,.denir-hp .hero .pill,.denir-hp .cta-center .pill{ background:rgba(111,191,46,.14);color:#CDEBAF;border-color:rgba(111,191,46,.28); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } /* ===================================================================== 03 — LAYOUT RHYTHM + BACKGROUNDS ===================================================================== */ .denir-hp .container{max-width:var(--maxw);padding-inline:var(--gutter)} .denir-hp .section{padding-block:var(--sect);position:relative;isolation:isolate} .denir-hp .section--bg{background:var(--bg)} .denir-hp .section--white{background:var(--surface)} .denir-hp .section--navy{background:linear-gradient(165deg,var(--navy-deep),var(--navy) 55%,var(--navy-2));color:#D3E3CC} /* Alternate the neutral bands so no two adjacent sections read the same: white → mist → very light green → white. Organic, never flat-repetitive. */ .denir-hp .section--bg:nth-of-type(even){background:linear-gradient(180deg,var(--green-tint),var(--bg))} /* Soft organic light sources behind the neutral bands. */ .denir-hp .section--bg::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background: radial-gradient(60ch 40ch at 12% 0%,rgba(92,165,36,.07),transparent 70%), radial-gradient(50ch 36ch at 92% 100%,rgba(22,53,28,.06),transparent 70%); } .denir-hp .section--navy::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.09) 1.3px,transparent 1.3px); background-size:28px 28px; -webkit-mask-image:radial-gradient(ellipse 65% 70% at 80% 20%,#000,transparent 72%); mask-image:radial-gradient(ellipse 65% 70% at 80% 20%,#000,transparent 72%); } /* Divider hairline between two same-coloured bands. */ .denir-hp .section--white + .section--white{border-top:1px solid var(--line)} /* ===================================================================== 04 — BUTTONS + LINKS ===================================================================== */ .denir-hp .btn{ position:relative;overflow:hidden;isolation:isolate; font-family:var(--f-body);font-weight:600;font-size:1rem;letter-spacing:-.01em; padding:.95rem 1.75rem;border-radius:var(--r-pill);gap:.6rem;border:1.5px solid transparent; background:linear-gradient(135deg,var(--green-2),var(--green) 55%,var(--green-dark)); color:#fff;box-shadow:0 1px 2px rgba(22,53,28,.10),0 10px 24px -14px rgba(92,165,36,.85); transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out), background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } /* Gradient sheen that slides across on hover (Stripe/Linear feel). */ .denir-hp .btn::after{ content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;opacity:0; background:linear-gradient(135deg,var(--green),var(--green-deep)); transition:opacity var(--t) var(--ease); } .denir-hp .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-green)} .denir-hp .btn:hover::after{opacity:1} .denir-hp .btn:active{transform:translateY(0) scale(.985);transition-duration:.09s} .denir-hp .btn svg{transition:transform var(--t) var(--ease-spring)} .denir-hp .btn:hover svg{transform:translateX(4px)} .denir-hp .btn--lg{padding:1.075rem 2.1rem;font-size:1.0625rem} .denir-hp .btn--navy{background:linear-gradient(135deg,var(--navy-2),var(--navy));box-shadow:0 1px 2px rgba(22,53,28,.12),0 10px 24px -14px rgba(22,53,28,.9)} .denir-hp .btn--navy::after{background:linear-gradient(135deg,var(--navy),var(--navy-deep))} .denir-hp .btn--navy:hover{box-shadow:0 16px 32px -16px rgba(22,53,28,.65)} /* Secondary — white fill, green border, fills green on hover. */ .denir-hp .btn--ghost{background:var(--surface);color:var(--navy);border-color:var(--line-2);box-shadow:var(--sh-xs)} .denir-hp .btn--ghost::after{background:linear-gradient(135deg,var(--green-2),var(--green-dark))} .denir-hp .btn--ghost:hover{color:#fff;border-color:transparent;box-shadow:var(--sh-green)} .denir-hp .btn--white{background:#fff;color:var(--navy);box-shadow:0 12px 30px -16px rgba(0,0,0,.5)} .denir-hp .btn--white::after{background:linear-gradient(135deg,#fff,#F1F6EC)} .denir-hp .btn--white:hover{color:var(--green-deep)} .denir-hp .section--navy .btn--ghost,.denir-hp .hero .btn--ghost, .denir-hp .page-hero .btn--ghost,.denir-hp .cta-center .btn--ghost{ background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.26); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none; } .denir-hp .section--navy .btn--ghost:hover,.denir-hp .hero .btn--ghost:hover, .denir-hp .page-hero .btn--ghost:hover,.denir-hp .cta-center .btn--ghost:hover{ background:#fff;color:var(--navy);border-color:#fff; } .denir-hp .section--navy .btn--ghost::after,.denir-hp .hero .btn--ghost::after, .denir-hp .cta-center .btn--ghost::after{display:none} .denir-hp .btn-row{gap:1rem;align-items:center} /* Text link with a travelling arrow + underline reveal. */ .denir-hp .tlink{color:var(--green-dark);font-weight:600;position:relative} .denir-hp .tlink::after{ content:"";position:absolute;left:0;right:auto;bottom:-3px;height:1.5px;width:0; background:currentColor;border-radius:2px;transition:width var(--t) var(--ease-out); } .denir-hp .tlink:hover::after{width:calc(100% - 1.15rem)} /* ===================================================================== 05 — HEADER: transparent over hero → glass on scroll ===================================================================== */ .denir-hp .site-header{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid rgba(22,53,28,.06); transition:background var(--t) var(--ease),backdrop-filter var(--t) var(--ease), border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .denir-hp .site-header .container{height:88px;max-width:var(--maxw)} /* Denser glass once scrolled (denir.js adds .solid). */ .denir-hp .site-header.solid{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px); border-bottom-color:rgba(22,53,28,.08); box-shadow:0 10px 34px -22px rgba(22,53,28,.45); } /* Light glass header → navy ink in both states. The logo carries the brand. */ .denir-hp .site-header .brand__tx b,.denir-hp .site-header.solid .brand__tx b{color:var(--navy)} .denir-hp .site-header .brand__tx span,.denir-hp .site-header.solid .brand__tx span{color:var(--green-dark);letter-spacing:.24em} .denir-hp .site-header .brand__logo{max-height:48px;width:auto;max-width:190px;object-fit:contain} /* When a logo image is present the wordmark text is redundant — hide it so the brand is just the mark. (Applies to header, navbar and footer.) */ .denir-hp .brand:has(.brand__logo) .brand__tx{display:none} /* Footer logo: contained height so the tall stacked mark doesn't blow up. */ .denir-hp .site-footer .brand__logo{max-height:64px;width:auto;max-width:220px;object-fit:contain} .denir-hp .brand__tile{ border-radius:14px;background:linear-gradient(135deg,var(--green-2),var(--green-dark)); box-shadow:0 8px 18px -8px rgba(92,165,36,.75); } .denir-hp .brand{transition:opacity var(--t-fast) var(--ease)} .denir-hp .brand:hover{opacity:.85} .denir-hp .brand__logo{max-width:210px} /* Nav — centred row, animated underline, active indicator. NOTE: denir.css styles `.denir-hp .site-header .nav a` (specificity 0,3,1) with WHITE text for the old navy header. On the light glass header that is invisible, so every rule here matches that specificity or higher. */ .denir-hp .nav{gap:.15rem;justify-content:center;flex:1} .denir-hp .dnav .nav ul{gap:.15rem} .denir-hp .site-header .nav a, .denir-hp .site-header.solid .nav a, .denir-hp .site-header .dnav-menu a, .denir-hp .dnav .nav a{ font-weight:500;font-size:.9375rem;letter-spacing:-.005em; padding:.6rem 1rem;border-radius:10px;color:var(--muted); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .denir-hp .nav a::before{ content:"";position:absolute;left:1rem;right:1rem;bottom:.28rem;height:2px; border-radius:2px;background:var(--green-2); transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease-out); } .denir-hp .nav a:hover::before{transform:scaleX(1)} .denir-hp .site-header .nav a:hover, .denir-hp .site-header.solid .nav a:hover, .denir-hp .dnav .nav a:hover{color:var(--navy);background:rgba(92,165,36,.08)} .denir-hp .site-header .nav a.active, .denir-hp .site-header.solid .nav a.active, .denir-hp .dnav .nav .current-menu-item>a, .denir-hp .dnav .nav .current_page_item>a, .denir-hp .dnav .nav .current-menu-ancestor>a{color:var(--navy);font-weight:600} .denir-hp .nav a.active::after, .denir-hp .dnav .nav .current-menu-item>a::after, .denir-hp .dnav .nav .current_page_item>a::after{ left:1rem;right:1rem;bottom:.28rem;height:2px; background:linear-gradient(90deg,var(--green-2),var(--green)); } .denir-hp .header-actions{gap:.85rem} .denir-hp .header-actions .btn{padding:.72rem 1.4rem;font-size:.9375rem} /* The phone number is a real contact — show it again (v2.9.2 hid it). */ .denir-hp .site-header .h-phone{display:inline-flex !important;color:var(--navy);font-weight:600} .denir-hp .site-header .h-phone svg{color:var(--green)} .denir-hp .site-header.solid .h-phone{color:var(--navy)} .denir-hp .burger,.denir-hp .site-header.solid .burger{border-radius:12px;border-color:var(--line-2);transition:background var(--t-fast) var(--ease)} .denir-hp .burger span,.denir-hp .site-header.solid .burger span{background:var(--navy)} .denir-hp .burger:hover{background:rgba(92,165,36,.08)} /* Mobile slide-out */ .denir-hp .mobile-menu{ background:linear-gradient(165deg,var(--navy-deep),var(--navy)); padding-top:112px;transition:transform .5s var(--ease-out); } .denir-hp .mobile-menu a.m-link,.denir-hp .mobile-menu .dnav-mmenu a{ font-family:var(--f-display);font-weight:600;font-size:1.6rem;letter-spacing:-.025em; padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.07); transition:color var(--t-fast) var(--ease),padding-left var(--t) var(--ease-out); } .denir-hp .mobile-menu a.m-link:hover,.denir-hp .mobile-menu .dnav-mmenu a:hover{color:var(--green-2);padding-left:.5rem} .denir-hp .mobile-menu a.m-link span.i{color:var(--green-2)} /* Scroll progress bar */ .denir-hp .prog{background:linear-gradient(90deg,var(--green-2),var(--green),var(--navy-2))} /* ===================================================================== 06 — HERO (brochure-led: light, green-first, navy only as ink) --------------------------------------------------------------------- The brochure opens on a white field with the logo, then a navy band and a green grass edge. The hero mirrors that: a light, airy field carrying the logo and headline, a soft green light source, and a navy-inked headline — instead of the old dark navy template hero. ===================================================================== */ .denir-hp .hero,.denir-hp .page-hero{padding-top:88px} .denir-hp .hero{ color:var(--text); background: radial-gradient(70ch 50ch at 88% 6%,rgba(92,165,36,.20),transparent 66%), radial-gradient(60ch 44ch at 4% 96%,rgba(92,165,36,.12),transparent 68%), linear-gradient(178deg,#FFFFFF 0%,var(--green-tint) 58%,#EAF3E1 100%); } /* Organic green edge along the bottom of the hero — the brochure's grass band, redrawn as a soft curve instead of a photo strip. */ .denir-hp .hero::before{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,9vw,130px);z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(92,165,36,.14),rgba(92,165,36,.30)); -webkit-mask-image:radial-gradient(120% 100% at 50% 100%,#000 55%,transparent 76%); mask-image:radial-gradient(120% 100% at 50% 100%,#000 55%,transparent 76%); } .denir-hp .hero-grid{padding-block:clamp(2.5rem,6vw,5.5rem);gap:clamp(2.5rem,5vw,4.5rem);align-items:center} /* The logo is the first thing on the page. */ .denir-hp .hero__logo{margin-bottom:clamp(1.25rem,2.5vw,2rem)} .denir-hp .hero__logo img{height:104px;width:auto;max-width:min(100%,340px);object-fit:contain} .denir-hp .hero h1{margin:1rem 0 1.4rem;color:var(--navy-deep)} /* Highlighted words in the hero heading — brochure leaf green. */ .denir-hp .hero h1 em{ font-style:normal;color:transparent; background:linear-gradient(100deg,var(--green-dark),var(--green) 55%,var(--green-2)); -webkit-background-clip:text;background-clip:text; } .denir-hp .hero__lead{color:var(--muted);font-size:clamp(1.0625rem,1.3vw,1.2rem);line-height:1.72;max-width:50ch;margin-bottom:2.25rem} /* Light hero → dark pill + dark stat text (overrides the navy-hero rules). */ .denir-hp .hero .pill{background:#fff;color:var(--green-deep);border-color:rgba(92,165,36,.24);box-shadow:var(--sh-xs)} .denir-hp .hero .eyebrow{color:var(--green-dark)} .denir-hp .hero .btn--ghost{background:#fff;color:var(--navy);border-color:var(--line-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--sh-xs)} .denir-hp .hero .btn--ghost:hover{color:#fff;border-color:transparent} /* Organic green blob + a second slow-floating one for depth. */ .denir-hp .hero__blob{ width:min(72vw,760px);height:min(72vw,760px);right:-16%;top:-24%; background:radial-gradient(circle,rgba(92,165,36,.30),transparent 64%); filter:blur(10px);animation:denir-float 16s var(--ease) infinite alternate; } .denir-hp .hero::after{ content:"";position:absolute;z-index:0;pointer-events:none; width:min(48vw,480px);aspect-ratio:1;left:-12%;bottom:-28%;border-radius:50%; background:radial-gradient(circle,rgba(39,64,122,.75),transparent 66%); filter:blur(14px);animation:denir-float 22s var(--ease) infinite alternate-reverse; } @keyframes denir-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,4%,0) scale(1.07)}} /* ---- HERO v3 LAYOUT ------------------------------------------------ Asymmetric editorial split (7/5) with the copy as one clean typographic block, the photo in an organic frame, and the statistics on their own full-width band that bridges the hero and the section below. */ .denir-hp .hero--v3 .hero-grid{ grid-template-columns:1.15fr .85fr; align-items:center; padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3.5rem); } .denir-hp .hero__copy{max-width:38rem} .denir-hp .hero--v3 h1{margin:1.25rem 0 1.5rem} .denir-hp .hero--v3 .hero__lead{margin-bottom:2.5rem} /* ---- LIVING HERO SCENE (v3.4.0) ----------------------------------- Inline SVG layers behind the hero content: drifting ground strata, a buried pipeline with water running through it, survey contour lines and leaves from the logo. Everything animates on transform / opacity / stroke-dashoffset only, so it never triggers layout or paint of the text above it. */ .denir-hp .hero__scene{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; } .denir-hp .hero__scene svg{width:100%;height:100%;display:block} /* Ground strata — two slabs breathing at different speeds, so the horizon never looks like a static decoration. */ .denir-hp .hs-soil{transform-box:fill-box;transform-origin:50% 100%;will-change:transform} .denir-hp .hs-soil--1{animation:denir-soil-a 26s var(--ease) infinite alternate} .denir-hp .hs-soil--2{animation:denir-soil-b 34s var(--ease) infinite alternate} @keyframes denir-soil-a{from{transform:translate3d(-16px,4px,0)}to{transform:translate3d(18px,-6px,0)}} @keyframes denir-soil-b{from{transform:translate3d(14px,-3px,0)}to{transform:translate3d(-20px,5px,0)}} /* Water running through the pipeline — the signature motion of the scene. */ .denir-hp .hs-pipe__flow{ animation:denir-flow 2.6s linear infinite; filter:drop-shadow(0 0 6px rgba(111,191,46,.45)); } @keyframes denir-flow{to{stroke-dashoffset:-72}} .denir-hp .hs-pipe{animation:denir-pipe-drift 30s var(--ease) infinite alternate} @keyframes denir-pipe-drift{from{transform:translate3d(0,6px,0)}to{transform:translate3d(-22px,-8px,0)}} /* Survey contours — a slow parallax sweep. */ .denir-hp .hs-contours{animation:denir-contour 40s var(--ease) infinite alternate;will-change:transform} .denir-hp .hs-contours path{ stroke-dasharray:1 0; animation:denir-contour-fade 12s var(--ease) infinite alternate; } .denir-hp .hs-contours path:nth-child(2){animation-delay:-4s} .denir-hp .hs-contours path:nth-child(3){animation-delay:-8s} @keyframes denir-contour{from{transform:translate3d(-24px,0,0)}to{transform:translate3d(26px,-10px,0)}} @keyframes denir-contour-fade{from{opacity:.55}to{opacity:1}} /* Leaves — each drifts and turns on its own rhythm. */ .denir-hp .hs-leaf{transform-box:fill-box;transform-origin:20% 80%;will-change:transform} .denir-hp .hs-leaf--1{animation:denir-leaf-a 15s var(--ease) infinite alternate} .denir-hp .hs-leaf--2{animation:denir-leaf-b 19s var(--ease) infinite alternate} .denir-hp .hs-leaf--3{animation:denir-leaf-a 23s -6s var(--ease) infinite alternate} @keyframes denir-leaf-a{ from{transform:translate3d(0,0,0) rotate(-8deg)} to{transform:translate3d(26px,-22px,0) rotate(14deg)} } @keyframes denir-leaf-b{ from{transform:translate3d(0,0,0) rotate(10deg)} to{transform:translate3d(-30px,18px,0) rotate(-12deg)} } /* Two soft light sources drifting behind everything — gives the flat gradient depth without a single extra image request. */ .denir-hp .hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .denir-hp .hero__glow span{ position:absolute;display:block;border-radius:50%;filter:blur(60px);will-change:transform; } .denir-hp .hero__glow span:first-child{ width:min(46vw,620px);aspect-ratio:1;left:-8%;top:-14%; background:radial-gradient(circle,rgba(111,191,46,.30),transparent 68%); animation:denir-glow-a 24s var(--ease) infinite alternate; } .denir-hp .hero__glow span:last-child{ width:min(38vw,520px);aspect-ratio:1;right:4%;bottom:-16%; background:radial-gradient(circle,rgba(47,97,20,.22),transparent 68%); animation:denir-glow-b 30s var(--ease) infinite alternate; } @keyframes denir-glow-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9%,7%,0) scale(1.14)}} @keyframes denir-glow-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8%,-6%,0) scale(.94)}} /* Content must sit above the scene. */ .denir-hp .hero .container{position:relative;z-index:2} .denir-hp .hero .trust{position:relative;z-index:2} /* Layered organic background: leaf-shaped green field behind the photo. */ .denir-hp .hero__leaf{ position:absolute;z-index:0;pointer-events:none; right:-6%;top:-8%;width:min(62vw,760px);aspect-ratio:1/1.02; background:linear-gradient(150deg,rgba(111,191,46,.20),rgba(47,97,20,.13)); border-radius:64% 36% 58% 42% / 46% 56% 44% 54%; filter:blur(2px); animation:denir-leaf 18s var(--ease) infinite alternate; } @keyframes denir-leaf{ from{border-radius:64% 36% 58% 42% / 46% 56% 44% 54%;transform:rotate(0) scale(1)} to{border-radius:52% 48% 40% 60% / 58% 42% 58% 42%;transform:rotate(-5deg) scale(1.05)} } /* CTA row: primary, secondary, then the phone as a quiet third action. */ .denir-hp .hero__cta{gap:1rem 1.25rem;align-items:center} .denir-hp .hero__tel{ display:inline-flex;align-items:center;gap:.7rem;padding:.35rem .25rem; transition:transform var(--t) var(--ease-out); } .denir-hp .hero__tel:hover{transform:translateX(2px)} .denir-hp .hero__tel .ic{ width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center; background:#fff;color:var(--green-dark);box-shadow:var(--sh-sm); border:1px solid rgba(92,165,36,.2); } .denir-hp .hero__tel .k{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.4} .denir-hp .hero__tel b{font-family:var(--f-display);font-size:1.05rem;color:var(--navy);white-space:nowrap} /* Hero stats — full-width band bridging hero and next section. */ .denir-hp .hero__stats{ margin:0;padding:clamp(1.5rem,2.6vw,2.15rem) clamp(1.5rem,3vw,2.5rem); border-top:0;gap:clamp(1.5rem,3.4vw,3rem); display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); background:rgba(255,255,255,.9);border:1px solid var(--line); border-radius:var(--r-xl);box-shadow:var(--sh); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); position:relative;z-index:3; transform:translateY(clamp(2rem,5vw,4rem)); } .denir-hp .hero__stats .hstat + .hstat{border-left:1px solid var(--line);padding-left:clamp(1rem,2.4vw,2rem)} /* The band overhangs, so the hero needs room beneath it. */ .denir-hp .hero--v3{padding-bottom:clamp(4rem,8vw,7rem)} .denir-hp .hstat b{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;font-size:clamp(2rem,3vw,2.75rem);color:var(--navy)} .denir-hp .hstat b .s{color:var(--green)} .denir-hp .hstat > span:last-child{color:var(--muted);font-size:.9375rem} /* ---- Hero motion & depth (v3.2.0) -------------------------------- A staged entrance: logo → pill → heading → lead → buttons → stats, each riding in on the same spring so the hero feels composed rather than animated element-by-element. The .reveal system still handles the rest of the page. The stagger is built from durations, never from animation-delay + fill-mode: an element held at "opacity:0" through a delay stays blank forever in the in-app browsers (Messenger/Facebook) that sometimes never start the animation — the reported glitch where the hero showed as an empty green field with only the lead and the buttons on it. With no fill-mode and no delay, the resting style is the visible one, so a hero that never animates simply renders. */ @keyframes denir-hero-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes denir-hero-media{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}} .denir-hp .hero__logo, .denir-hp .hero .pill, .denir-hp .hero h1, .denir-hp .hero__lead, .denir-hp .hero .btn-row, .denir-hp .hero__stats{animation:denir-hero-in .7s var(--ease-out)} .denir-hp .hero__logo{animation-duration:.7s} .denir-hp .hero .pill{animation-duration:.82s} .denir-hp .hero h1{animation-duration:.94s} .denir-hp .hero__lead{animation-duration:1.06s} .denir-hp .hero .btn-row{animation-duration:1.18s} .denir-hp .hero__stats{animation-duration:1.3s} .denir-hp .hero__media{animation:denir-hero-media 1.25s var(--ease-out)} /* The hero opts out of the generic reveal so the two systems never fight. */ .denir-hp .hero .reveal{opacity:1;transform:none} /* Depth: a fine grid + a soft vignette read as engineering drafting paper. */ .denir-hp .hero__dots{ opacity:.55; background-image: linear-gradient(rgba(22,53,28,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(22,53,28,.055) 1px,transparent 1px); background-size:56px 56px,56px 56px; -webkit-mask-image:radial-gradient(ellipse 75% 65% at 62% 32%,#000,transparent 78%); mask-image:radial-gradient(ellipse 75% 65% at 62% 32%,#000,transparent 78%); } /* Scroll cue at the foot of the hero. */ .denir-hp .hero .container::after{ content:"";position:absolute;left:50%;bottom:calc(-1 * clamp(1rem,3vw,2rem)); width:26px;height:42px;border:2px solid rgba(22,53,28,.22);border-radius:14px; transform:translateX(-50%);pointer-events:none; } .denir-hp .hero .container{position:relative} @media (max-width:900px){.denir-hp .hero .container::after{display:none}} /* Hero imagery + floating glass cards */ .denir-hp .hero__media .ph,.denir-hp .media .ph{ border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg); position:relative;isolation:isolate; } /* Green rim-light + inner hairline so the photo sits in the brand field instead of floating as a bare rectangle. */ .denir-hp .hero__media .ph::after,.denir-hp .media .ph::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -70px 90px -60px rgba(22,53,28,.55); } .denir-hp .hero__media::before{ content:"";position:absolute;inset:-6% -6% -10% -6%;z-index:-1;border-radius:var(--r-2xl); background:radial-gradient(60% 60% at 70% 30%,rgba(92,165,36,.22),transparent 70%); filter:blur(18px); } .denir-hp .hero__media{position:relative;isolation:isolate} .denir-hp .hero__media .ph img,.denir-hp .media .ph img{ transition:transform 1.1s var(--ease-out);will-change:transform; } .denir-hp .hero__media:hover .ph img,.denir-hp .media:hover .ph img{transform:scale(1.045)} .denir-hp .rating-card,.denir-hp .exp-card,.denir-hp .badge-float{ border-radius:var(--r-lg); background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px); border:1px solid rgba(255,255,255,.7); box-shadow:var(--sh-lg); animation:denir-bob 7s var(--ease) infinite alternate; } .denir-hp .exp-card{animation-delay:-3.5s} @keyframes denir-bob{from{transform:translateY(0)}to{transform:translateY(-10px)}} .denir-hp .badge-float{background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff;border-color:transparent} /* Hero phone card (replaced the invented star-rating card). */ .denir-hp .call-card{flex-direction:row;align-items:center;gap:.85rem;padding:1rem 1.25rem;text-decoration:none} .denir-hp .call-card .ic{ width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; } .denir-hp .call-card .k{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .denir-hp .call-card b{font-family:var(--f-display);font-size:1.05rem;color:var(--navy);white-space:nowrap} .denir-hp .call-card:hover{transform:translateY(-3px)} /* Branded empty-image frame — shown instead of a generic stock photo until the client uploads real photos of their own work. */ .denir-hp .ph--empty,.denir-hp .thumb--empty{ display:grid;place-items:center;min-height:220px; background: radial-gradient(60% 60% at 50% 40%,rgba(92,165,36,.12),transparent 70%), linear-gradient(150deg,var(--green-tint),var(--surface-2)); border:1px dashed rgba(92,165,36,.35);border-radius:inherit; } .denir-hp .thumb--empty{aspect-ratio:4/3;border-radius:0;position:relative} .denir-hp .ph--empty .ph__ic{color:var(--green);opacity:.55} /* ---- TWO-IMAGE HERO COMPOSITION ----------------------------------- A tall primary photo with a smaller secondary photo overlapping its lower-left corner — an editorial pairing rather than a single circle. */ .denir-hp .hero__media--duo{padding-bottom:clamp(3rem,7vw,5.5rem);padding-left:clamp(0px,3vw,2.5rem)} .denir-hp .hero--v3 .hero__media .ph{ border-radius:var(--r-2xl);overflow:hidden; box-shadow:var(--sh-lg); } .denir-hp .hero--v3 .ph--main{ aspect-ratio:4/4.4; border-top-right-radius:clamp(60px,9vw,120px); /* one softened corner */ } .denir-hp .hero--v3 .ph--sub{ position:absolute;left:0;bottom:clamp(.5rem,3vw,2rem);z-index:3; width:clamp(140px,42%,220px);aspect-ratio:1/.92; border-bottom-left-radius:clamp(40px,6vw,72px); box-shadow:var(--sh-lg),0 0 0 8px rgba(255,255,255,.9); min-height:0; } .denir-hp .hero--v3 .hero__media .ph img{width:100%;height:100%;object-fit:cover} .denir-hp .hero--v3 .ph--sub .ph__ic svg{width:30px;height:30px} /* Each photo zooms on its own when the pair is hovered. */ .denir-hp .hero__media--duo:hover .ph--main img{transform:scale(1.05)} .denir-hp .hero__media--duo:hover .ph--sub img{transform:scale(1.08)} .denir-hp .hero--v3 .exp-card{ right:0;bottom:clamp(3.5rem,8vw,6.5rem);padding:1rem 1.3rem;border-radius:var(--r-lg);z-index:4; background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff;border-color:transparent; } .denir-hp .hero--v3 .exp-card b{font-size:1.9rem} .denir-hp .hero--v3 .exp-card span{color:rgba(255,255,255,.92)} /* Service strip under the hero (was "trusted by" logos). */ .denir-hp .trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:2} .denir-hp .hero--v3 .trust{padding-top:clamp(3rem,6vw,5rem)} .denir-hp .trust .lbl{color:var(--muted);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700} .denir-hp .trust .it{ font-family:var(--f-body);font-weight:600;font-size:.9375rem;color:var(--navy); padding:.4rem .95rem;border-radius:var(--r-pill);background:var(--green-soft); border:1px solid rgba(92,165,36,.16); transition:transform var(--t) var(--ease-out),background var(--t) var(--ease),color var(--t) var(--ease); } .denir-hp .trust .it:hover{transform:translateY(-2px);background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff} /* Page hero (inner pages) — same light, green-led field as the homepage so the glass header stays readable everywhere. */ .denir-hp .page-hero{ color:var(--text);padding-bottom:clamp(2.5rem,5vw,4rem); background: radial-gradient(60ch 40ch at 88% 0%,rgba(92,165,36,.18),transparent 68%), linear-gradient(178deg,#FFFFFF,var(--green-tint)); } .denir-hp .page-hero h1,.denir-hp .page-hero .h1{color:var(--navy-deep)} .denir-hp .page-hero p{color:var(--muted);max-width:60ch} .denir-hp .page-hero__blob{background:radial-gradient(circle,rgba(92,165,36,.20),transparent 64%)} .denir-hp .crumbs{color:var(--muted);font-size:.9375rem} .denir-hp .crumbs a:hover{color:var(--green-dark)} .denir-hp .crumbs .cur{color:var(--green-dark);font-weight:600} /* ===================================================================== 07 — CARDS ===================================================================== */ .denir-hp .grid{gap:var(--gap)} /* Shared premium card surface: hairline + subtle gradient border + lift. */ .denir-hp .scard,.denir-hp .fcard,.denir-hp .icard, .denir-hp .tcard,.denir-hp .pcard,.denir-hp .cinfo,.denir-hp .pstep{ position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-xs); transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease); } .denir-hp .scard::before,.denir-hp .icard::before,.denir-hp .pcard::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px;opacity:0;transition:opacity var(--t) var(--ease); background:linear-gradient(135deg,rgba(92,165,36,.55),rgba(22,53,28,.18) 60%,transparent); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } .denir-hp .scard:hover,.denir-hp .icard:hover,.denir-hp .fcard:hover, .denir-hp .tcard:hover,.denir-hp .pcard:hover{ transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent; } .denir-hp .scard:hover::before,.denir-hp .icard:hover::before,.denir-hp .pcard:hover::before{opacity:1} /* Service cards — minimal green icon tile, arrow that travels. */ .denir-hp .scard{padding:clamp(1.75rem,2.6vw,2.5rem);overflow:hidden} .denir-hp .scard .ic,.denir-hp .icard .ic,.denir-hp .cinfo .ic,.denir-hp .sd-text .ic{ width:56px;height:56px;border-radius:16px;display:grid;place-items:center; background:var(--green-soft);color:var(--green-deep); border:1px solid rgba(92,165,36,.16); transition:transform var(--t) var(--ease-spring),background var(--t) var(--ease),color var(--t) var(--ease); } .denir-hp .scard .ic svg,.denir-hp .icard .ic svg,.denir-hp .cinfo .ic svg{stroke-width:1.75} .denir-hp .scard:hover .ic,.denir-hp .icard:hover .ic{ transform:translateY(-3px) scale(1.06); background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; } .denir-hp .scard .arw{color:var(--muted-light);transition:transform var(--t) var(--ease-spring),color var(--t) var(--ease)} .denir-hp .scard:hover .arw{transform:translate(4px,-4px);color:var(--green)} .denir-hp .scard .h3{margin:1.35rem 0 .65rem} /* Feature / stat cards with animated counters */ .denir-hp .fcard{padding:clamp(1.5rem,2.2vw,2.15rem)} .denir-hp .section--navy .fcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)} /* Stats band */ .denir-hp .stats .stat .s{color:var(--muted-light)} .denir-hp .stats .stat b{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em} /* Process timeline */ .denir-hp .pstep{padding:clamp(1.5rem,2.2vw,2.15rem)} .denir-hp .pstep .pn{ font-family:var(--f-display);font-weight:800; background:linear-gradient(135deg,var(--green-2),var(--green-dark)); -webkit-background-clip:text;background-clip:text;color:transparent; } .denir-hp .pstep .pic{background:var(--green-soft);color:var(--green-deep);border-radius:16px} /* Project cards — image zoom + overlay reveal */ .denir-hp .pcard{overflow:hidden} .denir-hp .pcard .thumb{overflow:hidden;border-radius:0;position:relative;aspect-ratio:4/3} .denir-hp .pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)} .denir-hp .pcard:hover .thumb img{transform:scale(1.07)} .denir-hp .pcard .thumb::after{ content:"";position:absolute;inset:0;opacity:0;transition:opacity var(--t) var(--ease); background:linear-gradient(to top,rgba(15,38,20,.72),transparent 55%); } .denir-hp .pcard:hover .thumb::after{opacity:1} .denir-hp .pcard .tag{ background:rgba(255,255,255,.92);color:var(--green-deep);font-weight:600; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-radius:var(--r-pill);letter-spacing:.02em; } .denir-hp .pcard .body{padding:clamp(1.35rem,2vw,1.85rem)} /* Filter chips */ .denir-hp .filters{gap:.6rem} .denir-hp .chip{ border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface); color:var(--muted);font-weight:600;padding:.6rem 1.25rem; transition:all var(--t) var(--ease-out); } .denir-hp .chip:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-1px)} .denir-hp .chip.active{ background:linear-gradient(135deg,var(--green-2),var(--green-dark)); border-color:transparent;color:#fff;box-shadow:var(--sh-green); } /* Testimonials */ .denir-hp .tcard{padding:clamp(1.75rem,2.5vw,2.35rem)} .denir-hp .tcard .stars{color:var(--star)} .denir-hp .tcard .av{background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff;font-family:var(--f-display);font-weight:700} /* FAQ */ .denir-hp .faq-item{ border:1px solid var(--line);border-radius:var(--r);background:var(--surface); margin-bottom:.85rem;overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .denir-hp .faq-item:hover,.denir-hp .faq-item.open{border-color:rgba(92,165,36,.35);box-shadow:var(--sh-sm)} .denir-hp .faq-q{font-family:var(--f-display);font-weight:600;color:var(--navy);padding:1.25rem 1.5rem} .denir-hp .faq-q .pl{color:var(--green);transition:transform var(--t) var(--ease-spring)} .denir-hp .faq-item.open .faq-q .pl{transform:rotate(45deg)} .denir-hp .faq-a{color:var(--muted);padding:0 1.5rem} /* Ticks / checklists */ .denir-hp .ck,.denir-hp .ticks .ck{color:var(--text)} .denir-hp .ck svg{color:var(--green)} /* ---- Service detail panels: alternating image / text --------------- Block 1 image left, block 2 image right, and so on down the page. */ .denir-hp .sd-grid{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,4.5rem);align-items:center; } /* Reversed rows put the media second in the source but first visually, so the reading order stays title → text on every row. */ .denir-hp .sd-grid--rev .sd-media{order:2} .denir-hp .sd-grid--rev .sd-text{order:1} .denir-hp .sd-media img,.denir-hp .sd-media .ph{ width:100%;border-radius:var(--r-2xl);box-shadow:var(--sh-lg); overflow:hidden;aspect-ratio:5/4;object-fit:cover; } .denir-hp .sd-media .ph--empty{min-height:0;height:100%} .denir-hp .sd-text .ic{ width:56px;height:56px;border-radius:16px;display:grid;place-items:center; background:var(--green-soft);color:var(--green-deep); border:1px solid rgba(92,165,36,.18);margin-bottom:1.25rem; } .denir-hp .sd-text .h2{margin-bottom:1rem} .denir-hp .sd-text p{color:var(--muted);margin-bottom:1rem;max-width:56ch} .denir-hp .sd-text .btn{margin-top:1rem} .denir-hp .service-detail{scroll-margin-top:clamp(80px,10vh,110px);transition:background var(--t-slow) var(--ease)} /* Invisible alias target sitting just above its section. */ .denir-hp .denir-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:clamp(80px,10vh,110px)} /* Momentary highlight on the block that was scrolled to. */ .denir-hp .service-detail.is-target .sd-text .ic{ background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; box-shadow:var(--sh-green);transform:scale(1.06); } .denir-hp .service-detail.is-target .sd-media img, .denir-hp .service-detail.is-target .sd-media .ph{ box-shadow:var(--sh-lg),0 0 0 4px rgba(92,165,36,.35); } .denir-hp .sd-text .ic{transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease-spring),box-shadow var(--t) var(--ease)} .denir-hp .sd-media img,.denir-hp .sd-media .ph{transition:box-shadow var(--t-slow) var(--ease)} /* Project cards carry no button — the whole card is the control. */ .denir-hp .pcard .tlink,.denir-hp .pcard .pcard-view{display:none} .denir-hp .pcard[role="button"]{cursor:pointer} @media (max-width:900px){ .denir-hp .sd-grid{grid-template-columns:1fr;gap:2rem} /* Media always on top when stacked, whichever side it sits on. */ .denir-hp .sd-grid--rev .sd-media,.denir-hp .sd-media{order:-1} .denir-hp .sd-grid--rev .sd-text,.denir-hp .sd-text{order:0} .denir-hp .sd-media img,.denir-hp .sd-media .ph{max-width:520px} } /* CTA band — denir.css paints it with a HARD-CODED orange gradient (var(--orange) → #F4863F), which the token alias cannot reach. Repaint it in the brand green→navy. */ .denir-hp .cta-band{ background:linear-gradient(120deg,var(--green-dark) 0%,var(--green) 42%,var(--navy) 100%); border-radius:var(--r-2xl);box-shadow:var(--sh-lg); } .denir-hp .cta-band::after{background:rgba(255,255,255,.08)} .denir-hp .cta-band .ico{background:rgba(255,255,255,.16)} .denir-hp .cta-band .btn--white{color:var(--green-deep)} /* Calculator result card — was a peach panel with an orange border. */ .denir-hp .calc__result{ background:linear-gradient(150deg,var(--green-tint),var(--green-soft)); border:1px solid rgba(92,165,36,.28); } .denir-hp .calc__result .rlabel{color:var(--green-deep)} .denir-hp .calc__result .rprice{color:var(--green-deep)} .denir-hp .calc__intro .eyebrow{color:#CDEBAF} .denir-hp .calc__intro{background:linear-gradient(150deg,var(--navy-deep),var(--navy) 60%,var(--navy-2))} /* FAQ plus/minus sign */ .denir-hp .faq-q .pl{background:var(--green-soft)} .denir-hp .faq-q .pl::before,.denir-hp .faq-q .pl::after{background:var(--green-deep)} /* Process step icon */ .denir-hp .pstep .pic{ background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; box-shadow:0 12px 24px -12px rgba(92,165,36,.7); } /* CTA panels */ .denir-hp .cta-center,.denir-hp .cta-band__in{ background:linear-gradient(150deg,var(--navy-deep),var(--navy) 55%,#1E4726); border-radius:var(--r-2xl);box-shadow:var(--sh-lg);position:relative;overflow:hidden; } .denir-hp .cta-center__blob{background:radial-gradient(circle,rgba(92,165,36,.28),transparent 64%)} /* ===================================================================== CALCULATOR — premium SaaS pricing widget ===================================================================== */ .denir-hp .calc{ border-radius:var(--r-2xl);box-shadow:var(--sh-lg);border:1px solid var(--line); overflow:hidden;grid-template-columns:.85fr 1.15fr;background:var(--surface); } /* Left rail — dark forest panel that explains what the tool does. */ .denir-hp .calc__intro{ padding:clamp(2rem,3.5vw,3rem);position:relative;isolation:isolate;color:#D3E3CC; } .denir-hp .calc__intro::after{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background:radial-gradient(70% 60% at 90% 0%,rgba(111,191,46,.28),transparent 70%); } .denir-hp .calc__intro h3{color:#fff;font-size:clamp(1.4rem,2.2vw,1.85rem);margin:.35rem 0 .85rem;letter-spacing:-.025em} .denir-hp .calc__intro p{color:rgba(211,227,204,.86);font-size:1rem} .denir-hp .calc__intro{display:flex;flex-direction:column} .denir-hp .calc__intro .ck-list{margin-top:1.75rem;display:grid;gap:.85rem} .denir-hp .calc__intro .ck-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:rgba(255,255,255,.92);line-height:1.5} /* Solid green discs with a white tick, as in the reference. */ .denir-hp .calc__intro .ck{ flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:var(--green-dark);color:#fff;margin-top:.12rem; box-shadow:0 0 0 4px rgba(92,165,36,.18); } .denir-hp .calc__intro .ck svg{width:12px;height:12px;stroke-width:3} /* Divider + "Turite klausimų?" + phone, pinned to the bottom of the panel. */ .denir-hp .calc__intro-foot{ margin-top:auto;padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.16); display:flex;flex-direction:column;gap:.35rem; } .denir-hp .calc__intro-foot span{ font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(211,227,204,.7); } .denir-hp .calc__intro-foot a{ font-family:var(--f-display);font-size:1.15rem;font-weight:800;color:#fff; transition:color var(--t-fast) var(--ease); } .denir-hp .calc__intro-foot a:hover{color:var(--green-2)} /* Right side — the form. Single column, matching the approved reference: every field is full width so the eye runs straight down the questions. */ .denir-hp .calc__form{padding:clamp(1.75rem,3.2vw,2.5rem);background:var(--surface)} .denir-hp .calc__form form{display:block} .denir-hp .calc__form .field{margin:0 0 1.15rem;display:flex;flex-direction:column;gap:.5rem} .denir-hp .calc__form button[type=submit]{margin-top:.5rem} .denir-hp .calc__form label{ font-family:var(--f-display);font-weight:700;font-size:.75rem; letter-spacing:.1em;text-transform:uppercase;color:var(--navy); } .denir-hp .calc__form select, .denir-hp .calc__form input{ appearance:none;-webkit-appearance:none; font-size:1rem;font-weight:500;color:var(--text); background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:14px; padding:.95rem 1.05rem;width:100%;min-height:52px; transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } /* Custom chevron so the dropdown matches the icon system. */ .denir-hp .calc__form select{ padding-right:2.75rem;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B60' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:18px 18px; } .denir-hp .calc__form select:hover,.denir-hp .calc__form input:hover{border-color:var(--line)} .denir-hp .calc__form select:focus,.denir-hp .calc__form input:focus{ outline:none;background:var(--surface);border-color:var(--green); box-shadow:0 0 0 4px rgba(92,165,36,.15); } /* Pipeline metres: the unit is rendered as a real .field__suffix element, so the old generated one is gone (it produced a second stray "m"). */ .denir-hp .calc__form .c-pipe{padding-right:2.75rem} .denir-hp .calc__form input[type=number]::-webkit-outer-spin-button, .denir-hp .calc__form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .denir-hp .calc__form input[type=number]{-moz-appearance:textfield} /* Field groups — "OBJEKTAS" and "VANDENS IŠLEIDIMAS". */ .denir-hp .calc__group{border:0;margin:0 0 .5rem;padding:0;display:block} .denir-hp .calc__legend{ display:block;width:100%;padding:0;float:none; font-family:var(--f-display);font-size:.75rem;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--green-dark); margin-bottom:.9rem; } .denir-hp .field__hint{font-size:.8125rem;color:var(--muted);margin:.45rem 0 0;line-height:1.5} .denir-hp .field__error{font-size:.8125rem;color:#C2453B;font-weight:500;margin:.45rem 0 0} .denir-hp .field__unit{position:relative;display:block} .denir-hp .field__suffix{ position:absolute;right:1.1rem;top:50%;transform:translateY(-50%); font-size:.9375rem;font-weight:600;color:var(--muted-light);pointer-events:none; } .denir-hp .calc__form .c-pipe{padding-right:2.75rem} .denir-hp .calc__form .is-invalid{border-color:#C2453B;box-shadow:0 0 0 4px rgba(194,69,59,.14)} /* Price summary — dark forest card with high-contrast WHITE type. */ .denir-hp .calc__result{ margin-top:1.5rem;padding:1.6rem 1.7rem;border-radius:var(--r-lg); background:linear-gradient(150deg,var(--forest-3),var(--forest) 60%,var(--forest-2)); border:1px solid rgba(155,217,94,.22); box-shadow:var(--sh); } .denir-hp .calc__result .rlabel{ display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:#9BD95E; } .denir-hp .calc__result .rprice{ font-family:var(--f-display);font-weight:800;letter-spacing:-.025em; font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.12;color:#fff; margin:.4rem 0 0; } .denir-hp .calc__breakdown{display:grid;gap:.65rem;margin:1.35rem 0 0;padding:0;list-style:none} .denir-hp .calc__breakdown li{ display:flex;justify-content:space-between;gap:1rem;align-items:baseline; font-size:.9rem;color:rgba(255,255,255,.82); padding-bottom:.65rem;border-bottom:1px dashed rgba(155,217,94,.28); } .denir-hp .calc__breakdown li span:last-child{font-weight:700;color:#9BD95E;white-space:nowrap;text-align:right} /* Total row — bolder, no dashed rule, a solid separator above. */ .denir-hp .calc__breakdown li.is-total{ margin-top:.35rem;padding-top:.85rem;padding-bottom:0;border-bottom:0; border-top:1px solid rgba(155,217,94,.4); font-size:1rem;color:#fff;font-weight:800; } .denir-hp .calc__breakdown li.is-total span:last-child{color:#fff;font-size:1.15rem} /* Over-6 message shown instead of a price. */ .denir-hp .calc__result .rmessage{ margin:.4rem 0 0;color:#fff;font-size:1.0625rem;font-weight:600;line-height:1.5; } .denir-hp .calc__result .rnote{ margin-top:1.1rem;border-top:0;padding-top:0; font-size:.8125rem;color:rgba(255,255,255,.66);line-height:1.6; } .denir-hp .calc__result .btn{margin-top:1.2rem;width:100%;justify-content:center} @media (max-width:640px){ .denir-hp .calc__group{grid-template-columns:1fr} } .denir-hp .calc__result .rmodel{font-size:1.15rem;color:var(--navy)} .denir-hp .calc__result .rprice{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.15;margin-top:.15rem} .denir-hp .calc__result .rnote{border-top:1px dashed rgba(92,165,36,.35);margin-top:1rem;padding-top:.85rem} @media (max-width:900px){ .denir-hp .calc{grid-template-columns:1fr} .denir-hp .calc__form form{grid-template-columns:1fr} } /* ===================================================================== WHY CHOOSE US — advantage cards ===================================================================== */ .denir-hp .fcard{ padding:clamp(1.75rem,2.6vw,2.4rem);border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative; } /* The counter badge that used to sit in the top-right corner is gone at the client's request, and so is the padding-right that kept the heading clear of it — without that reserved strip the titles stop wrapping early. */ .denir-hp .fcard h3{font-size:clamp(1.15rem,1.5vw,1.3rem);margin:0 0 .6rem;letter-spacing:-.02em} .denir-hp .fcard p{color:var(--muted);font-size:.9688rem;line-height:1.65} /* Green wash that fills from the bottom on hover. */ .denir-hp .fcard::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(92,165,36,.07)); transition:height var(--t-slow) var(--ease-out); } .denir-hp .fcard:hover::after{height:100%} .denir-hp .fcard::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--green-2),var(--green-dark)); transform:scaleY(0);transform-origin:top;transition:transform var(--t) var(--ease-out); } .denir-hp .fcard:hover::before{transform:scaleY(1)} .denir-hp .fcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(92,165,36,.3)} /* Calculator legacy container tweaks */ .denir-hp .calc{border-radius:var(--r-2xl)} .denir-hp .calc__result{background:linear-gradient(150deg,var(--navy),var(--navy-2))} .denir-hp .calc__result .rprice{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;color:var(--green-2)} /* ===================================================================== 08 — FORMS ===================================================================== */ .denir-hp .form{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh);padding:clamp(1.75rem,3vw,2.75rem); } .denir-hp .form input,.denir-hp .form select,.denir-hp .form textarea, .denir-hp .calc__form input,.denir-hp .calc__form select{ font-family:var(--f-body);font-size:1rem; border-radius:14px;border:1.5px solid var(--line-2);background:var(--surface-2); padding:.9rem 1.1rem;color:var(--text); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .denir-hp .form input::placeholder,.denir-hp .form textarea::placeholder{color:var(--muted-light)} .denir-hp .form input:hover,.denir-hp .form textarea:hover,.denir-hp .form select:hover{border-color:var(--line)} .denir-hp .form input:focus,.denir-hp .form select:focus,.denir-hp .form textarea:focus, .denir-hp .calc__form input:focus,.denir-hp .calc__form select:focus{ outline:none;background:var(--surface); border-color:var(--green);box-shadow:0 0 0 4px rgba(92,165,36,.15); } .denir-hp .field label{font-weight:600;font-size:.9375rem;color:var(--navy);margin-bottom:.45rem;display:block} .denir-hp .field .req{color:var(--green-dark)} .denir-hp .field .err{color:#D7402B;font-size:.875rem} .denir-hp .form .btn{width:100%;justify-content:center} .denir-hp .form-note{color:var(--muted);font-size:.9375rem} .denir-hp .form-ok .ok{ background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; border-radius:50%;animation:denir-pop .5s var(--ease-spring) both; } @keyframes denir-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} /* Contact info tiles */ .denir-hp .cinfo{padding:1.25rem 1.4rem;box-shadow:none;background:transparent;border-color:transparent} .denir-hp .cinfo .k{color:var(--muted);font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700} .denir-hp .cinfo .v{color:var(--navy);font-weight:600} .denir-hp .map{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh)} .denir-hp .hours .hr{border-bottom:1px solid var(--line);padding:.85rem 1.25rem} .denir-hp .hours .hr .o{color:var(--green-dark);font-weight:600} .denir-hp .hours .hr.off .o{color:var(--muted-light)} /* Socials */ .denir-hp .socials a{ border-radius:12px;border:1px solid var(--line);color:var(--navy); transition:transform var(--t) var(--ease-spring),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease); } .denir-hp .socials a:hover{ transform:translateY(-3px);color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--green-2),var(--green-dark)); } /* ===================================================================== 09 — FOOTER ===================================================================== */ .denir-hp .site-footer{ background:linear-gradient(170deg,var(--navy-deep),var(--navy) 60%,#0F2614); color:#B7C7B1;position:relative;overflow:hidden; } .denir-hp .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60ch 40ch at 88% 0%,rgba(92,165,36,.12),transparent 70%); } .denir-hp .site-footer .container{position:relative;z-index:1} .denir-hp .site-footer .f-top{padding-block:clamp(3.5rem,6vw,5.5rem);gap:clamp(2rem,4vw,3.5rem)} .denir-hp .site-footer .fcol h4{color:#fff;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.15rem} .denir-hp .site-footer a{color:#B7C7B1;transition:color var(--t-fast) var(--ease),padding-left var(--t) var(--ease-out)} .denir-hp .site-footer .fcol a:hover{color:var(--green-2);padding-left:.28rem} .denir-hp .site-footer .socials a{border-color:rgba(255,255,255,.16);color:#fff} .denir-hp .site-footer .f-bottom{border-top:1px solid rgba(255,255,255,.09);padding-block:1.75rem;color:#8B9986;font-size:.9375rem} .denir-hp .to-top{ background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; border-radius:14px;box-shadow:var(--sh-green); transition:transform var(--t) var(--ease-spring),box-shadow var(--t) var(--ease); } .denir-hp .to-top:hover{transform:translateY(-4px)} /* The page field is white now (the old navy page background belonged to the dark template look the client asked us to drop). Any leftover boxed gutters beside the header read as clean white, not a navy band. */ body.denir-has-fullbleed-header,body.denir-has-fullbleed-footer{background:#FFFFFF} /* ===================================================================== 10 — MOTION + REVEAL ===================================================================== */ .denir-hp .reveal{ opacity:0;transform:translateY(22px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); will-change:opacity,transform; } .denir-hp .reveal.in,.denir-hp .reveal.visible,.denir-hp .reveal.is-visible{opacity:1;transform:none} /* Stagger children of a grid so cards cascade instead of popping together. */ .denir-hp .grid > .reveal:nth-child(2),.denir-hp .projects > .reveal:nth-child(2), .denir-hp .tcards > .reveal:nth-child(2),.denir-hp .process > .reveal:nth-child(2){transition-delay:.08s} .denir-hp .grid > .reveal:nth-child(3),.denir-hp .projects > .reveal:nth-child(3), .denir-hp .tcards > .reveal:nth-child(3),.denir-hp .process > .reveal:nth-child(3){transition-delay:.16s} .denir-hp .grid > .reveal:nth-child(4),.denir-hp .projects > .reveal:nth-child(4), .denir-hp .tcards > .reveal:nth-child(4),.denir-hp .process > .reveal:nth-child(4){transition-delay:.24s} .denir-hp .grid > .reveal:nth-child(n+5){transition-delay:.3s} /* Images never cause layout shift. */ .denir-hp img{background:var(--surface-2)} .denir-hp .ph,.denir-hp .thumb{background:linear-gradient(135deg,var(--surface-2),var(--green-tint))} /* ===================================================================== 11 — RESPONSIVE ===================================================================== */ @media (max-width:1080px){ .denir-hp .site-header .container{height:80px} .denir-hp .hero,.denir-hp .page-hero{padding-top:80px} .denir-hp .nav{flex:initial} } @media (max-width:1080px){ .denir-hp .hero--v3 .hero-grid{grid-template-columns:1.05fr .95fr;gap:2rem} .denir-hp .hero__copy{max-width:none} } @media (max-width:900px){ .denir-hp{--sect:clamp(3.5rem,8vw,5rem)} .denir-hp .hero-grid,.denir-hp .hero--v3 .hero-grid{grid-template-columns:1fr;gap:2.5rem} /* Photo first would push the headline below the fold — keep copy on top. */ .denir-hp .hero--v3 .hero__media{max-width:440px;margin-inline:auto;width:100%} .denir-hp .hero__stats{padding:1.35rem 1.4rem;transform:translateY(2rem)} .denir-hp .hero__stats .hstat + .hstat{border-left:0;padding-left:0} .denir-hp .hero__leaf{right:-20%;top:-6%;width:min(90vw,560px);opacity:.7} .denir-hp .section-head{margin-bottom:2.5rem} /* Keep the scene, drop the most expensive blur on smaller GPUs. */ .denir-hp .hero__glow span{filter:blur(42px)} } @media (max-width:640px){ /* Contours and leaves become visual noise at phone width — keep only the strata and the flowing pipe, which still read as "underground work". */ .denir-hp .hs-contours,.denir-hp .hs-leaves{display:none} .denir-hp .hero__glow span{filter:blur(34px)} } @media (max-width:640px){ .denir-hp{--sect:3.75rem;--gutter:1.25rem;--r-2xl:28px;--r-xl:24px;font-size:1rem} .denir-hp .display{font-size:clamp(2.15rem,9vw,2.9rem)} /* Hero: single column of full-width actions, tighter photo frame. */ .denir-hp .hero__cta{width:100%} .denir-hp .hero__cta .btn{flex:1 1 100%;justify-content:center} .denir-hp .hero__tel{width:100%;justify-content:center;margin-top:.25rem} .denir-hp .hero--v3 .ph--main{aspect-ratio:4/3.6;border-top-right-radius:48px} .denir-hp .hero--v3 .ph--sub{width:38%;left:.5rem;bottom:-1.25rem;box-shadow:var(--sh),0 0 0 6px rgba(255,255,255,.9)} .denir-hp .hero__media--duo{padding-bottom:3.25rem;padding-left:0} .denir-hp .hero--v3 .exp-card{right:8px;bottom:3.5rem;padding:.75rem 1rem} .denir-hp .hero--v3 .exp-card b{font-size:1.4rem} .denir-hp .hero__logo img{height:76px} .denir-hp .hero__stats{grid-template-columns:1fr 1fr;gap:1rem;text-align:left} .denir-hp .calc__form,.denir-hp .calc__intro{padding:1.5rem 1.25rem} .denir-hp .site-header .container{height:68px} .denir-hp .hero,.denir-hp .page-hero{padding-top:68px} .denir-hp .btn{width:auto} .denir-hp .btn-row .btn{flex:1 1 auto;justify-content:center} .denir-hp .hero__stats{flex-direction:row;flex-wrap:wrap;gap:1.25rem 2rem} .denir-hp .mobile-menu{padding-top:92px} .denir-hp .mobile-menu a.m-link,.denir-hp .mobile-menu .dnav-mmenu a{font-size:1.35rem} } /* No horizontal overflow, ever. */ .denir-hp,.denir-hp .section,.denir-hp .hero{max-width:100%;overflow-x:clip} /* ===================================================================== 11b — BRAND LOADING SCREEN --------------------------------------------------------------------- Covers the page until load, showing the logo over the brand field with a green progress sweep. Removed by denir.js (and self-removes after 4s so a broken script can never leave the site hidden). ===================================================================== */ .denir-loader{ position:fixed;inset:0;z-index:99999;display:grid;place-items:center; background:radial-gradient(60ch 44ch at 50% 38%,#FFFFFF,var(--green-tint) 70%,#E7F2DD); transition:opacity .55s var(--ease-out),visibility .55s var(--ease-out); } .denir-loader__in{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem} /* The uploaded logo is the stacked mark; give it room but keep it contained. */ .denir-loader img{height:auto;width:auto;max-height:min(34vh,220px);max-width:min(78vw,300px);object-fit:contain;animation:denir-load-pop .8s var(--ease-spring) both} /* When a real logo is shown, it stands alone — no letter tile or name. */ .denir-loader.has-logo .denir-loader__tile, .denir-loader.has-logo .denir-loader__name{display:none} .denir-loader__tile{ width:76px;height:76px;border-radius:22px;display:grid;place-items:center;color:#fff; font-family:var(--f-display);font-weight:800;font-size:2rem; background:linear-gradient(135deg,var(--green-2),var(--green-dark)); box-shadow:0 18px 40px -18px rgba(92,165,36,.8); animation:denir-load-pop .8s var(--ease-spring) both; } .denir-loader__name{ font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.22em; text-transform:uppercase;color:var(--navy);opacity:.75; animation:denir-load-pop .8s .1s var(--ease-spring) both; } .denir-loader__bar{width:150px;height:3px;border-radius:3px;background:rgba(22,53,28,.12);overflow:hidden} .denir-loader__bar span{ display:block;width:40%;height:100%;border-radius:3px; background:linear-gradient(90deg,var(--green-2),var(--green-dark)); animation:denir-load-sweep 1.1s var(--ease) infinite; } @keyframes denir-load-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}} @keyframes denir-load-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}} .denir-loader.is-done{opacity:0;visibility:hidden;pointer-events:none} /* Never hide the site inside the Elementor editor. */ body.elementor-editor-active .denir-loader, body.elementor-editor-preview .denir-loader{display:none} /* ===================================================================== 11c — CONTRAST, GRID BALANCE & HOVER FIXES (v3.5.0) Issues found on the live site, fixed at the source. ===================================================================== */ /* --- Dark panels: every piece of text must be legible on forest green --- */ .denir-hp .contact-info{ background:linear-gradient(160deg,var(--forest-3),var(--forest) 60%,var(--forest-2)); border-radius:var(--r-2xl);padding:clamp(1.75rem,3vw,2.75rem);color:#D3E3CC; } .denir-hp .contact-info h3{color:#fff} .denir-hp .contact-info > p{color:rgba(211,227,204,.85)} .denir-hp .contact-info .cinfo{background:transparent;border:0;padding:.85rem 0} .denir-hp .contact-info .cinfo .k{color:rgba(211,227,204,.66)} /* These were rendering near-black on the dark panel. */ .denir-hp .contact-info .cinfo .v, .denir-hp .contact-info .cinfo a.v{color:#fff;font-weight:600} .denir-hp .contact-info .cinfo a.v:hover{color:var(--green-2)} .denir-hp .contact-info .cinfo .ic{ background:var(--green-soft);color:var(--green-deep); border:1px solid rgba(92,165,36,.25);border-radius:14px; } .denir-hp .contact-info .socials a{border-color:rgba(255,255,255,.18);color:#fff} /* Stats band: the suffix was a low-contrast gray. */ .denir-hp .section--navy .stat b,.denir-hp .stats .stat b{color:#fff} .denir-hp .section--navy .stat b .s,.denir-hp .stats .stat b .s{color:var(--green-2)} .denir-hp .section--navy .stat > span:last-child, .denir-hp .stats .stat > span:last-child{color:rgba(211,227,204,.82)} .denir-hp .hero__stats .hstat b .s{color:var(--green)} /* Anything inside a dark section defaults to legible light text. */ .denir-hp .section--navy,.denir-hp .cta-center,.denir-hp .calc__intro{color:#D3E3CC} .denir-hp .section--navy p,.denir-hp .cta-center p{color:rgba(211,227,204,.88)} .denir-hp .cta-center h2,.denir-hp .cta-center .h2{color:#fff} /* --- Grid balance --- */ .denir-hp .grid.g-3,.denir-hp .grid.g-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr)); } /* Six brochure services read best as two rows of three; four cards fill a single row of four, exactly like the approved reference. */ @media (min-width:1080px){ .denir-hp .grid.g-3{grid-template-columns:repeat(3,1fr)} .denir-hp .grid.g-3:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)} } /* Center a trailing orphan instead of leaving a gap on the right. */ .denir-hp .grid.g-3 > *:last-child:nth-child(3n+1), .denir-hp .grid.g-4 > *:last-child:nth-child(3n+1){grid-column:auto} /* --- Buttons: text must stay visible in every state --- */ /* The sliding sheen sits behind the label; make that explicit so no theme stacking context can float it over the text. */ .denir-hp .btn{color:#fff} .denir-hp .btn > *{position:relative;z-index:1} .denir-hp .btn::after{z-index:-1} .denir-hp .btn:hover,.denir-hp .btn:focus-visible{color:#fff} .denir-hp .btn--ghost{color:var(--navy)} .denir-hp .btn--ghost:hover,.denir-hp .btn--ghost:focus-visible{color:#fff} .denir-hp .btn--white,.denir-hp .btn--white:hover{color:var(--green-deep)} .denir-hp .section--navy .btn--ghost:hover, .denir-hp .cta-center .btn--ghost:hover, .denir-hp .hero .btn--ghost:hover{color:var(--navy)} /* Chips and text links keep their contrast on hover too. */ .denir-hp .chip.active,.denir-hp .chip.active:hover{color:#fff} .denir-hp .tlink:hover{color:var(--green-deep)} /* --- Process timeline: connect the steps --- */ .denir-hp .process{position:relative} .denir-hp .pstep{background:var(--surface);border:1px solid var(--line);z-index:1} .denir-hp .pstep .pn{color:var(--green-dark);-webkit-text-fill-color:currentColor;background:none;font-size:.8125rem;letter-spacing:.1em} .denir-hp .pstep h3{margin:.5rem 0 .5rem} .denir-hp .pstep:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(92,165,36,.3)} .denir-hp .pstep:hover .pic{transform:translateY(-2px) scale(1.05)} .denir-hp .pstep .pic{transition:transform var(--t) var(--ease-spring)} /* --- Value cards: give the check tile presence --- */ .denir-hp .icard{padding:clamp(1.6rem,2.4vw,2.15rem);text-align:left} .denir-hp .icard .ic{ width:52px;height:52px;border-radius:16px;margin-bottom:1.1rem; background:var(--green-soft);color:var(--green-deep); border:1px solid rgba(92,165,36,.2);display:grid;place-items:center; } .denir-hp .icard:hover .ic{background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff} .denir-hp .icard h3{font-size:1.15rem;margin-bottom:.5rem} .denir-hp .icard p{color:var(--muted);font-size:.9688rem} /* --- CTA band: cleaner gradient, better balance --- */ .denir-hp .cta-band{ background:linear-gradient(115deg,var(--forest-3) 0%,var(--forest) 42%,var(--green-dark) 100%); padding:clamp(1.75rem,3.5vw,2.6rem) clamp(1.75rem,4vw,3rem); } .denir-hp .cta-band h2{font-size:clamp(1.4rem,2.6vw,1.9rem)} .denir-hp .cta-band .ico{ width:52px;height:52px;border-radius:16px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18); } .denir-hp .cta-band .cta-left{gap:1.15rem;align-items:center} /* --- Living background on the dark bands, echoing the hero scene --- */ .denir-hp .section--navy::after,.denir-hp .cta-center::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(46ch 32ch at 12% 8%,rgba(111,191,46,.20),transparent 68%), radial-gradient(38ch 28ch at 88% 96%,rgba(92,165,36,.14),transparent 70%); animation:denir-band-drift 26s var(--ease) infinite alternate; } @keyframes denir-band-drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(3%,-3%,0) scale(1.08)} } /* ===================================================================== 11d — FACTS BAND + ANIMATED DARK-BAND / FOOTER SCENE (v3.7.0) ===================================================================== */ /* The animated SVG scene used by the facts band and the footer. */ .denir-hp .band__scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .denir-hp .band__scene svg{width:100%;height:100%;display:block} .denir-hp .bs-soil{animation:denir-soil-a 30s var(--ease) infinite alternate} .denir-hp .bs-pipe{animation:denir-pipe-drift 34s var(--ease) infinite alternate} .denir-hp .bs-pipe__flow{animation:denir-flow 3s linear infinite;filter:drop-shadow(0 0 6px rgba(155,217,94,.5))} .denir-hp .bs-contours{animation:denir-contour 44s var(--ease) infinite alternate} .denir-hp .bs-leaf{transform-box:fill-box;transform-origin:20% 80%} .denir-hp .bs-leaf--1{animation:denir-leaf-a 17s var(--ease) infinite alternate} .denir-hp .bs-leaf--2{animation:denir-leaf-b 21s var(--ease) infinite alternate} /* Facts band — the brochure's "MES SUTEIKIAME" list on the deep green field. */ .denir-hp .facts{position:relative;isolation:isolate} .denir-hp .facts > .container{position:relative;z-index:2} .denir-hp .facts .section-head{margin-bottom:clamp(2.25rem,4vw,3.5rem)} .denir-hp .facts h2,.denir-hp .facts .h2{color:#fff} .denir-hp .facts__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:clamp(1rem,2vw,1.5rem); } .denir-hp .fact{ display:flex;gap:1.1rem;align-items:flex-start; padding:clamp(1.25rem,2vw,1.6rem);border-radius:var(--r-lg); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:transform var(--t) var(--ease-out),background var(--t) var(--ease),border-color var(--t) var(--ease); } .denir-hp .fact:hover{transform:translateY(-5px);background:rgba(255,255,255,.09);border-color:rgba(155,217,94,.35)} .denir-hp .fact__ic{ flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center; background:rgba(155,217,94,.16);color:#CDEBAF;border:1px solid rgba(155,217,94,.26); transition:transform var(--t) var(--ease-spring),background var(--t) var(--ease),color var(--t) var(--ease); } .denir-hp .fact:hover .fact__ic{ transform:translateY(-2px) scale(1.06); background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; } .denir-hp .fact h3{color:#fff;font-size:1.0625rem;margin:.15rem 0 .4rem;letter-spacing:-.015em} .denir-hp .fact p{color:rgba(211,227,204,.82);font-size:.9375rem;line-height:1.6} /* Footer sits above its own scene. */ .denir-hp .site-footer{position:relative;isolation:isolate} .denir-hp .site-footer .band__scene{opacity:.75} .denir-hp .site-footer-inner{position:relative;z-index:2} /* Anchor targets clear the fixed header when a button scrolls to them. */ .denir-hp .section[id],.denir-hp .facts[id]{scroll-margin-top:clamp(80px,10vh,110px)} @media (max-width:640px){ .denir-hp .fact{gap:.9rem;padding:1.1rem} .denir-hp .fact__ic{width:42px;height:42px} } /* ===================================================================== 11e — SECTION LAYOUTS TO SPEC (v3.9.0) "Apie mus", "Ką dirbame" and "Darbų eiga" rebuilt to the approved reference layouts. ===================================================================== */ /* ---------- APIE MUS ------------------------------------------------ Portrait image card on the left, copy column on the right, a green circle-check list and one solid green CTA. */ .denir-hp .split{grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center} .denir-hp .split .media .ph{ aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh);background:var(--green-soft); } .denir-hp .split .media .ph img{width:100%;height:100%;object-fit:cover} .denir-hp .split .lead{color:var(--muted);max-width:56ch} .denir-hp .split .text-muted{color:var(--muted)} /* Circle-check list. */ .denir-hp .ticks{display:grid;gap:.9rem;margin:clamp(1.5rem,2.5vw,2rem) 0 clamp(1.75rem,3vw,2.25rem)} .denir-hp .ticks li{display:flex;align-items:flex-start;gap:.85rem;font-size:1rem;color:var(--text);line-height:1.55} .denir-hp .ticks .ck{ flex:none;display:grid;place-items:center; width:24px;height:24px;border-radius:50%;margin-top:.15rem; background:var(--green-dark);color:#fff; box-shadow:0 0 0 5px var(--green-soft); } .denir-hp .ticks .ck svg{width:13px;height:13px;stroke-width:3} /* ---------- KĄ DIRBAME ---------------------------------------------- Four equal cards: icon tile, title, description, and the text link pinned to the bottom so every card lines up. */ .denir-hp .scard{ display:flex;flex-direction:column;align-items:flex-start; padding:clamp(1.5rem,2.2vw,1.9rem); border-radius:var(--r-lg); } /* The floating corner arrow is not part of the approved layout. */ .denir-hp .scard .arw{display:none} .denir-hp .scard .ic{ width:52px;height:52px;border-radius:var(--r-md,16px); background:var(--green-soft);color:var(--green-dark); border:0;margin-bottom:1.25rem; } .denir-hp .scard .ic svg{width:24px;height:24px} /* First card reads as the highlighted one, matching the reference. */ .denir-hp .grid > .scard:first-child .ic{ background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; box-shadow:var(--sh-green); } .denir-hp .scard .h3{ font-size:1.1875rem;line-height:1.28;margin:0 0 .65rem; letter-spacing:-.02em;color:var(--navy); } .denir-hp .scard p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin-bottom:1.5rem} .denir-hp .scard .tlink{margin-top:auto;font-size:.9375rem;color:var(--green-dark)} /* ---------- DARBŲ EIGA ---------------------------------------------- Four step cards joined by a dashed rail that runs behind them, so the line shows only in the gaps between cards. */ .denir-hp .process{ position:relative;isolation:isolate; /* The card padding and the icon size are shared with the rail below, so the line cannot drift off the icons when either one is retuned. */ --pstep-pad:clamp(1.5rem,2.2vw,1.9rem); --pstep-pic:52px; --rail-dash:10px; /* dash */ --rail-gap:12px; /* space between dashes */ } /* Live rail — one flowing dashed line drawn behind the cards, so it shows only in the gaps between them. It runs from the FIRST icon's centre to the LAST icon's centre. It used to span the whole grid (left:0;right:0), which left a stub of dashes hanging past the last card with nothing to connect to. The icons sit at the left of each card, so the first centre is one (padding + half an icon) in from the left edge, and the last is that same distance into the final column. */ .denir-hp .process__rail{ position:absolute;z-index:0;pointer-events:none; top:calc(var(--pstep-pad) + var(--pstep-pic) / 2 - 1px); left:calc(var(--pstep-pad) + var(--pstep-pic) / 2); right:calc((100% - (var(--pcols,4) - 1) * var(--gap)) / var(--pcols,4) - var(--pstep-pad) - var(--pstep-pic) / 2); height:2px;color:var(--green);opacity:.55; background-image:repeating-linear-gradient(90deg, currentColor 0 var(--rail-dash), transparent var(--rail-dash) calc(var(--rail-dash) + var(--rail-gap))); animation:denir-rail 2.4s linear infinite; } /* One full dash period per cycle, so the loop has no visible seam. */ @keyframes denir-rail{to{background-position-x:calc(-1 * (var(--rail-dash) + var(--rail-gap)))}} @media (prefers-reduced-motion:reduce){.denir-hp .process__rail{animation:none}} .denir-hp .pstep{ position:relative;z-index:1;background:var(--surface); padding:var(--pstep-pad);border-radius:var(--r-lg); text-align:left; } .denir-hp .pstep .pic{ width:var(--pstep-pic);height:var(--pstep-pic);border-radius:var(--r-md,16px);margin:0 0 1.25rem; background:linear-gradient(135deg,var(--green-2),var(--green-dark));color:#fff; box-shadow:var(--sh-green);display:grid;place-items:center; } .denir-hp .pstep .pic svg{width:22px;height:22px} .denir-hp .pstep .pn{ display:block;font-family:var(--f-display);font-size:.75rem;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark); margin-bottom:.45rem; } .denir-hp .pstep h3{font-size:1.1875rem;letter-spacing:-.02em;margin:0 0 .55rem;color:var(--navy)} .denir-hp .pstep p{font-size:.9375rem;color:var(--muted);line-height:1.6;margin:0} /* Add-ons: tap-friendly priced checkbox rows. */ .denir-hp .calc__extras{margin-top:.25rem} .denir-hp .calc__extra{ display:flex;align-items:center;gap:.85rem; padding:1rem 1.1rem;margin-bottom:.65rem;min-height:58px; border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface-2); cursor:pointer;user-select:none; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease); } .denir-hp .calc__extra:hover{border-color:var(--green);background:var(--surface)} /* Custom check box so the tick is unmistakable. */ .denir-hp .calc__extra input{position:absolute;opacity:0;width:0;height:0;margin:0} .denir-hp .calc__extra-label{flex:1;font-size:1rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.85rem} .denir-hp .calc__extra-label::before{ content:"";flex:none;width:24px;height:24px;border-radius:7px; border:2px solid var(--line-2);background:#fff; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease); background-position:center;background-repeat:no-repeat;background-size:14px; } .denir-hp .calc__extra-price{font-weight:700;font-size:.9375rem;color:var(--green-deep);white-space:nowrap} .denir-hp .calc__extra:has(input:checked){border-color:var(--green);background:var(--green-tint);box-shadow:0 0 0 1px var(--green)} .denir-hp .calc__extra:has(input:checked) .calc__extra-label::before{ background-color:var(--green-dark);border-color:var(--green-dark); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .denir-hp .calc__extra input:focus-visible + .calc__extra-label::before{outline:3px solid var(--green);outline-offset:3px} /* Metre stepper: − [input] + */ .denir-hp .field__stepper{display:flex;align-items:stretch;gap:.5rem} .denir-hp .field__stepper .field__unit{flex:1} .denir-hp .c-step{ flex:none;width:52px;border-radius:14px; border:1.5px solid var(--line-2);background:var(--surface-2); font-size:1.4rem;line-height:1;font-weight:600;color:var(--green-dark); display:grid;place-items:center; transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease); } .denir-hp .c-step:hover{border-color:var(--green);background:var(--green-tint);color:var(--green-deep)} .denir-hp .c-step:active{transform:scale(.94)} @media (max-width:900px){ .denir-hp .split{grid-template-columns:1fr} .denir-hp .split .media{max-width:480px} .denir-hp .process__rail{display:none} } /* ===================================================================== 12 — ACCESSIBILITY ===================================================================== */ html:has(.denir-hp){scroll-behavior:smooth} .denir-hp :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:8px} .denir-hp ::selection{background:rgba(92,165,36,.24);color:var(--navy-deep)} @media (prefers-reduced-motion:reduce){ .denir-hp *,.denir-hp *::before,.denir-hp *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .denir-hp .reveal{opacity:1;transform:none} /* Staged hero entrance must never leave content hidden. */ .denir-hp .hero__logo,.denir-hp .hero .pill,.denir-hp .hero h1, .denir-hp .hero__lead,.denir-hp .hero .btn-row,.denir-hp .hero__stats, .denir-hp .hero__media{opacity:1;transform:none} /* The hero scene keeps its composition but stops moving entirely. */ .denir-hp .hs-soil,.denir-hp .hs-pipe,.denir-hp .hs-pipe__flow, .denir-hp .hs-contours,.denir-hp .hs-contours path,.denir-hp .hs-leaf, .denir-hp .hero__glow span,.denir-hp .hero__leaf{animation:none !important} } /* ===================================================================== CALCULATOR — phone capture inside the result panel The visitor has a price on screen; these controls sit on the dark forest panel, so every colour here is set for a dark background. ===================================================================== */ .denir-hp .calc__lead{ margin-top:1.25rem;padding-top:1.15rem; border-top:1px solid rgba(155,217,94,.28); } .denir-hp .calc__lead-title{ margin:0 0 .8rem;font-size:.9375rem;font-weight:700;color:#fff;line-height:1.45; } .denir-hp .calc__lead-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} @media (max-width:560px){ .denir-hp .calc__lead-row{grid-template-columns:1fr} } .denir-hp .calc__lead input[type=text], .denir-hp .calc__lead input[type=tel]{ width:100%;padding:.72rem .9rem;font:inherit;font-size:.9375rem;color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(155,217,94,.32);border-radius:var(--r-md,12px); transition:border-color .2s,background .2s,box-shadow .2s; } .denir-hp .calc__lead input::placeholder{color:rgba(255,255,255,.55)} .denir-hp .calc__lead input[type=text]:focus, .denir-hp .calc__lead input[type=tel]:focus{ outline:0;background:rgba(255,255,255,.13); border-color:#9BD95E;box-shadow:0 0 0 3px rgba(155,217,94,.22); } .denir-hp .calc__lead input.is-invalid{border-color:#FF8A7A;background:rgba(255,138,122,.12)} /* Honeypot: off-screen for people, still fillable for bots. */ .denir-hp .calc__lead .cl-hp{ position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important; opacity:0!important;pointer-events:none!important; } .denir-hp .calc__lead-consent{ display:flex;gap:.55rem;align-items:flex-start;margin-top:.75rem; font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.72);cursor:pointer; } .denir-hp .calc__lead-consent input{margin-top:.15rem;accent-color:#9BD95E;flex:none} .denir-hp .calc__lead-error{ margin:.65rem 0 0;font-size:.8125rem;font-weight:600;color:#FFB4A8; } .denir-hp .calc__lead-error[hidden]{display:none} /* Confirmation shown in place of the form. */ .denir-hp .calc__lead-ok{text-align:center;padding:.5rem 0 .25rem} .denir-hp .calc__lead-ok[hidden]{display:none} .denir-hp .calc__lead-ok .ok{ width:44px;height:44px;border-radius:50%;margin:0 auto .7rem; background:rgba(155,217,94,.18);color:#9BD95E;display:grid;place-items:center; } .denir-hp .calc__lead-ok p{margin:0;color:#fff;font-weight:600;font-size:.9375rem} /* Denir's own number — the immediate alternative to waiting for a callback. */ .denir-hp .calc__call{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.5rem; margin-top:1.1rem;padding-top:1rem; border-top:1px solid rgba(155,217,94,.22); } .denir-hp .calc__call span{font-size:.8125rem;color:rgba(255,255,255,.66)} .denir-hp .calc__call a{ font-family:var(--f-display);font-weight:800;font-size:1.0625rem; color:#9BD95E;text-decoration:none;letter-spacing:-.01em; } .denir-hp .calc__call a:hover,.denir-hp .calc__call a:focus-visible{text-decoration:underline} /* The secondary link keeps its place but stops competing with the form. */ .denir-hp .calc__result .btn--ghost{ margin-top:.85rem;background:transparent;color:rgba(255,255,255,.8); border:1px solid rgba(155,217,94,.34);box-shadow:none; } .denir-hp .calc__result .btn--ghost:hover, .denir-hp .calc__result .btn--ghost:focus-visible{ background:rgba(255,255,255,.07);color:#fff;border-color:rgba(155,217,94,.55); } /* ===================================================================== HERO — phone width: close the dead space above the headline The fixed header already reserves 68px; the grid then added another ~3rem of its own, leaving an empty green band at the top of the page. Tightening it brings the headline and photo up into view together. ===================================================================== */ @media (max-width:640px){ .denir-hp .hero--v3 .hero-grid{padding-block:1.25rem 2.5rem;gap:2rem} .denir-hp .hero--v3 h1{margin:.85rem 0 1.1rem} .denir-hp .hero--v3 .hero__lead{margin-bottom:1.75rem} /* The photo pair carries the hero on a phone, so give it a little more presence now that it sits higher up the page. */ .denir-hp .hero--v3 .hero__media{max-width:none} .denir-hp .hero--v3 .ph--main{aspect-ratio:4/3.2} } /* ===================================================================== CTA panel — keep the pill the width of its own text .cta-center is a column flexbox, so its default align-items:stretch was overriding the pill's inline-flex width and pulling it edge to edge. Centring it on the cross axis lets it hug its label again. ===================================================================== */ .denir-hp .cta-center .pill{ align-self:center; width:auto; max-width:100%; white-space:nowrap; } @media (max-width:520px){ /* Long labels get to wrap rather than overflow the panel. */ .denir-hp .cta-center .pill{white-space:normal;text-align:center} } /* ===================================================================== 16 — CALCULATOR, UNIFIED (v4.12) The section used to read as two half-finished calculators: a dark intro rail with a large dead area, and a white column holding the inputs with a second, separately-framed result card bolted underneath — the latter carrying a lead form AND a ghost button repeating the same words. It is now ONE card: inputs on the white side, the running quote on the dark side, a single call to action. The dark gradient is painted on .calc itself so the intro and the result share one seamless rail. ===================================================================== */ .denir-hp .calc{ background:linear-gradient(150deg,var(--navy-deep),var(--navy) 55%,var(--navy-2)); grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:stretch; } .denir-hp .calc__intro{ background:transparent; grid-column:1;grid-row:1; padding-bottom:1.1rem; } /* The inputs span both rows, so the white panel is always full height and the dark rail can never end in an empty block. */ .denir-hp .calc__form{ grid-column:2;grid-row:1 / span 2; background:var(--surface); display:flex;flex-direction:column;justify-content:center; } .denir-hp .calc__result{ grid-column:1;grid-row:2; display:none; margin:0 clamp(1.75rem,3.2vw,2.5rem) clamp(1.75rem,3.2vw,2.5rem); padding:1.4rem clamp(1.15rem,1.8vw,1.5rem) 1.5rem; background:rgba(255,255,255,.055); border:1px solid rgba(155,217,94,.24); border-radius:var(--r-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .denir-hp .calc__result.show{display:block} .denir-hp .calc__result .rnote{border-top:1px dashed rgba(155,217,94,.28)} @media (max-width:1080px){ /* Single column: intro → inputs → quote, which is also the reading order. */ .denir-hp .calc{grid-template-columns:1fr} .denir-hp .calc__intro{grid-column:1;grid-row:auto;padding-bottom:0} .denir-hp .calc__form{grid-column:1;grid-row:auto} .denir-hp .calc__result{ grid-column:1;grid-row:auto; margin:clamp(1.5rem,4vw,2rem) clamp(1.25rem,4vw,2rem); } } /* The consent tick was inheriting .calc__form's input reset (appearance:none + width:100%), which blew it up into a full-width white slab and pushed its own label out of the card — the stray text that showed through the section background. Pin it back to a real checkbox. */ .denir-hp .calc__lead-consent input[type=checkbox]{ -webkit-appearance:none;appearance:none; width:18px;min-width:18px;height:18px;flex:0 0 18px; margin:.1rem 0 0;padding:0; border:1.5px solid rgba(155,217,94,.55);border-radius:5px; background:rgba(255,255,255,.08);box-shadow:none; display:grid;place-items:center;cursor:pointer; transition:background .2s,border-color .2s; } .denir-hp .calc__lead-consent input[type=checkbox]:checked{background:#9BD95E;border-color:#9BD95E} .denir-hp .calc__lead-consent input[type=checkbox]:checked::after{ content:"";width:4px;height:9px; border:solid #16351C;border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg); } .denir-hp .calc__lead-consent input[type=checkbox]:focus-visible{ outline:3px solid rgba(155,217,94,.55);outline-offset:2px; } .denir-hp .calc__lead-consent span{min-width:0} /* ===================================================================== 17 — PROJECT CARDS: say that a gallery is behind the photo (v4.12) Nothing on the card used to hint that clicking opened more photos, so the galleries went unseen. Every lightbox card now carries a permanent photo count and a hover/focus overlay naming the action. ===================================================================== */ .denir-hp .pcard--lb{cursor:pointer} .denir-hp .pcard--lb .thumb{position:relative} /* Permanent, always-visible count — the affordance that survives touch, where there is no hover. */ .denir-hp .thumb__count{ position:absolute;right:.75rem;bottom:.75rem;z-index:2; display:inline-flex;align-items:center;gap:.4rem; padding:.36rem .6rem;border-radius:var(--r-pill); background:rgba(15,38,20,.82); color:#fff;font-size:.78rem;font-weight:700;line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.22); transition:background .25s var(--ease,ease),transform .25s var(--ease,ease); } .denir-hp .thumb__count svg{width:14px;height:14px;flex:none} .denir-hp .pcard--lb:hover .thumb__count{background:var(--green);transform:translateY(-2px)} /* Hover / keyboard-focus overlay spelling out what the click does. */ .denir-hp .thumb__zoom{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem; background:linear-gradient(180deg,rgba(15,38,20,.28),rgba(15,38,20,.72)); color:#fff;text-align:center;padding:1rem; opacity:0;transition:opacity .3s var(--ease,ease); } .denir-hp .thumb__zoom i{ width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34); transform:scale(.86);transition:transform .3s var(--ease,ease); } .denir-hp .thumb__zoom b{font-size:.875rem;font-weight:700;letter-spacing:.01em} .denir-hp .pcard--lb:hover .thumb__zoom, .denir-hp .pcard--lb:focus-visible .thumb__zoom{opacity:1} .denir-hp .pcard--lb:hover .thumb__zoom i, .denir-hp .pcard--lb:focus-visible .thumb__zoom i{transform:scale(1)} .denir-hp .pcard--lb:focus-visible{outline:3px solid var(--green);outline-offset:3px} @media (hover:none){ /* No hover to reveal it — keep the overlay out of the way entirely and let the count badge carry the message. */ .denir-hp .thumb__zoom{display:none} } /* Head of the input column — keeps the white side from opening on a blank band now that it is stretched to the full height of the card. */ .denir-hp .calc__form-head{margin:0 0 1.5rem} .denir-hp .calc__form-head .eyebrow{color:var(--green-dark)} .denir-hp .calc__form-head h4{ margin:.35rem 0 0;font-family:var(--f-display);font-weight:800; font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.02em;color:var(--text); } /* Lightbox — denir.css still paints it in the pre-rebrand navy-blue (#0A1221 / #0B1524). Bring it onto the forest-green scale. */ .denir-lb__backdrop{background:rgba(15,38,20,.94)} .denir-lb__img{background:#16351C} /* ===================================================================== 18 — THE PROJECTS PAGE IS A GALLERY (v4.13) The work is the photographs, so they are shown directly: one masonry wall of every project's photos, each carrying its project's category so the filter pills cut through the photos themselves. Clicking one opens the lightbox over whatever the active pill is showing. ===================================================================== */ .denir-hp .chip{display:inline-flex;align-items:center;gap:.45rem} .denir-hp .chip__n{ display:inline-grid;place-items:center;min-width:1.35em;padding:0 .35em; border-radius:var(--r-pill); background:var(--green-soft);color:var(--green-deep); font-size:.72rem;font-weight:800;line-height:1.5; transition:background .28s var(--ease,ease),color .28s var(--ease,ease); } .denir-hp .chip.active .chip__n{background:rgba(255,255,255,.22);color:#fff} /* A uniform wall, not a masonry. These are 56 portrait phone photos: left at their own heights they stacked into a ~9,700px page nobody scrolls, and the columns reflowed as lazy images landed. Every tile is now the same 4:5 crop, so the wall is scannable, the row heights are known before a single photo loads, and the lightbox still shows the uncropped original. */ .denir-hp .denir-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(.65rem,1.1vw,1rem); margin-top:.25rem; } @media (max-width:760px){ .denir-hp .denir-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} } .denir-hp .gphoto{ position:relative;display:block;margin:0; aspect-ratio:4/5; border-radius:var(--r-lg);overflow:hidden;cursor:pointer; background:var(--bg-2); box-shadow:0 1px 2px rgba(23,33,26,.06); transition:box-shadow .35s var(--ease,ease),transform .35s var(--ease,ease); } .denir-hp .gphoto img{ display:block;width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ease,ease); } .denir-hp .gphoto:hover{box-shadow:0 18px 40px -18px rgba(23,33,26,.45);transform:translateY(-3px)} .denir-hp .gphoto:hover img{transform:scale(1.05)} .denir-hp .gphoto:focus-visible{outline:3px solid var(--green);outline-offset:3px} /* The tag rides every tile permanently — on touch there is no hover, and it is the only thing that says which kind of work the photo shows. */ .denir-hp .gphoto__tag{ position:absolute;top:.6rem;left:.6rem;z-index:2; display:inline-block;padding:.26rem .6rem;border-radius:var(--r-pill); background:rgba(255,255,255,.96);color:var(--green-deep); font-size:.68rem;font-weight:800;letter-spacing:.03em;line-height:1.4; box-shadow:0 2px 8px rgba(23,33,26,.16); } /* The job title is context, not a label on 56 tiles at once — it arrives on hover / keyboard focus, with the zoom cue that says the photo opens. */ .denir-hp .gphoto figcaption{ position:absolute;inset:auto 0 0 0;z-index:1; display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem; padding:2.2rem .75rem .7rem; background:linear-gradient(180deg,transparent,rgba(15,38,20,.88)); color:#fff; opacity:0;transform:translateY(6px); transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease); } .denir-hp .gphoto:hover figcaption, .denir-hp .gphoto:focus-visible figcaption{opacity:1;transform:none} .denir-hp .gphoto figcaption b{ font-size:.8125rem;font-weight:700;line-height:1.35; text-shadow:0 1px 6px rgba(0,0,0,.45); } .denir-hp .gphoto__zoom{ flex:none;width:28px;height:28px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34); } @media (hover:none){ /* No hover to reveal it: show the title outright rather than never. */ .denir-hp .gphoto figcaption{opacity:1;transform:none} .denir-hp .gphoto__zoom{display:none} } /* Before/After pairs */ .denir-hp .gphoto--pair .gphoto__pair-wrap { position: relative; width: 100%; height: 100%; } .denir-hp .gphoto--pair .gphoto__img-before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s var(--ease); } .denir-hp .gphoto--pair .gphoto__img-after { width: 100%; height: 100%; } .denir-hp .gphoto--pair:hover .gphoto__img-before, .denir-hp .gphoto--pair:focus-visible .gphoto__img-before { opacity: 1; } .denir-hp .gphoto__badge { /* Top-right: the category tag owns the top-left corner and paints over anything sharing it, which hid the PRIEŠ/PO badge entirely. */ position: absolute; top: 14px; right: 14px; background: var(--green); color: #fff; font-family: var(--f-display); font-size: .75rem; font-weight: 700; padding: .35rem .7rem; border-radius: 6px; letter-spacing: .06em; z-index: 2; transition: opacity 0.5s var(--ease); box-shadow: 0 4px 12px rgba(22, 53, 28, 0.15); } .denir-hp .gphoto__badge--before { background: var(--navy); opacity: 0; } .denir-hp .gphoto--pair:hover .gphoto__badge--after, .denir-hp .gphoto--pair:focus-visible .gphoto__badge--after { opacity: 0; } .denir-hp .gphoto--pair:hover .gphoto__badge--before, .denir-hp .gphoto--pair:focus-visible .gphoto__badge--before { opacity: 1; } /* While the lightbox owns the screen, nothing else may sit on top of it. The fixed header's burger landed within a few pixels of the lightbox's close button — two controls stacked in the same corner, reading as a doubled close icon. visibility (not display) keeps the header's box, so the page underneath does not jump when it comes back. */ html.denir-lb-open .denir-hp .site-header, html.denir-lb-open .denir-hp .to-top{ visibility:hidden; opacity:0; pointer-events:none; } /* ...and visibility alone is not enough. The header is position:fixed WITH a backdrop-filter, which promotes it to its own compositing layer; a hidden layer can still be composited, so the burger ghosted through the lightbox as a second close icon — one cross with its circle, one without. Dropping backdrop-filter destroys the layer. Every other blurred surface under the overlay goes with it: on the gallery page that is 50+ layers Chrome no longer has to composite behind a full-screen image. */ html.denir-lb-open .denir-hp *, html.denir-lb-open .denir-hp *::before, html.denir-lb-open .denir-hp *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* The overlay owns its own stacking and compositing context, so nothing underneath can paint into it. */ .denir-lb.open{isolation:isolate;transform:translateZ(0)} /* The WordPress admin bar is fixed at the top of the viewport for every logged-in user, and the lightbox's close button sat at top:18px — directly underneath it, half-covered and half-unclickable. WordPress puts .admin-bar on exactly so overlays can step out of its way. */ body.admin-bar .denir-lb__close{top:50px} @media screen and (max-width:782px){ /* The bar is 46px tall below this width, and it stops being fixed — but the lightbox locks scrolling at the top, so the offset still applies. */ body.admin-bar .denir-lb__close{top:64px} } /* ===================================================================== OVERLAY KEYBOARD AFFORDANCES Every focus style on this site is scoped to `.denir-hp`, but the lightbox is appended to — outside that scope. So once focus was trapped inside the overlay there was nothing to show where it had landed, on a near-black backdrop where the browser's default ring is invisible. These give the trapped focus somewhere visible to be. ===================================================================== */ .denir-lb :focus-visible{ outline:3px solid var(--green-2,#7ac143); outline-offset:3px; border-radius:50%; } .denir-lb__stage:focus-visible, .denir-lb:focus-visible{outline:3px solid var(--green-2,#7ac143);outline-offset:-6px;border-radius:12px} /* The counter doubles as the position readout for the arrow keys, so it must not be the faintest thing on screen. */ .denir-lb__count{color:rgba(255,255,255,.92)} /* The mobile menu is a modal panel: the page behind it is locked while it is open, so its own links are the only thing focus can reach. */ .denir-hp .mobile-menu a:focus-visible{ outline:3px solid var(--green-2,#7ac143);outline-offset:4px;border-radius:6px; } /* ===================================================================== HERO PHOTO BACKDROP --------------------------------------------------------------------- A real job photograph carried behind the whole hero instead of only in the side cards. It is deliberately faded: the headline is the message, the photo gives the field depth and proves the work is the company's own. The scrim is heaviest over the copy column and thins towards the right, so the machine reads while the text keeps full contrast, and it dissolves into the green grass edge at the bottom of the section. Applies only when a photo is set (.hero--photo). ===================================================================== */ .denir-hp .hero--photo{ background:linear-gradient(178deg,#FFFFFF 0%,var(--green-tint) 58%,#EAF3E1 100%); } .denir-hp .hero__bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-repeat:no-repeat;background-size:cover; /* the source frames are portrait, so only a middle band shows on wide screens — dropped so the machine sits in the gap between the copy and the photo cards, with grass under the buttons */ background-position:70% 52%; /* a shallow depth of field: the photograph stays readable as the company's own work but stops competing with the headline and the two sharp photo cards in front of it */ filter:blur(2px);transform:scale(1.03); } .denir-hp .hero__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.22) 30%,rgba(234,243,225,.66) 84%,#EAF3E1 100%), linear-gradient(96deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,.66) 50%,rgba(255,255,255,.46) 72%,rgba(255,255,255,.38) 100%); } /* The painted decoration was tuned against a flat gradient; over a photograph it would fight the picture, so it steps back. */ .denir-hp .hero--photo .hero__scene{opacity:.4} .denir-hp .hero--photo .hero__blob, .denir-hp .hero--photo .hero__leaf{opacity:.45} .denir-hp .hero--photo .hero__glow{opacity:.6} @media (max-width:900px){ /* Stacked layout: the copy runs the full width, so the scrim has to be even across it and the crop moves to the machine. */ .denir-hp .hero__bg{background-position:64% 34%} .denir-hp .hero__bg::after{ background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 46%,rgba(234,243,225,.9) 88%,#EAF3E1 100%); } } /* ---- PHOTO-ONLY HERO (v4.29.0) -------------------------------------- No framed cards: the photograph itself is the right half of the hero, sharp, and dissolves leftwards into the pale green field the copy sits on. The scrim is horizontal — opaque under the headline, gone by the machine — with only a light top fade so the navbar edge stays clean and a bottom fade into the grass tone. The painted scene, blob and dots would print through the photo, so they are switched off. */ .denir-hp .hero--photo-only .hero__bg{ filter:none;transform:none; /* The source is portrait. Stretched to the full hero width it would show only a zoomed band of the machine, so the layer is sized from the hero's HEIGHT instead (a square hung on the right edge) and its own left edge is masked away — the dissolve then lands in the same place whatever the viewport width. */ left:auto;right:0;width:auto;max-width:100%; aspect-ratio:1/1; background-size:cover;background-position:62% 48%; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.88) 52%,#000 62%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 4%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.88) 52%,#000 62%); } .denir-hp .hero--photo-only .hero__bg::after{ background: linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 16%,rgba(234,243,225,0) 78%,rgba(234,243,225,.9) 100%); } .denir-hp .hero--photo-only .hero__scene, .denir-hp .hero--photo-only .hero__blob, .denir-hp .hero--photo-only .hero__dots, .denir-hp .hero--photo-only .hero__leaf, .denir-hp .hero--photo-only .hero__glow{display:none} /* Copy keeps its column; the photo simply shows through the empty one. */ .denir-hp .hero--photo-only .hero__copy{position:relative;z-index:1} @media (max-width:900px){ /* One column: the copy spans the width, so the photo fills the hero again and sits behind the text as a soft wash instead of a clear right-hand half. */ .denir-hp .hero--photo-only .hero__bg{ left:0;width:auto;aspect-ratio:auto; background-position:62% 40%; -webkit-mask-image:none;mask-image:none; } .denir-hp .hero--photo-only .hero__bg::after{ background: linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(234,243,225,.3) 24%,rgba(234,243,225,.22) 70%,rgba(234,243,225,.95) 100%), linear-gradient(90deg,rgba(234,243,225,.5) 0%,rgba(234,243,225,.3) 45%,rgba(234,243,225,.1) 100%); } /* With the lighter wash the photograph shows through clearly, so the copy carries its own soft white halo to stay legible over foliage. */ .denir-hp .hero--photo-only .display, .denir-hp .hero--photo-only .hero__lead{ text-shadow:0 0 2px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.9),0 2px 22px rgba(255,255,255,.85); } .denir-hp .hero--photo-only .hero__lead{color:var(--navy)} /* The accent word is gradient-filled text; a shadow would print through its transparent glyphs, so it goes solid green and gets a lighter halo. */ .denir-hp .hero--photo-only .display em{ background:none;-webkit-background-clip:initial;background-clip:initial; -webkit-text-fill-color:var(--green-dark);color:var(--green-dark); text-shadow:0 0 2px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.9); } } /* The number of stages is set per page (--pcols on .process, written by process_block), so a row of three fills the width instead of leaving an empty fourth column. The narrow-screen layouts below re-state the two breakpoints from denir.css, which this later rule would otherwise win. */ .denir-hp .process{grid-template-columns:repeat(var(--pcols,4),1fr)} @media (max-width:900px){.denir-hp .process{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}} @media (max-width:640px){.denir-hp .process{grid-template-columns:1fr;gap:1.8rem}} /* ===================================================================== PAGE HERO — SIZE AND SUBSTANCE --------------------------------------------------------------------- The interior banners were a tall green field holding a breadcrumb, a heading and a single line, which read as an empty slab before the page even started. The band is now shorter and carries a real intro: a lead line at reading size and a supporting paragraph under it. ===================================================================== */ .denir-hp .page-hero .container{padding-block:clamp(1.9rem,3.6vw,3rem)} .denir-hp .page-hero{padding-bottom:clamp(1.6rem,3vw,2.6rem)} .denir-hp .page-hero h1,.denir-hp .page-hero .h1{margin-bottom:.75rem} .denir-hp .page-hero__lead{ font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.66; color:var(--navy);max-width:58ch;margin-inline:auto; } .denir-hp .page-hero__text{ margin-top:.85rem;font-size:.9688rem;line-height:1.75; color:var(--muted);max-width:72ch;margin-inline:auto; } @media (max-width:640px){ .denir-hp .page-hero__text{font-size:.9375rem;line-height:1.7} } /* ===================================================================== 08 — GALLERY SECTION HEADINGS ===================================================================== */ .denir-hp .gallery-section-heading { font-family: var(--f-display); font-size: 1.25rem; margin: 3rem 0 1.25rem; display: flex; align-items: baseline; gap: 10px; letter-spacing: -.01em; color: var(--navy); font-weight: 600; } .denir-hp .gallery-section-heading:first-of-type { margin-top: 0; } /* ===================================================================== PAGE HERO — SPACING AND COLOUR (client revision) --------------------------------------------------------------------- Two reports about the interior banners: 1. "Text SPACING" — the display face is set with a tight negative letter-spacing, which eats the word gaps as well as the letter gaps, so "Darbų pavyzdžiai" and "Mūsų paslaugos" read as one word. The tracking is now given back on the space character only. 2. "Very visually empty" — the band was a pale slab holding three lines of centred text. It is shorter now and carries a real green field: a broad wash from the top-right, a soft counter-glow bottom-left and the same faint drafting grid the homepage hero uses, fading out into the white of the section below it. ===================================================================== */ /* 1 — word spacing. Applies to every H1 on the site, page heroes and the homepage display heading alike. */ .denir-hp .h1,.denir-hp .display,.denir-hp .page-hero h1{word-spacing:.12em} .denir-hp .h1{letter-spacing:-.024em} .denir-hp .display{letter-spacing:-.028em} /* 2 — a shorter band with actual colour in it. */ .denir-hp .page-hero{ position:relative;isolation:isolate; padding-bottom:clamp(1.2rem,2.4vw,2rem); background: radial-gradient(64ch 46ch at 92% -14%,rgba(92,165,36,.26),transparent 72%), radial-gradient(56ch 38ch at 2% 108%,rgba(63,125,27,.14),transparent 72%), linear-gradient(176deg,#FFFFFF 2%,var(--green-soft) 62%,var(--green-tint)); } .denir-hp .page-hero .container{padding-block:clamp(1.5rem,2.8vw,2.4rem)} /* The drafting grid — the texture that keeps the field from reading as a flat wash. Masked so it never reaches the text or the lower edge. */ .denir-hp .page-hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(22,53,28,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(22,53,28,.05) 1px,transparent 1px); background-size:56px 56px,56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 78% 12%,#000,transparent 76%); mask-image:radial-gradient(ellipse 70% 80% at 78% 12%,#000,transparent 76%); } /* Fade the band into the white section that follows it. */ .denir-hp .page-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(28px,5vw,56px); z-index:0;pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(255,255,255,.85)); } .denir-hp .page-hero__blob{ z-index:0;width:min(560px,70vw);height:min(560px,70vw); background:radial-gradient(circle,rgba(111,191,46,.22),transparent 66%); } /* Tighter vertical rhythm inside the shorter band. */ .denir-hp .page-hero .crumbs{margin-bottom:.85rem} .denir-hp .page-hero h1,.denir-hp .page-hero .h1{margin-bottom:.6rem} .denir-hp .page-hero__lead{color:var(--navy-deep)} .denir-hp .page-hero__text{margin-top:.7rem} /* Service detail blocks now end on two routes — the contact page and the gallery — so the section is informative on its own (client revision). */ .denir-hp .sd-actions{margin-top:1rem} .denir-hp .sd-actions .btn{margin-top:0} /* ---- BEFORE/AFTER COMPOSITES (v4.30.0) ------------------------------- The client hands over finished prieš/po pictures: one tall frame with both halves side by side and the labels printed in the bottom corners. A 4/5 tile would crop the top and bottom and lose those labels, so the composites keep their own ratio and get a slightly wider column. */ .denir-hp .denir-gallery--composites{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .denir-hp .gphoto--composite{aspect-ratio:1320/2346} @media (max-width:760px){ .denir-hp .denir-gallery--composites{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} } /* ---- INTERIOR HERO PHOTO (v4.31.0) ---------------------------------- Every interior band carries its own job photograph (never the homepage hero shot). The copy is centred, so the photo cannot simply own one half the way it does on the home page: it fills the band, is washed towards the pale green field, and fades in from the top so the navbar edge stays clean. The drafting grid and blob would print through it, so they go. */ .denir-hp .page-hero--photo{overflow:hidden} .denir-hp .page-hero__bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-size:cover;background-position:50% 42%;background-repeat:no-repeat; } .denir-hp .page-hero__bg::after{ content:"";position:absolute;inset:0; /* The photograph stays as clear as it can: no overall wash, only a short fade under the navbar, a fade into the white section below, and one soft pale pool sitting exactly behind the centred copy. Legibility comes from that pool plus the text halo, not from dimming the picture. */ background: linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 84%,rgba(255,255,255,.96) 100%), radial-gradient(ellipse 40% 70% at 50% 54%,rgba(244,248,240,.9) 0%,rgba(244,248,240,.78) 45%,rgba(244,248,240,.35) 78%,rgba(244,248,240,0) 100%); } .denir-hp .page-hero--photo::before, .denir-hp .page-hero--photo .page-hero__blob{display:none} .denir-hp .page-hero--photo .container{position:relative;z-index:1} /* The photograph shows through under the text, so the copy carries a soft white halo — the same treatment the homepage uses on narrow screens. */ .denir-hp .page-hero--photo h1, .denir-hp .page-hero--photo .h1, .denir-hp .page-hero--photo .page-hero__lead, .denir-hp .page-hero--photo .page-hero__text, .denir-hp .page-hero--photo .crumbs{ text-shadow:0 0 1px rgba(255,255,255,1),0 0 3px rgba(255,255,255,1),0 0 12px rgba(255,255,255,.95),0 0 28px rgba(255,255,255,.9),0 2px 40px rgba(255,255,255,.8); } /* The muted greys the plain band uses vanish against foliage: everything in the photo band is set in the deep navy-green, crumbs included. */ .denir-hp .page-hero--photo h1, .denir-hp .page-hero--photo .h1{color:var(--navy-deep)} .denir-hp .page-hero--photo .page-hero__lead{color:var(--navy-deep)} .denir-hp .page-hero--photo .page-hero__text{color:var(--navy)} .denir-hp .page-hero--photo .crumbs, .denir-hp .page-hero--photo .crumbs a, .denir-hp .page-hero--photo .crumbs .sep{color:var(--navy)} .denir-hp .page-hero--photo .crumbs .cur{color:var(--green-dark);font-weight:600} @media (max-width:900px){ .denir-hp .page-hero__bg{background-position:50% 40%} /* The copy spans the whole width on phones, so the pool widens with it. */ .denir-hp .page-hero__bg::after{ background: linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 84%,rgba(255,255,255,.96) 100%), radial-gradient(ellipse 66% 70% at 50% 54%,rgba(244,248,240,.9) 0%,rgba(244,248,240,.78) 50%,rgba(244,248,240,.35) 80%,rgba(244,248,240,0) 100%); } }