/* ============================================================ Denary Research & Consulting — design system Palette derived from the client's existing logo (navy + gold). Display + UI: Poppins · Body: Rubik ============================================================ */ /* Fonts are linked from on each page (not @import) so the browser fetches fonts and this stylesheet in parallel rather than in sequence. See the tag near the top of every page's . */ :root { --ink: #1B2A47; --ink-deep: #101828; --ink-soft: #3E4A61; --gold: #FED000; --gold-soft: #DDBD84; --gold-deep: #93720A; /* darkened gold — used for gold TEXT on light backgrounds so it stays readable; raw --gold is reserved for fills/accents/dark backgrounds */ --paper: #fbfbfb; --paper-alt: #f5f5f5; --slate: #667085; --line: #858080; --line-dark: #4A5772; --white: #ffffff; --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif; --font-body: 'Rubik', 'Segoe UI', Arial, sans-serif; --max: 1120px; --gap-section: 7rem; --radius: 4px; --ease: cubic-bezier(.22,1,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0 0 0.5em; font-weight:600; line-height:1.14; letter-spacing:-0.02em; } h1{ font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:600; } h2{ font-size:clamp(1.8rem,3vw,2.5rem); } h3{ font-size:1.3rem; font-weight:600; } p{ margin:0 0 1em; color:var(--ink-soft); } a{ color:var(--ink); } img{ max-width:100%; display:block; } .eyebrow{ font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; display:inline-block; margin-bottom:1.1rem; } /* Eyebrow uses a deepened gold (not the raw --gold yellow) so it holds contrast on the light paper background; .on-dark sections override back to the brighter gold below, where it already reads clearly. */ .on-dark .eyebrow{ color:var(--gold); } .mono{ font-family:var(--font-body); letter-spacing:0.04em; } .container{ max-width:var(--max); margin:0 auto; padding:0 1.75rem; } .section{ padding:var(--gap-section) 0; border-top:1px solid var(--line); } .section:first-of-type{ border-top:none; } .section.on-dark{ background:var(--ink-deep); color:var(--white); border-top:none; } .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--white); } .on-dark p{ color:#C7CCD9; } .section.tight{ padding:4rem 0; background: var(--paper); color: #000;} /* ============================================================ DENARY NAVIGATION Inspired by the reference navbar structure ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251,251,251,0.97); border-bottom: 1px solid var(--line); } /* ---------- NAV CONTAINER ---------- */ .nav { width: 100%; max-width: 1400px; margin: 0 auto; min-height: 78px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* ---------- LOGO ---------- */ .nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nav-logo img { width: auto; height: 70px; display: block; } /* ---------- NAV LINKS ---------- */ .nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; } /* ---------- LINK ---------- */ .nav-links a { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 0; color: #000; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s ease, opacity .2s ease; } /* ---------- HOVER ---------- */ .nav-links a:hover { color: var(--ink); } /* ---------- ACTIVE ---------- */ .nav-links a[aria-current="page"] { color: var(--ink); } /* gold underline */ .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.4rem; height: 2px; background: var(--gold); } /* ============================================================ ABOUT US DROPDOWN ============================================================ */ .nav-dropdown { position: relative; } /* dropdown arrow */ .nav-dropdown > a::after { content: "▾"; margin-left: .4rem; font-size: .7rem; } /* dropdown */ .dropdown-menu { position: absolute; top: calc(100% + 1.5rem); left: 0; min-width: 210px; margin-top: 5px; padding: .5rem 0; list-style: none; background:var(--paper-alt); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 12px 30px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease; } /* dropdown links */ .dropdown-menu a { display: block; padding: .75rem 1rem; font-size: .78rem; } /* show dropdown */ .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* remove underline positioning from dropdown */ .dropdown-menu a[aria-current="page"]::after { display: none; } /* ============================================================ CONTACT BUTTON ============================================================ */ .nav-links .nav-cta { padding: .7rem 1.2rem; background: var(--ink); color: #ffffff; border: none; } .nav-links .nav-cta:hover { background: var(--gold); color: var(--ink-deep); } /* aria-current is still meaningful for assistive tech here, but the CTA button must keep its white text regardless - it has its own dark navy background, unlike a plain nav link. */ .nav-links .nav-cta[aria-current="page"]{ color: #ffffff; } .nav-links .nav-cta[aria-current="page"]:hover{ color: var(--ink-deep); } /* ============================================================ MOBILE TOGGLE ============================================================ */ .nav-toggle { display: none; background: transparent; border: 1px solid rgba(27,42,71,.3); color: var(--ink); padding: .5rem .7rem; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .nav-toggle:hover{ background: var(--ink); color: #fff; } /* ============================================================ RESPONSIVE NAVIGATION The desktop nav (8 links + dropdown + CTA) needs real room; it collapses to the toggle well before a typical tablet width. ============================================================ */ @media (max-width: 1080px) { .nav-toggle{ display: flex; align-items: center; justify-content: center; } .nav-links{ position: fixed; top: 92px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-top: 1px solid var(--line); padding: .5rem 1.5rem 2rem; overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .28s ease, visibility .28s ease; } .nav-links.open{ transform: translateX(0); visibility: visible; } .nav-links li{ width: 100%; } .nav-links a{ padding: 1.05rem 0; width: 100%; font-size: .95rem; border-bottom: 1px solid var(--line); } .nav-links a[aria-current="page"]::after{ display:none; } .nav-dropdown .dropdown-menu{ position: static; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; background: var(--paper-alt); border: none; box-shadow: none; padding: 0; margin: 0; transition: max-height .25s ease; } .nav-dropdown.open .dropdown-menu{ max-height: 220px; padding: .25rem 0 .5rem; } .nav-dropdown > a::after{ float: right; transition: transform .2s ease; } .nav-dropdown.open > a::after{ transform: rotate(180deg); } .dropdown-menu a{ padding: .8rem 0 .8rem 1rem; border-bottom: none; } .nav-links .nav-cta{ margin-top: 1rem; justify-content: center; text-align: center; } } @media (max-width: 480px){ .nav{ min-height: 76px; padding: 0 1.25rem; } .nav-logo img{ height: 36px; } .nav-links{ top: 76px; } } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-body); font-size:0.95rem; font-weight:500; text-decoration:none; padding:0.85rem 1.5rem; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:opacity .15s ease, background .15s ease; } .btn-primary{ background:var(--gold); color:var(--ink-deep); } .btn-primary:hover{ opacity:0.88; } .btn-ghost{ border-color:var(--ink); color:var(--ink); background:transparent; } .btn-ghost:hover{ background:var(--ink); color:var(--white); } .on-dark .btn-ghost{ border-color:var(--gold-soft); color:var(--gold-soft); } .on-dark .btn-ghost:hover{ background:var(--gold-soft); color:var(--ink-deep); } .text-link{ color:var(--ink-deep); font-weight:800; text-decoration:none; padding-bottom:10px; border-bottom:1px solid var(--gold-deep); transition:color .2s ease, border-color .2s ease; padding: 5px; } .text-link:hover{ color: var(--gold); } /* ========================================================= HERO — textured navy field, framed photograph, staged entrance animation. Reveal is gated behind html.js so the hero is fully visible-by-default with no JS (progressive enhancement, same principle as .reveal elsewhere). ========================================================= */ .hero-research { position: relative; min-height: auto; padding: 7.5rem 0 6.5rem; overflow: hidden; background: radial-gradient(1100px 620px at 90% -8%, rgba(254,208,0,.17), transparent 60%), radial-gradient(800px 460px at -8% 108%, rgba(254,208,0,.09), transparent 55%), linear-gradient(160deg, var(--ink-deep) 0%, var(--ink) 60%, #16294e 100%); } /* fine dot-grid texture, fading out toward the bottom of the section */ .hero-research::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 25px 25px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.1) 78%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.1) 78%); } .hero-research .container { position: relative; z-index: 2; } .hero-research .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; min-height: 560px; } /* --------------------------------------------------------- LEFT — COPY --------------------------------------------------------- */ .hero-copy { max-width: 620px; } .hero-copy .eyebrow { color: var(--gold); margin-bottom: 1.5rem; } .hero-copy h1 { margin: 0 0 1.5rem; max-width: 700px; color: #ffffff; font-family: var(--font-display); font-size: clamp(2.7rem, 4.1vw, 4.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; } /* each headline line sits in an overflow-hidden mask so it can slide up into place on load; JS adds .hero-ready to trigger it */ .hero-copy h1 .line-mask { display: block; overflow: hidden; padding-bottom: .08em; } .hero-copy h1 .line-text { display: block; } .js .hero-copy h1 .line-text { transform: translateY(112%); transition: transform .95s var(--ease); } .js .hero-ready .hero-copy h1 .line-text { transform: translateY(0); } .hero-copy h1 .line-mask:nth-child(1) .line-text { transition-delay: .05s; } .hero-copy h1 .line-mask:nth-child(2) .line-text { transition-delay: .15s; } .hero-copy h1 .line-mask:nth-child(3) .line-text { transition-delay: .25s; } .hero-copy .hero-lede { max-width: 600px; margin: 0; color: #C6CDDC; font-family: var(--font-body); font-size: 1.13rem; line-height: 1.65; } /* generic staged fade-up, reused on the eyebrow / lede / ctas / visual */ .js .hero-fade { opacity: 0; transform: translateY(18px); transition: opacity .85s var(--ease), transform .85s var(--ease); } .js .hero-ready .hero-fade { opacity: 1; transform: translateY(0); } .hero-fade[data-delay="1"] { transition-delay: .32s; } .hero-fade[data-delay="2"] { transition-delay: .42s; } .hero-fade[data-delay="3"] { transition-delay: .52s; } @media (prefers-reduced-motion: reduce) { .js .hero-copy h1 .line-text, .js .hero-fade { transition: none !important; transform: none !important; opacity: 1 !important; } } /* --------------------------------------------------------- BUTTON --------------------------------------------------------- */ .hero-research .hero-ctas { display: flex; gap: 1rem; margin-top: 2.2rem; } .hero-research .btn-primary { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.7rem; background: var(--gold); color: var(--ink-deep); border: none; border-radius: var(--radius); font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 16px 34px -12px rgba(254,208,0,.55); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease; } .hero-research .btn-primary span { font-size: 1.25rem; line-height: 1; transition: transform .25s var(--ease); } .hero-research .btn-primary:hover { background: #ffffff; color: var(--ink-deep); transform: translateY(-3px); box-shadow: 0 20px 42px -10px rgba(254,208,0,.65); } .hero-research .btn-primary:hover span { transform: translateX(4px); } /* --------------------------------------------------------- RIGHT — FRAMED VISUAL --------------------------------------------------------- */ .hero-visual { position: relative; min-height: 500px; } /* --------------------------------------------------------- RIGHT — IMAGE SLIDER Only the photography changes; the hero composition stays fixed. --------------------------------------------------------- */ .hero-visual { position: relative; min-height: 500px; } .hero-image-wrap { position: absolute; left: 0; top: 65px; width: 84%; height: 460px; overflow: hidden; border-radius: 22px; background: var(--ink); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(4,9,20,.65); } .hero-image-slider { position: relative; width: 100%; height: 100%; isolation: isolate; } /* Each image occupies exactly the same visual space. */ .hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity 1.15s var(--ease), visibility 1.15s var(--ease), transform 6s ease; } .hero-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); } .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* Subtle image treatment — much lighter than the original. The photographs should feel editorial, not filtered. */ .hero-image-slider::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, rgba(16,24,40,.04) 0%, rgba(16,24,40,.10) 45%, rgba(16,24,40,.34) 100% ); } /* --------------------------------------------------------- IMAGE SLIDER — subtle progress indicator --------------------------------------------------------- */ .hero-image-slider::before { content: ""; position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 18px; height: 2px; background: rgba(255,255,255,.26); box-shadow: 0 0 0 1px rgba(16,24,40,.06); } /* --------------------------------------------------------- IMAGE SLIDER — responsive --------------------------------------------------------- */ @media (max-width: 1000px) { .hero-visual { min-height: 600px; } .hero-image-wrap { width: 100%; } } @media (max-width: 600px) { .hero-visual { min-height: 470px; } .hero-image-wrap { top: 80px; width: 92%; height: 380px; } .hero-image { object-position: center center; } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none !important; transform: none !important; } } /* navy + gold wash so any photograph reads as part of the same palette, regardless of its native colours */ .hero-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(16,24,40,.05) 15%, rgba(11,17,32,.62) 100%), linear-gradient(0deg, rgba(254,208,0,.14), transparent 42%); pointer-events: none; } /* --------------------------------------------------------- GOLD QUOTE CARD --------------------------------------------------------- */ .hero-note { position: absolute; z-index: 5; top: -64px; right: 0; width: 380px; min-height: 156px; padding: 2.75rem 2.3rem; background: var(--gold); border-radius: 22px; color: var(--ink-deep); box-shadow: 0 24px 48px -14px rgba(4,9,20,.45); } .hero-note::after { content: ""; position: absolute; left: 45px; bottom: -34px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 36px solid var(--gold); } .hero-note p { margin: 0; color: var(--ink-deep); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; } /* --------------------------------------------------------- BADGE ICON — gold seal, guaranteed legible over any photo --------------------------------------------------------- */ .hero-icon { position: absolute; z-index: 6; left: -28px; bottom: 28px; width: 96px; height: 96px; border-radius: 50%; background: var(--ink-deep); border: 1px solid rgba(254,208,0,.5); box-shadow: 0 16px 32px -10px rgba(4,9,20,.6); display: flex; align-items: center; justify-content: center; } .hero-icon svg { width: 52%; height: 52%; fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1000px) { .hero-research { padding: 6rem 0 5rem; } .hero-research .hero-grid { grid-template-columns: 1fr; gap: 4rem; } .hero-copy { max-width: 750px; } .hero-visual { min-height: 600px; max-width: 800px; width: 100%; margin: 0 auto; } } @media (max-width: 600px) { .hero-research { min-height: auto; padding: 5.5rem 0 4rem; } .hero-research .container { padding: 0 1.25rem; } .hero-copy h1 { font-size: 2.5rem; } .hero-copy .hero-lede { font-size: 1rem; } .hero-visual { min-height: 470px; } .hero-image-wrap { top: 80px; width: 92%; height: 380px; } .hero-note { width: 78%; min-height: auto; padding: 1.5rem; border-radius: 18px; } .hero-note p { font-size: 1rem; } .hero-icon { width: 74px; height: 74px; left: -10px; bottom: -10px; } } /* ========================================================= MARQUEE — a continuous strip of positioning statements, directly under the hero. Duplicated content + CSS-driven scroll for a seamless loop; pauses on hover and for anyone who asked for reduced motion. ========================================================= */ .marquee-band { background: var(--ink-deep); border-bottom: 1px solid var(--line-dark); overflow: hidden; padding: 1.1rem 0; } .marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee-scroll 32s linear infinite; } .marquee-band:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 3rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #AEB9D4; white-space: nowrap; } .marquee-item strong { color: var(--gold); font-weight: 600; } .marquee-item .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-soft); display: inline-block; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* how we work / methodology section */ .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .offer-card{ border:1px solid var(--line); background:var(--white); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:0.9rem; } /* ============================================================ THREE WAYS WE WORK WITH YOU ============================================================ */ .ways-section { overflow:hidden; } /* ---------- section heading ---------- */ .ways-header { max-width:650px; margin-bottom:3.5rem; } .ways-header h2 { margin-bottom:1rem; } .ways-header p { max-width:560px; } /* ---------- cards layout ---------- */ .ways-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; } /* ---------- individual card ---------- */ .way-card { position:relative; min-height:360px; padding:2.5rem 2rem 2rem; background:#fff; /* base dashed border */ border:2px dashed #171717; /* slightly rounded corners */ border-radius:26px; margin-right:-2px; opacity: 0; transform: translateY(24px); transition: border-color .25s ease, transform .8s ease, box-shadow .25s ease, opacity .8s ease, background .25s ease; transition-delay: var(--delay, 0ms); } /* Yellow corner treatment */ .way-card:nth-child(odd)::before, .way-card:nth-child(even)::before { content:""; position:absolute; pointer-events:none; border-radius:26px; } /* Cards 01 and 03: yellow on TOP + BOTTOM */ .way-card:nth-child(odd)::before { inset:-2px; border-top:5px solid #fed000; border-bottom:5px solid #fed000; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:26px; transition:border-color .25s ease; } /* Cards 02: yellow on LEFT + RIGHT */ .way-card:nth-child(even)::before { inset:-2px; border-left:5px solid #fed000; border-right:5px solid #fed000; border-top:5px solid transparent; border-bottom:5px solid transparent; border-radius:26px; transition:border-color .25s ease; } /* Keep content above pseudo border */ .way-card-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; } /* ---------- number + heading ---------- */ .way-top { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:1rem; margin-bottom:1.4rem; } .way-number { font-family:var(--font-body); font-size:2.8rem; line-height:1; color:#111; letter-spacing:-0.05em; } .way-card h3 { margin:0; font-family:var(--font-body); font-size:1.25rem; line-height:1.15; font-weight:500; color:#111; } .way-card h3 span { display:block; color:#4f4519; } /* why denary */ /* ========================================================= WHY DENARY — IMAGE CARD REDESIGN ========================================================= */ .why-section { position: relative; overflow: hidden; padding: 7rem 0; background: radial-gradient(circle at 15% 20%, rgba(20, 78, 120, 0.22), transparent 32%), radial-gradient(circle at 85% 80%, rgba(240, 165, 0, 0.08), transparent 28%), #081a2e; } /* --------------------------------------------------------- SECTION HEADER --------------------------------------------------------- */ .why-head { max-width: 850px; margin-bottom: 3.5rem; } .why-head .eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--gold); } .why-head h2 { max-width: 850px; margin: 0; } .why-lede { max-width: 720px; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .why-card--image { position: relative; overflow: hidden; min-height: 470px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: #10263d; isolation: isolate; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease; } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ .why-card-image { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .why-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(5, 16, 29, 0.04) 5%, rgba(5, 16, 29, 0.18) 32%, rgba(5, 16, 29, 0.82) 74%, rgba(5, 16, 29, 0.96) 100% ); transition: background 0.45s ease; } .why-card-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); filter: saturate(0.9); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; } /* --------------------------------------------------------- CONTENT --------------------------------------------------------- */ .why-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 470px; padding: 2rem; } /* --------------------------------------------------------- NUMBER --------------------------------------------------------- */ .why-card--image .why-num { display: inline-flex; align-items: center; width: fit-content; margin-bottom: auto; padding: 0.45rem 0.7rem; border: 1px solid rgba(255, 196, 0, 0.35); border-radius: 999px; color: var(--gold); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; } /* --------------------------------------------------------- GOLD ACCENT --------------------------------------------------------- */ .why-card-content::before { content: ""; width: 42px; height: 3px; margin-bottom: 1rem; background: var(--gold); transform-origin: left; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* --------------------------------------------------------- HEADING --------------------------------------------------------- */ .why-card--image h3 { margin: 0; color: #fff; font-size: clamp(1.55rem, 2vw, 2rem); line-height: 1.15; } /* --------------------------------------------------------- DESCRIPTION --------------------------------------------------------- */ .why-card--image p { max-width: 500px; margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.76); line-height: 1.7; } /* --------------------------------------------------------- ARROW --------------------------------------------------------- */ .why-card-arrow { position: absolute; right: 2rem; bottom: 2rem; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: #fff; font-size: 1.2rem; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .why-card--image:hover { transform: translateY(-8px); border-color: rgba(255, 196, 0, 0.4); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); } .why-card--image:hover .why-card-image img { transform: scale(1.06); filter: saturate(1.05); } .why-card--image:hover .why-card-image::after { background: linear-gradient( to bottom, rgba(5, 16, 29, 0.08) 5%, rgba(5, 16, 29, 0.22) 30%, rgba(5, 16, 29, 0.9) 72%, rgba(5, 16, 29, 0.98) 100% ); } .why-card--image:hover .why-card-content::before { width: 72px; } .why-card--image:hover .why-card-arrow { opacity: 1; transform: translateY(0); background: var(--gold); border-color: var(--gold); color: #081a2e; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 900px) { .why-section { padding: 5.5rem 0; } .why-grid { gap: 1rem; } .why-card--image, .why-card-content { min-height: 430px; } .why-card-content { padding: 1.5rem; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 680px) { .why-grid { grid-template-columns: 1fr; } .why-card--image, .why-card-content { min-height: 420px; } .why-card-content { padding: 1.5rem; } .why-card-arrow { right: 1.5rem; bottom: 1.5rem; } } /* --------------------------------------------------------- ACCESSIBILITY --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .why-card--image, .why-card-image img, .why-card-image::after, .why-card-content::before, .why-card-arrow { transition: none; } .why-card--image:hover { transform: none; } .why-card--image:hover .why-card-image img { transform: none; } } /* ---------- sub-item list (What We Do cards) ---------- */ .way-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.65rem; } .way-list li{ font-size:.88rem; line-height:1.5; color:#555; max-width:290px; } .way-card:hover .way-list li{ color:#3a3210; } .way-list li strong{ color:#111; font-weight:600; } .way-card:hover .way-list li strong{ color:#111; } /* ---------- description ---------- */ .way-card p { margin:0; max-width:280px; font-size:.88rem; line-height:1.5; color:#555; } /* ---------- icon ---------- */ .way-icon { margin-top:auto; width:55px; height:55px; display:flex; align-items:center; justify-content:center; color:#111; font-size:2.5rem; line-height:1; } /* ---------- HOVER ---------- */ /* On hover: - dashed black border becomes yellow - yellow treatment becomes stronger - card moves slightly upward */ .way-card:hover { border-color:#fed000; cursor: pointer; transform:translateY(-5px); background: #FED000; color: #111; box-shadow:0 12px 30px rgba(0,0,0,.08); } /* Make the decorative border fully yellow */ .way-card:hover::before { border-color:#fed000; } /* ---------- responsive ---------- */ @media (max-width:900px) { .ways-grid { grid-template-columns:1fr; gap:1.5rem; } .way-card { min-height:330px; margin-right:0; } .way-card::before { display:none; } } @media (max-width:600px) { .ways-header { margin-bottom:2.5rem; } .way-card { min-height:300px; padding:2rem 1.5rem; } .way-number { font-size:2.3rem; } } /* ---------- service / offering cards ---------- */ .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .offer-card{ border:1px solid var(--line); background:var(--white); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:0.9rem; } .offer-card .num{ font-family:var(--font-body); color:var(--gold); font-size:0.85rem; } .offer-card h3{ margin:0; } .offer-card p{ font-size:0.93rem; flex-grow:1; } @media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } } /* ---------- pillars ---------- */ .pillars-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; } .pillar .num{ font-family:var(--font-body); color:var(--gold); font-size:0.85rem; display:block; margin-bottom:0.6rem; } @media (max-width:900px){ .pillars-why{ grid-template-columns:1fr; gap:2rem; } } /* ---------- methodology rail (signature element) ---------- */ .process-rail{ position:relative; margin-top:3rem; } .process-rail::before{ content:""; position:absolute; left:2.1rem; top:0.5rem; bottom:0.5rem; width:1px; background:var(--line-dark); } .on-dark .process-rail::before{ background:var(--line-dark); } .process-step{ position:relative; display:grid; grid-template-columns:4.2rem 1fr; gap:2rem; padding:2.2rem 0; } .process-step + .process-step{ border-top:1px solid var(--line-dark); } .process-num{ font-family:var(--font-body); font-size:1.1rem; color:var(--ink-deep); background:var(--gold); width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; } .process-step h3{ margin-bottom:0.4rem; } .process-step .step-desc{ max-width:40rem; } .process-condensed{ display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--line); } .process-condensed a{ text-decoration:none; } .process-condensed .pc-item{ flex:1 1 150px; padding:1.25rem 1.1rem; border-right:1px solid var(--line); transition:background .15s ease; } .process-condensed .pc-item:last-child{ border-right:none; } .process-condensed .pc-item:hover{ background:var(--paper-alt); } .process-condensed .num{ font-family:var(--font-body); color:var(--gold); font-size:0.85rem; } .process-condensed h4{ font-family:var(--font-display); font-size:1.02rem; margin:0.35rem 0 0; } /* ---------- panels / empty states ---------- */ .panel{ border:1px solid #4f4519; background:var(--paper-alt); padding:2.5rem; } .panel .eyebrow{ margin-bottom:0.75rem; width: 100%; } .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; width: 100%; } @media (max-width:820px){ .two-col{ grid-template-columns:1fr; } } .about-mark{ margin-top: 1.75rem; padding: 1.75rem 1.5rem 1.25rem; /* background: var(--paper-alt); border: 1px solid var(--line); */ border-radius: 14px; max-width: 22rem; } .about-mark svg{ width:100%; height:auto; display:block; } .three-col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:3rem; } @media (max-width:900px){ .three-col{ grid-template-columns:1fr; } } /* ---------- tags ---------- */ .tag{ display:inline-block; font-family:var(--font-body); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--line); padding:0.3rem 0.6rem; color:var(--slate); margin:0 0.4rem 0.4rem 0; } /* ========================= WHY DENARY ========================= */ .why-section { position: relative; overflow: hidden; background: #0b1220; color: #ffffff; } .why-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 18, 32, 0.15), rgba(11, 18, 32, 0.85)), radial-gradient(circle at top right, rgba(255, 196, 0, 0.14), transparent 34%), radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.06), transparent 30%); pointer-events: none; background: linear-gradient(180deg, rgba(8, 16, 32, 0.25), rgba(11, 18, 32, 0.9)), /* url("https://media.istockphoto.com/id/1273843154/photo/magnifying-glass-and-documents-with-analytics-data-lying-on-table-and-digital-virtual-reality.jpg?s=612x612&w=0&k=20&c=C1LY8A0_SG6Jy8qI6SJpeUN_tU4SqIm9guIriPuWSz4=") center/cover no-repeat; */ } .why-section .container { position: relative; z-index: 1; } .why-head { max-width: 64rem; margin-bottom: 2.75rem; } .why-head .eyebrow { color: #ffc800; letter-spacing: 0.22em; } .two-col .eyebrow { color: #ffffff; letter-spacing: 0.22em; font-size: 22px; margin-left: 100px; } .two-col h2{ color: #ffffff; font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.03em; font-family: var(--font-display); font-weight: 500; margin-left: 20px; } .two-col p{ color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.8; } .two-col .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .why-head h2 { margin-top: 0.65rem; margin-bottom: 1rem; color: #ffffff; font-size: clamp(2.2rem, 4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.03em; font-family: var(--font-display); font-weight: 500; } .why-lede { max-width: 44rem; margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 1.05rem; line-height: 1.8; } .why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .why-card { position: relative; min-height: 220px; padding: 1.7rem 1.65rem 1.55rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 18px; backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); cursor: pointer; opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; transition-delay: var(--delay, 0ms); } .why-card::before { content: ""; position: absolute; left: 1.65rem; top: 1.35rem; width: 3rem; height: 2px; background: #ffc800; opacity: 0.95; } .why-card:hover { transform: translateY(-8px); border-color: rgba(255, 200, 0, 0.42); background: rgba(255, 255, 255, 0.06); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28); } .why-num { display: inline-block; margin-bottom: 1.35rem; color: #ffc800; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.22em; } .why-card h3 { margin: 0 0 0.85rem; color: #ffffff; font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; font-weight: 500; } .why-card p { margin: 0; color: rgba(255, 255, 255, 0.76); line-height: 1.75; font-size: 0.98rem; } .reveal-item.in-view { opacity: 1; transform: translateY(0); } @media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .why-head { margin-bottom: 2rem; } .why-grid { grid-template-columns: 1fr; } .why-card { min-height: auto; } } /* ============================================================ DENARY SERVICES — REFERENCE ORBIT DESIGN ============================================================ */ .services-section { position: relative; overflow: hidden; padding: 6rem 0 7rem; background: #ffffff; } /* ============================================================ SECTION INTRO ============================================================ */ .services-header { max-width: 900px; margin: 0 auto 2.5rem; text-align: center; } .services-header h2 { margin: 0 0 1rem; font-family: var(--font-body); font-size: clamp(2.3rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.045em; color: #101828; } .services-header p { max-width: 620px; margin: 0 auto; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: #667085; } /* ============================================================ MAIN ORBIT AREA ============================================================ */ .services-visual { position: relative; width: 100%; max-width: 1120px; height: 620px; margin: 0 auto; isolation: isolate; } /* ============================================================ ORBITS ============================================================ */ .services-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; } /* OUTER ORBIT */ .services-orbit--outer { width: 430px; height: 430px; border: 1px solid var(--ink); } /* INNER SOFT CIRCLE */ .services-orbit--inner { width: 282px; height: 282px; border: none; background: var(--gold-soft); } /* ============================================================ CENTER CIRCLE ============================================================ */ .services-core { position: absolute; left: 50%; top: 50%; width: 138px; height: 138px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%; background: var(--gold); color: #000; z-index: 5; box-shadow: none; animation: none; } .services-core-label { margin-bottom: 0.15rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; opacity: 1; } .services-core strong { font-family: var(--font-body); font-size: 1.2rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; } .services-core-plus { display: none; } /* ============================================================ ORBIT DOTS ============================================================ */ .services-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); z-index: 6; box-shadow: none; } /* TOP LEFT */ .services-dot--top { left: calc(53% - 160px); top: calc(48% - 175px); } /* RIGHT */ .services-dot--right { left: calc(50% + 206px); top: calc(50% + -34px); } /* BOTTOM LEFT */ .services-dot--bottom { left: calc(50% - 92px); top: calc(54% + 163px); } /* ============================================================ SERVICE CLUSTERS ============================================================ */ .service-cluster { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 1.4rem; color: #101828; } /* ============================================================ SERVICE HEADINGS ============================================================ */ .service-cluster-title { flex: 0 0 auto; } .service-cluster h3 { margin: 0; font-family: var(--font-body); font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; color: #101010; } /* ============================================================ SERVICE LIST ============================================================ */ .service-cluster ul { list-style: none; margin: 0; padding: 0; } .service-cluster li { margin: 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.65; color: #202020; white-space: nowrap; } .service-cluster li + li { margin-top: 0.05rem; } .service-cluster li span { color: #667085; } /* ============================================================ QUALITATIVE — TOP LEFT ============================================================ */ .service-cluster--qualitative { left: 25px; top: 80px; text-align: right; } /* ============================================================ QUANTITATIVE — RIGHT ============================================================ */ .service-cluster--quantitative { right: -15px; top: 210px; text-align: left; } /* ============================================================ DESK — BOTTOM ============================================================ */ .service-cluster--desk { left: 50%; bottom: 4px; transform: translateX(-50%); text-align: left; } /* ============================================================ SUBTLE HOVER ============================================================ */ .service-cluster { transition: transform .25s ease; } .service-cluster--qualitative:hover { transform: translateX(-4px); } .service-cluster--quantitative:hover { transform: translateX(4px); } .service-cluster--desk:hover { transform: translateX(-50%) translateY(-4px); } .service-cluster li { transition: color .2s ease; } .service-cluster li:hover { color: #2868c8; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1000px) { .services-section { padding: 5rem 0 6rem; } .services-visual { height: 590px; } .services-orbit--outer { width: 390px; height: 390px; } .services-orbit--inner { width: 260px; height: 260px; } .services-core { width: 128px; height: 128px; } .service-cluster { gap: 1rem; } .service-cluster h3 { font-size: 1.4rem; } .service-cluster li { font-size: 0.85rem; } .service-cluster--qualitative { left: 0; top: 75px; } .service-cluster--quantitative { right: 0; top: 205px; } .service-cluster--desk { bottom: 30px; } .services-dot--top { left: calc(50% - 200px); top: calc(50% - 200px); } .services-dot--right { left: calc(50% + 192px); } .services-dot--bottom { left: calc(50% - 204px); top: calc(50% + 132px); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 700px) { .services-section { padding: 4rem 0 5rem; } .services-header { text-align: left; margin-bottom: 3rem; margin-left: 20px; } .services-header h2 { font-size: 2.2rem; } .services-header p { margin-left: 0; font-size: 1rem; } /* Turn orbit into vertical system */ .services-visual { height: auto; display: flex; flex-direction: column; gap: 2.5rem; } .services-orbit, .services-dot { display: none; } .services-core { position: relative; left: auto; top: auto; transform: none; width: 125px; height: 125px; margin: 0 auto; flex-shrink: 0; } .services-core strong { font-size: 1.1rem; } .service-cluster, .service-cluster--qualitative, .service-cluster--quantitative, .service-cluster--desk { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin:0 auto; transform: none; display: block; text-align: left; } .service-cluster--qualitative:hover, .service-cluster--quantitative:hover, .service-cluster--desk:hover { transform: translateY(-3px); } .service-cluster-title { margin-bottom: 0.8rem; } .service-cluster h3 { font-size: 1.6rem; } .service-cluster li { white-space: normal; font-size: 0.95rem; line-height: 1.55; } } /*Industry section*/ .industries-section { position: relative; overflow: hidden; background: radial-gradient(circle at top left, rgba(255, 196, 0, 0.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .industries-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; } .industries-copy h2 { margin: 0.5rem 0 1rem; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1.06; color: #1f3358; letter-spacing: -0.03em; } .industries-lede { max-width: 42rem; margin: 0 0 1.75rem; font-size: 1.06rem; line-height: 1.8; color: #3f577e; } .industries-metrics { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .metric-card { min-width: 150px; padding: 1rem 1.1rem; border: 1px solid rgba(31, 51, 88, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 12px 30px rgba(31, 51, 88, 0.06); backdrop-filter: blur(10px); } .metric-number { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: #1f3358; margin-bottom: 0.35rem; } .metric-label { display: block; font-size: 0.92rem; color: #5c7092; } .industries-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; max-width: 38rem; } .industry-chip { display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid rgba(31, 51, 88, 0.14); background: rgba(255, 255, 255, 0.9); color: #1f3358; font-weight: 600; box-shadow: 0 10px 25px rgba(31, 51, 88, 0.05); transform: translateY(18px); opacity: 0; transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .industry-chip:hover { transform: translateY(-4px); border-color: rgba(255, 196, 0, 0.45); box-shadow: 0 16px 34px rgba(31, 51, 88, 0.1); } .chip-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffc800; box-shadow: 0 0 0 6px rgba(255, 200, 0, 0.12); flex: 0 0 auto; } .industries-visual { position: relative; } .visual-frame { position: relative; min-height: 560px; border-radius: 28px; overflow: hidden; background: #dfe7f2; box-shadow: 0 24px 60px rgba(31, 51, 88, 0.14); transform: translateY(22px) scale(0.98); opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease; } .visual-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 24, 45, 0.08), rgba(13, 24, 45, 0.55)), radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 30%); z-index: 1; } .visual-image { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; transform: scale(1.03); } .floating-card { position: absolute; z-index: 2; min-width: 170px; padding: 0.95rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16); transform: translateY(18px); opacity: 0; transition: transform 0.75s ease, opacity 0.75s ease; } .floating-card span { display: block; font-size: 0.82rem; color: #6b7b96; margin-bottom: 0.2rem; } .floating-card strong { display: block; font-size: 0.98rem; color: #1f3358; } .floating-card--top { top: 1.2rem; left: 1.2rem; } .floating-card--bottom { right: 1.2rem; bottom: 1.2rem; } .reveal-item.in-view .industry-chip, .reveal-item.in-view .floating-card, .reveal-item.in-view .visual-frame { opacity: 1; transform: translateY(0) scale(1); } @media (max-width: 1100px) { .industries-layout { grid-template-columns: 1fr; } .visual-frame, .visual-image { min-height: 420px; } } @media (max-width: 700px) { .industries-chips { grid-template-columns: 1fr; } .industries-metrics { flex-direction: column; } .floating-card { min-width: 140px; } } /* ---------- CTA band ---------- */ .cta-band{ text-align:center; padding:5rem 0; } .cta-band h2{ max-width:32rem; margin:0 auto 1.5rem; } /* ---------- footer ---------- */ .site-footer{ background:var(--ink-deep); color:#AEB5C4; padding:4rem 0 2rem; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-dark); } .footer-grid h4{ color:var(--white); font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; margin-bottom:1.1rem; } .footer-grid ul{ list-style:none; margin:0; padding:0; } .footer-grid li{ margin-bottom:0.6rem; } .footer-grid a{ color:#AEB5C4; text-decoration:none; font-size:0.92rem; } .footer-grid a:hover{ color:var(--gold-soft); } .footer-bottom{ display:flex; justify-content:space-between; padding-top:1.5rem; font-size:0.8rem; color:#7C8496; flex-wrap:wrap; gap:0.75rem; } @media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } } /* ---------- forms ---------- */ .form-field{ margin-bottom:1.4rem; } .form-field label{ display:block; font-size:0.85rem; font-weight:500; margin-bottom:0.4rem; } .form-field input, .form-field textarea, .form-field select{ width:100%; border:1px solid var(--line); background:var(--white); padding:0.8rem 0.9rem; font-family:var(--font-body); font-size:0.95rem; border-radius:var(--radius); } .form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; } .form-status{ display:none; margin-top:1rem; padding:0.9rem 1.1rem; background:#FFF7E0; border:1px solid var(--gold); font-size:0.88rem; color:var(--ink); } .form-status.is-visible{ display:block; } /* ---------- focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } /* ---------- misc ---------- */ .center{ text-align:center; } .lede{ font-size:1.1rem; color:var(--ink-soft); max-width:42rem; } .small-note{ font-size:0.85rem; color:var(--slate); font-style:italic; } /* ============================================================ PAGE LOADER One clean brand moment on load, not a splash animation. Auto-hidden by main.js once the page is ready; also hides itself via a hard timeout so it can never get stuck on screen. ============================================================ */ .page-loader{ position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; background: var(--ink-deep); transition: opacity .5s ease, visibility .5s ease; /* pure-CSS safety net: force-hidden at 3.2s even with no JS at all */ animation: loader-autohide 0.01s linear 3.2s forwards; } @keyframes loader-autohide{ to{ opacity:0; visibility:hidden; pointer-events:none; } } /* bar-chart mark — echoes the ascending bars in the Denary logo */ .loader-mark{ display:flex; align-items:flex-end; gap:7px; height:44px; } .loader-bar{ width:9px; border-radius:2px 2px 0 0; background: linear-gradient(180deg, var(--gold) 0%, #C98F00 100%); height: var(--h); transform: scaleY(0); transform-origin: bottom; animation: loader-grow 1.3s var(--ease) infinite; } .loader-bar:nth-child(1){ animation-delay: 0s; } .loader-bar:nth-child(2){ animation-delay: .1s; } .loader-bar:nth-child(3){ animation-delay: .2s; } .loader-bar:nth-child(4){ animation-delay: .3s; } @keyframes loader-grow{ 0% { transform:scaleY(0); opacity:.45; } 55% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:1; } } .loader-word{ font-family: var(--font-display); font-weight:600; letter-spacing:.32em; font-size:.74rem; color:#9AA6C4; text-transform:uppercase; } .page-loader-bar{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgba(255,255,255,.08); overflow: hidden; } .page-loader-bar::after{ content:''; position:absolute; left:-40%; top:0; bottom:0; width:40%; background: var(--gold); animation: loader-sweep 900ms ease-in-out infinite; } @keyframes loader-sweep{ 0% { left:-40%; } 100% { left:100%; } } .page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .page-loader{ transition:none; } .loader-bar{ animation:none; transform:scaleY(1); opacity:1; } .page-loader-bar::after{ animation:none; left:0; width:100%; opacity:.4; } } /* ============================================================ SCROLL REVEAL (subtle, restrained — opacity + 12px rise) Gated behind html.js (set by a tiny inline script in ) so content is visible-by-default if JS never runs — reveal is a progressive enhancement, never a requirement to see content. ============================================================ */ .js .reveal{ opacity:0; transform:translateY(14px); transition: opacity .55s ease, transform .55s ease; } .js .reveal.is-visible{ opacity:1; transform:translateY(0); } @media (max-width:780px) { .js .reveal.is-visible{ margin-left: 20px; } } @media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } } /* ============================================================ CHIP GRID — Industries Served ============================================================ */ .chip-grid{ display:flex; flex-wrap:wrap; gap:0.85rem; } .chip{ display:inline-flex; align-items:center; gap:0.6rem; padding:0.85rem 1.3rem; border:1px solid var(--line); background:var(--white); font-family:var(--font-body); font-size:0.95rem; font-weight:500; color:var(--ink); transition: border-color .18s ease, background .18s ease, transform .18s ease; } .chip:hover{ border-color:var(--gold); background:var(--paper-alt); transform:translateY(-2px); } .chip-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; } /* ============================================================ COMING SOON / IN-PROGRESS STATE Used for Team and Case Studies until real content is provided — honest, on-brand, not an invented placeholder. ============================================================ */ .coming-soon{ border:1px solid var(--line); background:var(--paper-alt); padding:3.5rem 2.5rem; text-align:center; } .coming-soon h3{ margin-bottom:0.6rem; color:var(--ink); } .coming-soon p{ max-width:34rem; margin:0 auto; color:var(--ink-soft); } .coming-soon a.text-link{ color:var(--ink); } .coming-soon--left{ text-align:left; } .coming-soon--left p{ margin:0; max-width:38rem; } .two-col .text-link{ color: var(--gold-soft);} .text-link:hover{ color: var(--gold); text-decoration:underline; } /* ============================================================ BREADCRUMB (service detail pages) ============================================================ */ .breadcrumb{ font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.04em; color:var(--slate); margin-bottom:1.5rem; } .breadcrumb a{ color:var(--slate); text-decoration:none; border-bottom:1px solid var(--line); } .breadcrumb a:hover{ color:var(--ink); border-color:var(--ink); } /* ============================================================ SERVICE DETAIL LAYOUT ============================================================ */ .service-detail-header{ max-width:52rem; } .service-detail-header .btn{ margin-top:1rem; } .method-list{ display:grid; gap:1.25rem; margin-top:2.5rem; } .method-item{ display:grid; grid-template-columns:2.75rem 1fr; gap:1.25rem; padding:1.75rem 0; border-top:1px solid var(--line); } .method-item:last-child{ border-bottom:1px solid var(--line); } .method-item .dot{ width:2.75rem; height:2.75rem; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:0.85rem; color:var(--ink-deep); } .method-item h4{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 0.3em; } .method-item p{ margin:0; max-width:38rem; } /* ========================================================= TYPES OF STUDIES ========================================================= */ .study-types-section { max-width: 1320px; margin: 4.5rem auto 0; padding: 0 1.5rem; } /* ----------------------------------------- HEADER ----------------------------------------- */ .study-types-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(21, 33, 55, 0.18); } .study-types-header .eyebrow { margin: 0; color: var(--gold); font-family: inherit; } .study-types-header h3 { margin: 0; color: var(--ink); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -0.025em; } /* ----------------------------------------- GRID ----------------------------------------- */ .study-types-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #d7d9dd; border: 1px solid #d7d9dd; } /* ----------------------------------------- CARD ----------------------------------------- */ .study-card { position: relative; overflow: hidden; min-width: 0; background: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } /* ----------------------------------------- IMAGE ----------------------------------------- */ .study-card-image { position: relative; aspect-ratio: 1.15 / 1; overflow: hidden; background: #e7e9ec; } .study-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(9, 26, 48, 0) 45%, rgba(9, 26, 48, 0.28) 100% ); pointer-events: none; transition: background 0.4s ease; } .study-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease; } /* ----------------------------------------- CARD BODY ----------------------------------------- */ .study-card-body { position: relative; min-height: 125px; padding: 1.15rem 1.15rem 1.25rem; background: #fff; } /* ----------------------------------------- NUMBER ----------------------------------------- */ .study-card-number { display: block; margin-bottom: 0.55rem; color: #f18412; font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; } /* ----------------------------------------- TITLE ----------------------------------------- */ .study-card h4 { margin: 0; color: var(--ink); font-family: "IBM Plex Sans", sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; } /* ----------------------------------------- GOLD ACCENT ----------------------------------------- */ .study-card-line { display: block; width: 24px; height: 2px; margin-top: 0.85rem; background: var(--gold); transform-origin: left; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ----------------------------------------- HOVER ----------------------------------------- */ .study-card:hover { z-index: 2; transform: translateY(-6px); box-shadow: 0 16px 35px rgba(16, 24, 40, 0.12); } .study-card:hover .study-card-image img { transform: scale(1.055); filter: saturate(1.05); } .study-card:hover .study-card-image::after { background: linear-gradient( to bottom, rgba(9, 26, 48, 0.02) 35%, rgba(9, 26, 48, 0.42) 100% ); } .study-card:hover .study-card-line { width: 52px; } /* ----------------------------------------- TABLET ----------------------------------------- */ @media (max-width: 1100px) { .study-types-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ----------------------------------------- MOBILE ----------------------------------------- */ @media (max-width: 700px) { .study-types-section { margin-top: 3.5rem; padding: 0 1rem; } .study-types-header { display: block; } .study-types-header h3 { margin-top: 0.5rem; } .study-types-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .study-types-grid { grid-template-columns: 1fr; } .study-card-image { aspect-ratio: 1.65 / 1; } } /* ========================================================= WHY DENARY — FINAL COMPACT IMAGE CARD VERSION Add this at the VERY BOTTOM of styles.css ========================================================= */ .why-section { position: relative; overflow: hidden; /* Reduce the huge vertical space */ padding: 5rem 0 5.5rem; background: radial-gradient( circle at 88% 12%, rgba(254, 208, 0, 0.08), transparent 28% ), #0b1220; color: #fff; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ .why-head { max-width: 820px; margin-bottom: 2.5rem; } .why-head .eyebrow { margin-bottom: 0.7rem; color: var(--gold); } .why-head h2 { max-width: 800px; margin: 0 0 0.8rem; color: #fff; font-size: clamp(2.25rem, 4vw, 3.7rem); line-height: 1.06; letter-spacing: -0.03em; } .why-lede { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.65; } /* --------------------------------------------------------- GRID --------------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .why-card--image { position: relative; overflow: hidden; /* THIS is the major height reduction */ min-height: 335px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 14px; background: #13253b; isolation: isolate; cursor: pointer; transition: transform 0.4s var(--ease), border-color 0.3s ease, box-shadow 0.4s ease; } /* --------------------------------------------------------- IMAGE --------------------------------------------------------- */ .why-card-image { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .why-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.01); filter: saturate(0.82); transition: transform 0.65s var(--ease), filter 0.45s ease; } /* Image overlay */ .why-card-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(6, 17, 31, 0.05) 0%, rgba(6, 17, 31, 0.08) 35%, rgba(6, 17, 31, 0.72) 72%, rgba(6, 17, 31, 0.94) 100% ); pointer-events: none; transition: background 0.4s ease; } /* --------------------------------------------------------- CARD CONTENT --------------------------------------------------------- */ .why-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; /* IMPORTANT: remove 470px inner height */ min-height: 335px; height: 100%; padding: 1.55rem 1.6rem; } /* --------------------------------------------------------- NUMBER --------------------------------------------------------- */ .why-card--image .why-num { display: inline-block; width: fit-content; margin-bottom: auto; padding: 0; border: 0; color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; } /* --------------------------------------------------------- GOLD LINE --------------------------------------------------------- */ .why-card-content::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: 0.75rem; background: var(--gold); transform-origin: left; transition: width 0.4s var(--ease); } /* --------------------------------------------------------- TITLE --------------------------------------------------------- */ .why-card--image h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.18; letter-spacing: -0.02em; } /* --------------------------------------------------------- DESCRIPTION --------------------------------------------------------- */ .why-card--image p { max-width: 480px; margin: 0.6rem 0 0; color: rgba(255, 255, 255, 0.76); font-size: 0.93rem; line-height: 1.6; } /* --------------------------------------------------------- ARROW --------------------------------------------------------- */ .why-card-arrow { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: #fff; font-size: 1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* --------------------------------------------------------- HOVER — PROFESSIONAL / SUBTLE --------------------------------------------------------- */ .why-card--image:hover { transform: translateY(-5px); border-color: rgba(254, 208, 0, 0.42); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24); } .why-card--image:hover .why-card-image img { transform: scale(1.045); filter: saturate(1); } .why-card--image:hover .why-card-image::after { background: linear-gradient( to bottom, rgba(6, 17, 31, 0.02) 0%, rgba(6, 17, 31, 0.12) 32%, rgba(6, 17, 31, 0.8) 72%, rgba(6, 17, 31, 0.96) 100% ); } .why-card--image:hover .why-card-content::before { width: 58px; } .why-card--image:hover .why-card-arrow { opacity: 1; transform: translateY(0); background: var(--gold); border-color: var(--gold); color: var(--ink-deep); } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 900px) { .why-section { padding: 4.5rem 0; } .why-grid { gap: 1rem; } .why-card--image, .why-card-content { min-height: 310px; } .why-card-content { padding: 1.4rem; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 680px) { .why-grid { grid-template-columns: 1fr; } .why-card--image, .why-card-content { min-height: 330px; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .why-card--image, .why-card-image img, .why-card-image::after, .why-card-content::before, .why-card-arrow { transition: none; } .why-card--image:hover { transform: none; } .why-card--image:hover .why-card-image img { transform: none; } }