/* ================================================================= Ententt — tasteful enhancement layer Scroll-reveal motion + hero impact. Loaded after main.css so it wins on conflicts. Degrades gracefully when JS is unavailable. ================================================================= */ :root { --accent-grad: linear-gradient(120deg, #8B5CF6 0%, #6A8DF6 48%, #38BDF8 100%); /* easeOutQuint — long, soft deceleration for that buttery feel */ --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ----------------------------------------------------------------- Scroll reveal Hidden states are keyed off (set by an inline head script) so they apply on first paint — no flash, and if JS is off the class never lands and everything stays visible. ----------------------------------------------------------------- */ html.reveal-on .intro-blurb, html.reveal-on .hero-meta, html.reveal-on .image.main, html.reveal-on section.tiles-clear > article, html.reveal-on section.tiles-background > article, html.reveal-on section.half-split > article { opacity: 0; transform: translateY(16px); transition: opacity 1.2s var(--reveal-ease), transform 1.2s var(--reveal-ease); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.reveal-on .is-visible { opacity: 1 !important; transform: none !important; } /* Section topper — title leads, paragraph lags behind it. */ html.reveal-on .section-topper h2, html.reveal-on .section-topper p { opacity: 0; transform: translateY(16px); transition: opacity 1.2s var(--reveal-ease), transform 1.2s var(--reveal-ease); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.reveal-on .section-topper.is-visible h2 { opacity: 1; transform: none; } html.reveal-on .section-topper.is-visible p { opacity: 0.7; /* supporting copy stays at 70% */ transform: none; } /* Hero splash — slow, deliberate fade-in with minimal travel. */ html.reveal-on .image.main { transform: translateY(22px); transition: opacity 1.7s var(--reveal-ease), transform 1.7s var(--reveal-ease); } /* Logo — soft "focus-in": fades up from a faint blur + slight scale, settling crisply just after the headline. No jump, feels premium. */ html.reveal-on #header .logo { opacity: 0; transform: scale(0.97); filter: blur(6px); transition: opacity 1.1s var(--reveal-ease), transform 1.1s var(--reveal-ease), filter 1.1s var(--reveal-ease); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform, filter; } html.reveal-on #header .logo.is-visible { opacity: 1; transform: none; filter: blur(0); } /* Expertise list — each line cascades in once the list scrolls into view. Keyed off the parent article's .is-visible so the whole sequence fires from a single trigger rather than per-line scroll. */ html.reveal-on article.lined-list li { opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--reveal-ease), transform 0.9s var(--reveal-ease); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.reveal-on article.lined-list.is-visible li { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.reveal-on .intro-blurb, html.reveal-on .hero-meta, html.reveal-on .image.main, html.reveal-on .section-topper, html.reveal-on section.tiles-clear > article, html.reveal-on section.tiles-background > article, html.reveal-on section.half-split > article, html.reveal-on article.lined-list li, html.reveal-on #header .logo, html.reveal-on .section-topper h2 { opacity: 1; transform: none; filter: none; transition: none; } html.reveal-on .section-topper p { opacity: 0.7; transform: none; transition: none; } } /* ----------------------------------------------------------------- Hero impact ----------------------------------------------------------------- */ #main { position: relative; } #main > .inner { position: relative; z-index: 1; } /* Headline: tighten and lift. */ header.intro-blurb h1 { letter-spacing: -0.015em; } /* Forced line break after "turn" on the two largest tiers (>=1280px); everything narrower wraps naturally. */ .hero-br { display: none; } @media screen and (min-width: 1280px) { .hero-br { display: inline; } } /* Hero availability note — right-aligned, just above the splash. */ .hero-meta { text-align: right; margin: 4.5em 0 0.5em 0; } .hero-meta p { margin: 0; line-height: 1.45; font-size: 18px; } .hero-meta-lead { color: #fff; } .hero-meta-sub { color: rgba(255, 255, 255, 0.5); } /* Desktop: pull the splash up closer to the availability note. */ @media screen and (min-width: 737px) { .image.main { margin-top: 1.25em; } } @media screen and (max-width: 736px) { .hero-meta { text-align: left; margin: 1.5em 0 1.5em 0; } .hero-meta p { font-size: 16px; } } /* Supporting body copy sits at 80% opacity for a softer hierarchy. */ section.tiles-clear article p, section.half-split article p, .section-topper p, p.tiles-background-blurb, #contact .color-background-inner > p { opacity: 0.7; } /* "Fit for your needs" descriptions a touch larger. */ section.half-split article p { font-size: 22px; } section.half-split article h3 { font-size: 1.75em; } /* Section-topper headings larger. */ .section-topper h2 { font-size: 3em; } .grad-accent { color: inherit; } /* Splash — simple rounded corners, no border or glow. */ .image.main { position: relative; border-radius: 16px; overflow: visible; } .image.main img { border-radius: 16px; display: block; } /* ----------------------------------------------------------------- Nav button — subtle gradient lift on hover ----------------------------------------------------------------- */ nav button { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } nav button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); } /* ----------------------------------------------------------------- Card lift — gentle response on the service + testimonial tiles ----------------------------------------------------------------- */ section.tiles-background > article { transition: transform 0.5s var(--reveal-ease), box-shadow 0.5s var(--reveal-ease); } section.tiles-background > article:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8); } /* Final CTA panel — a normal full-width footer band in the page flow. */ .color-background { position: static; width: 100%; margin: 0; border-radius: 0; overflow: hidden; padding: 90px 0; background-color: #0E0E15; } /* Black breathing room under the last section before the footer. */ #main { padding-bottom: 8em; } #wrapper { overflow-x: clip; } /* Inner content stays in a readable centered column. */ .color-background-inner { max-width: 760px; margin: 0 auto; padding: 0 1.25em; } /* Footer details row — matches the main page column exactly (same max-width + side padding as #wrapper > * > .inner). */ .color-background .cta-footer-details { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; width: 100%; max-width: 78em; margin: 80px auto 0; padding: 26px 1.25em 0; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55); } /* font-size lives on the items, NOT the