/* Digital Asset Custody Platform Development — built on the same tx- and rw- design system as /defi-tokenization-development/ (which in turn came from /crypto-twitter-marketing-agency/ and /real-world-asset-tokenization/), re-scoped to .dac-page and trimmed to the rules this page uses. Rules the page does not use (case cards, consultant cards, the multi-step form's fieldset/progress widgets, tx-benefit, tx-grid) are deliberately not carried over. Only the .dac-* blocks at the bottom are new: the hero placeholder, the operations rule-grid, the security layer stack, the interface definition list, the compliance cards, the use-case chips and the cost tiers. They reuse the tokens declared here rather than introducing new colours. */ /* ===== tokens + base ===== */ .dac-page { --tx-bg: #040914; --tx-text: #d9d9d9; --tx-teal: #36e7c4; --tx-gold: #f5d255; --tx-violet: #4e1fa3; --tx-line: rgba(217, 217, 217, .14); --tx-gradient: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%); --tx-h1: 52px; --tx-h1-line: 60px; --tx-h2: 40px; --tx-h2-line: 56px; --tx-title: 20px; --tx-copy: 18px; --tx-faq: 24px; --dac-card: 15.5px; color: var(--tx-text); overflow-x: clip; max-width: 100%; } .text-color { background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: inherit; } .dac-page *, .dac-page *::before, .dac-page *::after { box-sizing: border-box; } .dac-page [hidden] { display: none !important; } .dac-page .container { position: relative; } .dac-page h1, .dac-page h2, .dac-page h3, .dac-page h4 { font-family: "Exo 2", sans-serif; color: inherit; margin: 0; padding: 0; } .dac-page p { font-family: Epilogue, sans-serif; font-size: var(--tx-copy) !important; font-weight: 300; line-height: 1.6; margin: 0; } .dac-page p+p { margin-top: 16px; } .dac-page h3 { font-size: var(--tx-title); font-weight: 600; line-height: 1.35; } .dac-page a { text-decoration: none; } .dac-page button { font-family: "Exo 2", sans-serif; cursor: pointer; } .dac-page :is(a, button, input, summary):focus-visible { outline: 2px solid var(--tx-teal); outline-offset: 5px; } /* ===== section shell ===== */ .dac-page .tx-section { padding: 70px 0; scroll-margin-top: 110px; } .dac-page .tx-alt { background: rgba(255, 255, 255, .045); } .dac-page .tx-heading { max-width: 1100px; text-align: center; margin: 0 auto; } .dac-page .tx-heading h2 { font-size: var(--tx-h2); line-height: var(--tx-h2-line); font-weight: 600; margin: 0 0 20px; } .dac-page h2 span, .dac-page .tx-heading h2 span { background: var(--tx-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline; } .dac-page .tx-heading p { max-width: 1000px; margin: auto; } .dac-page .tx-space { margin-top: 60px; } /* ===== buttons ===== */ .dac-page .tx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .dac-page .tx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 32px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(135deg, #4e1fa3, #661eb9); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; transition: background .25s, transform .25s, border-color .25s; } .dac-page .tx-btn:hover { background: linear-gradient(135deg, #661eb9, #7446be); transform: translateY(-2px); color: #fff; } .dac-page .tx-btn-ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .25); padding: 13px 30px; } .dac-page .tx-btn-ghost:hover { background: rgba(54, 231, 196, .08); border-color: var(--tx-teal); } .dac-page .tx-btn span { flex-shrink: 0; } /* ===== hero ===== */ .dac-page .tx-hero { padding: 80px 0; position: relative; overflow: hidden; } .dac-page .tx-hero::before { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid rgba(217, 217, 217, .1); border-radius: 50%; top: -320px; left: -120px; pointer-events: none; } .dac-page .tx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; } .dac-page .tx-hero-grid>* { min-width: 0; } .dac-page .tx-hero h1 { font-size: var(--tx-h1); line-height: var(--tx-h1-line); font-weight: 600; padding-bottom: 30px; background: var(--tx-gradient); background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .tx-hero-art { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; perspective: 1200px; } .dac-page .tx-hero-art::before { content: ""; position: absolute; inset: 10% 8%; background: radial-gradient(closest-side, rgba(91, 37, 192, .45), rgba(54, 231, 196, .12) 65%, transparent); filter: blur(34px); pointer-events: none; animation: dacGlow 6s ease-in-out infinite; } .dac-page .tx-hero-art img { position: relative; width: 100%; max-width: 550px; height: auto; object-fit: contain; -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; animation: dacFloat 7s ease-in-out infinite; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s; } .dac-page .tx-hero-art:hover img { transform: rotateY(-7deg) rotateX(4deg) scale(1.03); filter: saturate(1.15) brightness(1.06); } @keyframes dacFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } @keyframes dacGlow { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Placeholder that holds the hero's footprint until the final artwork lands. Delete .dac-art-pending from the markup (and these three rules) once the is dropped in. */ .dac-page .dac-art-pending { width: 100%; } .dac-page .dac-art-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 550px; aspect-ratio: 1100 / 880; border: 1px dashed rgba(217, 217, 217, .28); border-radius: 18px; background: rgba(255, 255, 255, .02); } .dac-page .dac-art-note { font-family: "Exo 2", sans-serif; font-size: 15px; font-weight: 600; color: var(--rw-text-mid, #a8b3cc); } .dac-page .dac-art-dim { font-family: "Exo 2", sans-serif; font-size: 12.5px; letter-spacing: .06em; color: rgba(168, 179, 204, .6); } /* ===== FAQ ===== */ .dac-page .tx-faq { max-width: 960px; margin-inline: auto; } .dac-page .tx-faq details { margin-bottom: 15px; border: 1px solid var(--tx-teal); border-radius: 8px; } .dac-page .tx-faq summary { list-style: none; cursor: pointer; padding: 18px 22px; } .dac-page .tx-faq summary::-webkit-details-marker { display: none; } .dac-page .tx-faq summary::marker { display: none; content: ""; } .dac-page .tx-faq h3 { font-size: var(--tx-faq); font-weight: 600; line-height: 1.3; } .dac-page .tx-faq p { padding: 0 22px 18px; } .dac-page .tx-faq details[open] { background: rgba(54, 231, 196, .1); } /* ===== shared chrome ===== */ .tx-skip { position: fixed; top: 0; left: 20px; transform: translateY(-120%); z-index: 99999; background: #36e7c4; color: #040914; padding: 12px 20px; border-radius: 0 0 8px 8px; } .tx-skip:focus { transform: translateY(0); } .section-service-alt { background: rgba(255, 255, 255, .06); position: relative; } .nav-link:focus, .nav-link:hover, .nav-link.active, .contact-links .h-4 { background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%); background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width:1199px) { .dac-page { --tx-h1: 45px; --tx-h1-line: 1.3; --tx-h2: 34px; --tx-h2-line: 1.3; } .dac-page .tx-hero { padding: 70px 0; } .dac-page .tx-space { margin-top: 50px; } .dac-page .tx-hero-grid { gap: 34px; } } @media (max-width:991px) { .dac-page { --tx-h1: 35px; --tx-h2: 30px; --tx-copy: 16px; --tx-faq: 20px; } .dac-page .tx-section { padding: 50px 0 40px; } .dac-page p { line-height: 1.5; } .dac-page .tx-space { margin-top: 40px; } .dac-page .tx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; width: 100%; max-width: 100%; } .dac-page .tx-hero-art img, .dac-page .dac-art-frame { max-width: 440px; margin: 0 auto; } .dac-page .tx-btn { font-size: 14px; padding: 12px 22px; } .dac-page .tx-actions .tx-btn { flex: 1 1 auto; max-width: 100%; box-sizing: border-box; } } @media (max-width:767px) { .dac-page { --dac-card: 13.5px; --tx-h1: 26px; --tx-h1-line: 1.25; --tx-h2: 22px; --tx-h2-line: 1.3; --tx-title: 17px; --tx-copy: 14px; --tx-faq: 15px; } .dac-page .tx-hero { padding: 36px 0 28px; } .dac-page .tx-hero-grid { display: flex; flex-direction: column; width: 100%; max-width: 100%; gap: 24px; } .dac-page .tx-hero-grid > * { width: 100%; max-width: 100%; min-width: 0; } .dac-page .tx-hero::before { display: none; } .dac-page .tx-hero h1 { padding-bottom: 8px; } .dac-page .tx-hero p, .dac-page .tx-heading p { font-size: 13.5px !important; } .dac-page .tx-section { padding: 38px 0; scroll-margin-top: 70px; } .dac-page .tx-heading h2 { margin-bottom: 10px; } .dac-page .tx-space { margin-top: 24px; } .dac-page .tx-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; gap: 12px; margin-top: 18px; } .dac-page .tx-actions .tx-btn, .dac-page .tx-btn { flex: none !important; display: flex; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 13.5px; padding: 12px 18px; border-radius: 8px; text-align: center; justify-content: center; align-items: center; white-space: normal; word-break: normal; overflow-wrap: break-word; } .dac-page .tx-btn-ghost { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 11px 18px; } .dac-page .tx-hero-art img, .dac-page .dac-art-frame { max-width: 320px; margin: 0 auto; } .dac-page .tx-faq details { margin-bottom: 8px; } .dac-page .tx-faq summary { padding: 10px 12px; gap: 8px; } .dac-page .tx-faq h3 { font-size: 13.5px; line-height: 1.35; } .dac-page .tx-faq p { font-size: 12.5px !important; padding: 0 12px 10px; line-height: 1.4; } } @media (max-width:576px) { .dac-page { --tx-h1: 23px; --tx-h2: 20px; --tx-faq: 14.5px; --tx-copy: 13.5px; } .dac-page .tx-section { padding: 30px 0; } .dac-page .tx-actions .tx-btn, .dac-page .tx-btn { font-size: 13px; padding: 11px 16px; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .dac-page .tx-btn-ghost { padding: 10px 16px; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } } @media (max-width:480px) { .dac-page .tx-section { padding: 26px 0; } } @media (max-width:425px) { .dac-page { --tx-copy: 13px; --tx-faq: 14px; --tx-title: 16px; } } @media (max-width:400px) { .dac-page { --tx-h2-line: 1.2; } } @media (prefers-reduced-motion:reduce) { .dac-page *, .dac-page *::before, .dac-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .dac-page .tx-btn:hover { transform: none; } } /* ===== clients carousel + stats strip ===== */ .dac-page .about-section-clients { padding: 40px 0; } .dac-page .client-carousel { padding-bottom: 40px; } .dac-page .scroller__wrapper { --scrolling-gallery-item-duration: 20s; --scrolling-gallery-items-visible: 5; --scrolling-gallery-items-total: 8; overflow: hidden; will-change: transform; } .dac-page .scroller__container { overflow-x: hidden; } .dac-page .slide-scroller { display: flex; width: max-content; animation: dac-client-scrolling-gallery 40s linear infinite; } .dac-page .slide-scroller:hover, .dac-page .slide-scroller:focus { animation-play-state: paused; } @keyframes dac-client-scrolling-gallery { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .dac-page .scroller__item { flex: 0 0 calc(100vw / var(--scrolling-gallery-items-visible)); box-sizing: border-box; } .dac-page .scroller__item .item img { height: 60px; width: 100%; object-fit: contain; } @media (max-width: 1440px) { .dac-page .scroller__wrapper { --scrolling-gallery-items-visible: 5; --scrolling-gallery-item-duration: 30s; } } @media (max-width: 767px) { .dac-page .scroller__wrapper { --scrolling-gallery-items-visible: 3; --scrolling-gallery-item-duration: 20s; } } @media (max-width: 480px) { .dac-page .scroller__wrapper { --scrolling-gallery-items-visible: 2; --scrolling-gallery-item-duration: 20s; } } @media (max-width: 360px) { .dac-page .scroller__wrapper { --scrolling-gallery-items-visible: 1; --scrolling-gallery-item-duration: 10s; } } .section-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(161, 131, 224, 0.25), transparent); max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .project-section { background: none; } .dac-page .project-para { line-height: 1.6; } @media (max-width: 767px) { .project-section { padding: 16px 0 !important; } .project-section .expert-overall { padding: 0 4px; } .project-section .expert-digit { padding: 6px 2px; text-align: center; } .project-section .project-head { font-size: 24px !important; line-height: 1.15; margin-bottom: 2px; } .project-section .project-para { font-size: 12px !important; line-height: 1.3; margin: 0 !important; opacity: 0.85; } .section-sep { margin: 6px auto !important; } .dac-page .about-section-clients { padding: 18px 0 12px !important; } .dac-page .client-carousel { padding-bottom: 12px !important; } .metaverse_heading .h-3 { font-size: 20px !important; line-height: 1.3; } } /* ===== card components carried over from /real-world-asset-tokenization/ ===== */ .dac-page { --rw-card: #1c1d25; --rw-border: rgba(49, 52, 71, .7); --rw-grad: linear-gradient(135deg, #f5d255 0%, #36e7c4 100%); --rw-head-grad: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%); --rw-text-hi: #f2f4f8; --rw-text-mid: #a8b3cc; --lilac: #b9a4ff; --accent-lavender: #a183e0; --border-glass: rgba(255, 255, 255, .07); --radius-card: 16px; --radius-btn: 10px; --transition: .3s cubic-bezier(.4, 0, .2, 1); } .dac-page .rw-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .dac-page .rw-asset-card { position: relative; overflow: hidden; padding: 26px 24px 28px; background: var(--rw-card); border: 1px solid var(--rw-border); border-radius: 16px; transition: transform .3s, border-color .3s, background .3s, box-shadow .3s; } .dac-page .rw-asset-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rw-grad); transform: scaleX(0); transition: transform .35s; } .dac-page .rw-asset-card:hover { border-color: var(--tx-teal); background: #1f2030; transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); } .dac-page .rw-asset-card:hover img { border-color: rgba(54, 231, 196, .45); background: rgba(54, 231, 196, .12); } .dac-page .rw-asset-card:hover::before { transform: scaleX(1); } .dac-page .rw-asset-card img { width: 42px; height: 42px; padding: 9px; margin: 0 0 18px; object-fit: contain; border: 1px solid rgba(161, 131, 224, .2); border-radius: 11px; background: rgba(78, 31, 163, .2); transition: border-color .3s, background .3s; } .dac-page .rw-asset-card h3 { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 9px; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* every card body resolves to the same size, whichever section it sits in */ .dac-page .rw-m-card p { font-size: var(--dac-card) !important; color: var(--rw-text-mid); line-height: 1.6; } .dac-page .rw-asset-card p { color: var(--rw-text-mid); font-size: var(--dac-card) !important; line-height: 1.6; } .dac-page .rw-icon-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: rgba(78, 31, 163, .18); border: 1px solid rgba(161, 131, 224, .18); transition: box-shadow .3s, border-color .3s; } .dac-page .rw-icon-wrap img { width: 32px; height: 32px; object-fit: contain; } /* this page's capability set is six wide, not four */ .dac-page .rw-m-card:hover .rw-icon-wrap { box-shadow: 0 8px 24px rgba(245, 210, 85, .15); border-color: rgba(245, 210, 85, .3); } /* Boxed cards: icon on its own line, heading beneath it, then one chip per technology. Heading and chip text match the other card sections rather than using a smaller label size. */ .dac-page .rw-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; } .dac-page .rw-tile { height: 100%; padding: 26px 24px; background: var(--rw-card); border: 1px solid var(--rw-border); border-radius: 16px; transition: background .3s, border-color .3s, transform .3s; } .dac-page .rw-tile:hover { background: rgba(78, 31, 163, .12); border-color: var(--tx-teal); transform: translateY(-3px); } /* the icon sits bare above the heading rather than on a plate */ .dac-page .rw-tile .rw-icon-wrap { width: auto; height: auto; margin: 0 0 14px; justify-content: flex-start; border: 0; border-radius: 0; background: none; } .dac-page .rw-tile .rw-icon-wrap img { width: 40px; height: 40px; } .dac-page .rw-tile h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--rw-text-hi); margin-bottom: 14px; } .dac-page .rw-tile-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dac-page .rw-tile-chips span { padding: 7px 14px; border: 1px solid rgba(54, 231, 196, .28); border-radius: 7px; background: rgba(54, 231, 196, .06); font-family: Epilogue, sans-serif; font-size: var(--dac-card); font-weight: 300; line-height: 1.5; color: #d9d9d9; transition: border-color .25s, background .25s, color .25s; } .dac-page .rw-tile-chips span:hover { border-color: var(--tx-teal); background: rgba(54, 231, 196, .13); color: #fff; } .dac-page .rw-devco { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: stretch; } /* Left column: the thesis in a labelled card, with a compact CTA card beneath it. */ .dac-page .dac-thesis { display: flex; flex-direction: column; gap: 16px; } .dac-page .dac-thesis-card { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 34px 30px; border: 1px solid var(--rw-border); border-radius: 16px; background: linear-gradient(160deg, rgba(78, 31, 163, .16), rgba(28, 29, 37, .6)); } .dac-page .dac-thesis-card p { line-height: 1.8; } /* tags under a rule, so the card carries its height with content rather than padding */ .dac-page .dac-thesis-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(217, 217, 217, .12); } .dac-page .dac-thesis-chips li { padding: 7px 14px; border: 1px solid rgba(161, 131, 224, .3); border-radius: 50px; background: rgba(255, 255, 255, .03); font-family: "Exo 2", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--rw-text-hi); } .dac-page .dac-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: "Exo 2", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-teal); } .dac-page .dac-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tx-teal); } /* the CTA card reads as a different surface from the thesis above it */ .dac-page .dac-thesis-cta { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid rgba(161, 131, 224, .32); border-radius: 16px; background: linear-gradient(160deg, rgba(78, 31, 163, .32), rgba(28, 29, 37, .8)); } .dac-page .dac-thesis-cta p { flex: 1 1 auto; min-width: 0; font-family: Epilogue, sans-serif; font-size: var(--dac-card) !important; font-weight: 600; line-height: 1.35; color: var(--rw-text-hi); } .dac-page .dac-thesis-cta .tx-btn { flex-shrink: 0; padding: 10px 16px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; } .dac-page .dac-thesis-cta p { white-space: nowrap; } /* corner index on each of the eight points */ .dac-page .rw-m-no { position: absolute; top: 16px; right: 18px; font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(168, 179, 204, .45); } .dac-page .rw-m-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .dac-page .rw-m-card { position: relative; overflow: hidden; padding: 22px 46px 22px 22px; border-radius: 14px; background: rgba(28, 29, 37, .7); border: 1px solid var(--rw-border); transition: border-color .3s, transform .3s, box-shadow .3s; } .dac-page .rw-m-card::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rw-grad); transform: scaleX(0); transition: transform .35s; } .dac-page .rw-m-card::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; } .dac-page .rw-m-card:hover { border-color: var(--tx-teal); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(78, 31, 163, .3); } .dac-page .rw-m-card:hover::before { transform: scaleX(1); } .dac-page .rw-m-card:hover::after { left: 130%; } .dac-page .rw-m-card .rw-icon-wrap { margin-bottom: 14px; transition: box-shadow .3s, border-color .3s, transform .3s; } .dac-page .rw-m-card:hover .rw-icon-wrap { transform: scale(1.08) rotate(-4deg); } .dac-page .rw-m-card .rw-icon-wrap img { animation: rwFloat 3.2s ease-in-out infinite; } .dac-page .rw-m-card p { line-height: 1.6; } .dac-page .rw-m-card:nth-child(2) { --rw-d: .08s; } .dac-page .rw-m-card:nth-child(3) { --rw-d: .16s; } .dac-page .rw-m-card:nth-child(4) { --rw-d: .24s; } .dac-page .rw-m-card:nth-child(5) { --rw-d: .32s; } .dac-page .rw-m-card:nth-child(6) { --rw-d: .40s; } .dac-page .rw-m-card:nth-child(7) { --rw-d: .48s; } .dac-page .rw-m-card:nth-child(8) { --rw-d: .56s; } .dac-page .rw-m-card:nth-child(2) .rw-icon-wrap img { animation-delay: .4s; } .dac-page .rw-m-card:nth-child(3) .rw-icon-wrap img { animation-delay: .8s; } .dac-page .rw-m-card:nth-child(4) .rw-icon-wrap img { animation-delay: 1.2s; } .dac-page .rw-m-card.sr { opacity: 0; } .dac-page .rw-m-card.sr.on { opacity: 1; animation: rwReveal .7s cubic-bezier(.2, .7, .2, 1) var(--rw-d, 0s) backwards; } @keyframes rwReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes rwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Closing CTA: one prompting line and the button on a row, the pair centred under a rule. Same component as /crypto-token-marketing-agency/, used by both CTAs here. */ .dac-page .dac-cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 62px; padding-top: 0; } .dac-page .dac-cta-band > p { flex: 0 1 auto; margin: 0; font-family: Epilogue, sans-serif; font-size: 17px !important; font-weight: 500; line-height: 1.45; color: var(--rw-text-hi); } .dac-page .dac-cta-band .tx-actions { flex: none; margin-top: 0; } @media (max-width: 991px) { .dac-page .rw-devco { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 767px) { .dac-page .rw-asset-card { padding: 20px 18px; border-radius: 14px; } .dac-page .rw-asset-card img { width: 36px; height: 36px; padding: 8px; margin-bottom: 14px; } .dac-page .rw-asset-card h3, .dac-page .rw-tile h3 { font-size: 16px; } .dac-page .rw-tile { padding: 20px 18px; } .dac-page .rw-tile-chips span { font-size: 13.5px; padding: 6px 12px; } .dac-page .rw-m-card { padding: 16px 40px 16px 16px; } .dac-page .dac-thesis-card { padding: 22px 20px; } .dac-page .dac-thesis-cta { flex-wrap: wrap; gap: 12px; padding: 18px; } .dac-page .dac-thesis-cta .tx-btn { width: 100%; } .dac-page .dac-cta-band { gap: 16px; margin-top: 36px; padding-top: 28px; text-align: center; } .dac-page .dac-cta-band > p { font-size: 14px !important; } .dac-page .dac-cta-band .tx-actions { width: 100%; } } /* ============================================================================ Page-specific components. Everything below is new to this page; each reuses the tokens above rather than declaring fresh colours. ========================================================================= */ /* --- Interface: definition list with a gradient edge, no boxes. --- */ /* --- Compliance: card + checked bullet list. --- */ .dac-page .dac-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; } .dac-page .dac-comp { height: 100%; padding: 26px 24px; background: var(--rw-card); border: 1px solid var(--rw-border); border-radius: 16px; transition: border-color .3s, transform .3s, box-shadow .3s; } .dac-page .dac-comp:hover { border-color: rgba(161, 131, 224, .45); transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, .3); } .dac-page .dac-comp h3 { margin-bottom: 10px; font-size: 19px; font-weight: 700; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dac-comp > p { color: var(--rw-text-mid); font-size: var(--dac-card) !important; } .dac-page .dac-comp ul { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(49, 52, 71, .6); } .dac-page .dac-comp li { position: relative; padding-left: 24px; font-family: Epilogue, sans-serif; font-size: var(--dac-card); font-weight: 300; line-height: 1.5; color: #d9d9d9; } .dac-page .dac-comp li + li { margin-top: 10px; } .dac-page .dac-comp li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--tx-teal); font-weight: 700; } /* --- Use cases: a right-to-left marquee of icon cards. The track holds the set twice and shifts by half its width, so the loop never shows a seam. Hovering pauses it, the same affordance the clients strip uses. --- */ .dac-page .dac-cases { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .dac-page .dac-cases-track { display: flex; width: max-content; gap: 30px; animation: dacCases 42s linear infinite; } .dac-page .dac-cases:hover .dac-cases-track { animation-play-state: paused; } .dac-page .dac-case { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; width: 242px; } .dac-page .dac-defs { position: absolute; width: 0; height: 0; } .dac-page .dac-case-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .dac-page .dac-case-ico svg { width: 26px; height: 26px; } .dac-page .dac-case-label { position: relative; top: 1px; font-family: Epilogue, sans-serif; font-size: 14.5px; font-weight: 400; font-style: italic; line-height: 1.35; color: var(--rw-text-hi); } @keyframes dacCases { to { transform: translateX(calc(-50% - 15px)); } } /* --- Cost tiers. --- */ .dac-page .dac-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 20px; align-items: start; } .dac-page .dac-tier { position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 26px; background: var(--rw-card); border: 1px solid var(--rw-border); border-radius: 18px; transition: border-color .3s, transform .3s, box-shadow .3s; } .dac-page .dac-tier:hover { border-color: rgba(161, 131, 224, .45); transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, .35); } /* the middle tier is the one most clients land on, so it carries the gradient edge */ .dac-page .dac-tier-mid::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: 19px; background: var(--rw-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .dac-page .dac-tier-price { margin: 8px 0 10px; font-family: "Exo 2", sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dac-tier-for { color: var(--rw-text-mid); font-size: var(--dac-card) !important; } .dac-page .dac-tier-list h4 { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rw-text-mid); } .dac-page .dac-tier-list ul { list-style: none; margin: 0; padding: 0; } .dac-page .dac-tier-list li { position: relative; padding-left: 24px; font-family: Epilogue, sans-serif; font-size: var(--dac-card); font-weight: 300; line-height: 1.5; } .dac-page .dac-tier-list li + li { margin-top: 9px; } .dac-page .dac-tier-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; } .dac-page .dac-in li { color: #d9d9d9; } .dac-page .dac-in li::before { content: "\2713"; color: var(--tx-teal); } .dac-page .dac-out li { color: #8b93a7; } .dac-page .dac-out li::before { content: "\00D7"; color: #8b93a7; font-size: 17px; line-height: 1.25; } /* reference order: kicker, name, price, blurb, timeline + team, included, not included, best for. One rule set for all three tiers. */ .dac-page .dac-tier-kicker { display: block; margin-bottom: 8px; font-family: "Exo 2", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-teal); } .dac-page .dac-tier h3 { font-size: 20px; font-weight: 700; color: var(--rw-text-hi); } .dac-page .dac-tier-ribbon { position: absolute; top: 0; left: 0; right: 0; padding: 8px 0; border-radius: 17px 17px 0 0; background: var(--rw-grad); text-align: center; font-family: "Exo 2", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0a0d16; } .dac-page .dac-tier-mid { padding-top: 58px; } /* timeline and team share a row under the blurb */ .dac-page .dac-tier-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 0; padding: 16px 0; border-top: 1px solid rgba(49, 52, 71, .6); border-bottom: 1px solid rgba(49, 52, 71, .6); } .dac-page .dac-tier-meta > div { padding-right: 14px; } .dac-page .dac-tier-meta > div + div { border-left: 1px solid rgba(49, 52, 71, .6); padding-left: 16px; } .dac-page .dac-tier-meta dt { min-width: 0; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .12em; } .dac-page .dac-tier-list { padding: 18px 0 0; } .dac-page .dac-tier-best { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(49, 52, 71, .6); } .dac-page .dac-tier-best h4 { margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rw-text-mid); } .dac-page .dac-tier-best p { font-size: var(--dac-card) !important; color: var(--rw-text-hi); } /* the excluded set reads as one muted line rather than a second bulleted list */ .dac-page .dac-out li { display: inline; padding-left: 0; } .dac-page .dac-out li + li { margin-top: 0; } .dac-page .dac-out li::before { content: none; } .dac-page .dac-out li:not(:last-child)::after { content: " \00B7 "; color: rgba(168, 179, 204, .45); } .dac-page .dac-tier-meta dt { flex-shrink: 0; min-width: 74px; font-family: "Exo 2", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rw-text-mid); } .dac-page .dac-tier-meta dd { margin: 0; font-family: Epilogue, sans-serif; font-size: var(--dac-card); font-weight: 300; line-height: 1.45; color: #d9d9d9; } @media (max-width: 1199px) { .dac-page .dac-tiers { gap: 14px; } .dac-page .dac-tier { padding: 26px 20px; } .dac-page .dac-tier-price { font-size: 26px; } } @media (max-width: 991px) { .dac-page .dac-tier { max-width: 560px; margin: 0 auto; width: 100%; } .dac-page .dac-case { width: 258px; } } @media (max-width: 767px) { .dac-page .dac-comp { padding: 20px 18px; } .dac-page .dac-cases-track { gap: 20px; } .dac-page .dac-case { width: 224px; gap: 7px; } .dac-page .dac-case-ico svg { width: 22px; height: 22px; } .dac-page .dac-case-label { font-size: 13px; } @keyframes dacCases { to { transform: translateX(calc(-50% - 10px)); } } .dac-page .dac-tier { padding: 22px 18px; border-radius: 14px; } .dac-page .dac-tier-price { font-size: 23px; } } /* --- Development process: a numbered rail beside a detail card. Radios drive it, so it works with JavaScript off and the arrow keys step through. Each panel carries its own prev/next labels, which is how the arrows work without JS. --- */ .dac-page .dac-steps { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 30px; align-items: stretch; max-width: 1040px; margin-inline: auto; } .dac-page .dac-steps .dac-steps-stage { height: 100%; } .dac-page .dac-steps .dac-step-panel { min-height: 100%; } .dac-page .dac-steps-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .dac-page .dac-steps-railbox { position: relative; min-height: 396px; } .dac-page .dac-steps-railbox .dac-steps-rail { position: absolute; inset: 0; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(161, 131, 224, .5) transparent; } .dac-page .dac-steps-rail { display: flex; flex-direction: column; gap: 10px; } .dac-page .dac-steps-rail::-webkit-scrollbar { width: 6px; } .dac-page .dac-steps-rail::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(161, 131, 224, .5); } .dac-page .dac-steps-rail label { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; border: 1px solid var(--rw-border); border-radius: 12px; background: rgba(28, 29, 37, .5); font-family: "Exo 2", sans-serif; color: var(--rw-text-mid); transition: background .25s, border-color .25s, color .25s, transform .25s; } .dac-page .dac-steps-rail label:hover { border-color: rgba(161, 131, 224, .45); background: rgba(28, 29, 37, .8); color: var(--rw-text-hi); transform: translateX(3px); } .dac-page .dac-steps-no { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 30px; border: 1px solid var(--rw-border); border-radius: 7px; background: rgba(4, 9, 20, .6); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--rw-text-mid); transition: background .25s, border-color .25s, color .25s; } .dac-page .dac-steps-name { flex: 1; font-size: 15.5px; font-weight: 600; line-height: 1.3; } .dac-page .dac-steps-chev { flex-shrink: 0; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; transition: opacity .25s, transform .25s; } .dac-page .dac-steps-stage { position: relative; } .dac-page .dac-step-panel { display: none; position: relative; overflow: hidden; min-height: 396px; padding: 34px 36px; border: 1px solid var(--rw-border); border-radius: 18px; background: linear-gradient(150deg, rgba(31, 32, 48, .9), rgba(20, 21, 31, .9)); } .dac-page .dac-step-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rw-grad); } .dac-page .dac-step-ico { position: absolute; top: 34px; right: 34px; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(78, 31, 163, .22); border: 1px solid rgba(161, 131, 224, .22); } .dac-page .dac-step-ico img { width: 32px; height: 32px; object-fit: contain; } .dac-page .dac-step-kicker { display: flex; align-items: center; min-height: 54px; margin-bottom: 38px; line-height: 1; font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-teal); } .dac-page .dac-step-panel h3 { margin-bottom: 20px; font-size: 25px; font-weight: 700; line-height: 1.3; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dac-step-panel p { max-width: 48ch; margin-bottom: 0; line-height: 1.75; color: #d9d9d9; } .dac-page .dac-step-foot { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: auto; padding-top: 26px; } .dac-page .dac-step-nav { display: flex; gap: 10px; } .dac-page .dac-step-nav label { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; border: 1px solid var(--rw-border); border-radius: 10px; background: rgba(4, 9, 20, .5); font-size: 16px; line-height: 1; color: var(--rw-text-mid); transition: background .25s, border-color .25s, color .25s, transform .2s; } .dac-page .dac-step-nav label:hover { background: linear-gradient(135deg, #4e1fa3, #661eb9); border-color: transparent; color: #fff; transform: translateY(-2px); } /* one rule per step: light the rail item, reveal the panel */ .dac-page #dac-step-1:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-1"], .dac-page #dac-step-2:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-2"], .dac-page #dac-step-3:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-3"], .dac-page #dac-step-4:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-4"], .dac-page #dac-step-5:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-5"], .dac-page #dac-step-6:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-6"], .dac-page #dac-step-7:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-7"], .dac-page #dac-op-1:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-1"], .dac-page #dac-op-2:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-2"], .dac-page #dac-op-3:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-3"], .dac-page #dac-op-4:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-4"], .dac-page #dac-op-5:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-5"], .dac-page #dac-op-6:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-6"] { background: rgba(78, 31, 163, .25); border-color: rgba(54, 231, 196, .55); color: #fff; } .dac-page #dac-step-1:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-1"] .dac-steps-no, .dac-page #dac-step-2:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-2"] .dac-steps-no, .dac-page #dac-step-3:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-3"] .dac-steps-no, .dac-page #dac-step-4:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-4"] .dac-steps-no, .dac-page #dac-step-5:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-5"] .dac-steps-no, .dac-page #dac-step-6:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-6"] .dac-steps-no, .dac-page #dac-step-7:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-7"] .dac-steps-no { background: var(--rw-grad); border-color: transparent; color: #0a0d16; } .dac-page #dac-step-1:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-1"] .dac-steps-chev, .dac-page #dac-step-2:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-2"] .dac-steps-chev, .dac-page #dac-step-3:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-3"] .dac-steps-chev, .dac-page #dac-step-4:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-4"] .dac-steps-chev, .dac-page #dac-step-5:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-5"] .dac-steps-chev, .dac-page #dac-step-6:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-6"] .dac-steps-chev, .dac-page #dac-step-7:checked ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-7"] .dac-steps-chev { opacity: 1; transform: rotate(45deg) translate(2px, -2px); } .dac-page #dac-step-1:checked ~ .dac-steps-stage .dac-step-panel:nth-child(1), .dac-page #dac-step-2:checked ~ .dac-steps-stage .dac-step-panel:nth-child(2), .dac-page #dac-step-3:checked ~ .dac-steps-stage .dac-step-panel:nth-child(3), .dac-page #dac-step-4:checked ~ .dac-steps-stage .dac-step-panel:nth-child(4), .dac-page #dac-step-5:checked ~ .dac-steps-stage .dac-step-panel:nth-child(5), .dac-page #dac-step-6:checked ~ .dac-steps-stage .dac-step-panel:nth-child(6), .dac-page #dac-step-7:checked ~ .dac-steps-stage .dac-step-panel:nth-child(7), .dac-page #dac-op-1:checked ~ .dac-steps-stage .dac-step-panel:nth-child(1), .dac-page #dac-op-2:checked ~ .dac-steps-stage .dac-step-panel:nth-child(2), .dac-page #dac-op-3:checked ~ .dac-steps-stage .dac-step-panel:nth-child(3), .dac-page #dac-op-4:checked ~ .dac-steps-stage .dac-step-panel:nth-child(4), .dac-page #dac-op-5:checked ~ .dac-steps-stage .dac-step-panel:nth-child(5), .dac-page #dac-op-6:checked ~ .dac-steps-stage .dac-step-panel:nth-child(6) { display: flex; flex-direction: column; animation: dacPanel .35s ease both; } .dac-page #dac-step-1:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-1"], .dac-page #dac-step-2:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-2"], .dac-page #dac-step-3:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-3"], .dac-page #dac-step-4:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-4"], .dac-page #dac-step-5:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-5"], .dac-page #dac-step-6:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-6"], .dac-page #dac-step-7:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-step-7"], .dac-page #dac-op-1:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-1"], .dac-page #dac-op-2:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-2"], .dac-page #dac-op-3:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-3"], .dac-page #dac-op-4:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-4"], .dac-page #dac-op-5:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-5"], .dac-page #dac-op-6:focus-visible ~ .dac-steps-railbox .dac-steps-rail label[for="dac-op-6"] { outline: 2px solid var(--tx-teal); outline-offset: 2px; } @media (max-width: 991px) { .dac-page .dac-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } .dac-page .dac-steps-railbox { min-height: 0; } .dac-page .dac-steps-railbox .dac-steps-rail { position: static; padding-right: 0; } .dac-page .dac-step-panel { padding: 26px 24px; } .dac-page .dac-step-panel h3 { font-size: 21px; } } @media (max-width: 767px) { .dac-page .dac-steps-rail { gap: 8px; } .dac-page .dac-steps-rail label { padding: 12px 14px; gap: 11px; border-radius: 10px; } .dac-page .dac-steps-name { font-size: 13.5px; } .dac-page .dac-steps-no { width: 30px; height: 26px; font-size: 11px; } .dac-page .dac-step-panel { padding: 20px 18px; border-radius: 14px; } .dac-page .dac-step-ico { top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 11px; } .dac-page .dac-step-ico img { width: 24px; height: 24px; } .dac-page .dac-step-panel h3 { font-size: 17px; } .dac-page .dac-step-kicker { min-height: 42px; font-size: 12px; margin-bottom: 22px; } .dac-page .dac-step-foot { margin-top: 18px; padding-top: 0; } .dac-page .dac-step-nav label { width: 34px; height: 34px; font-size: 14px; } } /* The operations pair has no step numbers, icons or arrows, so the rail is narrower, the panel drops its accent edge and its copy sits centred. */ @keyframes dacEdge { 0%, 55% { opacity: 1; } 100% { opacity: 0; } } /* Highlighted edge on the operations card: a flat teal ring that fades in on reveal and stays lit on hover. Nothing rotates, and no other card uses one. */ /* ===== Hero lead form, ported from /real-world-asset-tokenization/ and re-scoped to .dac-page. The .iti* rules stay global: the library appends its country dropdown to , outside this page wrapper. ===== */ /* ===== Hero with inline form (Change 1) ===== */ .dac-page .hero-form-wrapper { background: rgba(48, 48, 48, .18) !important; border: 1px solid #562caf; border-radius: 12px; padding: 22px 22px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); position: relative; } .dac-page .hero-form-wrapper .form-header { padding: 0 0 14px; border-bottom: 1px solid rgba(217, 217, 217, .12); margin-bottom: 14px; } .dac-page .hero-form-wrapper .form-title { font-family: "Exo 2", sans-serif; font-weight: 600; text-align: center; color: #d9d9d9; line-height: 1.25; font-size: 17px; margin: 0 0 10px; padding: 0; letter-spacing: .1px; } .dac-page .hero-form-wrapper .form-header p { font-family: "Exo 2", sans-serif; font-size: 12.5px; line-height: 1.45; text-align: center; color: #d9d9d9; opacity: .65; margin: 0; } .dac-page .hero-form-wrapper .form-trust { font-family: "Exo 2", sans-serif; font-size: 11px; color: #d9d9d9; opacity: .55; margin-top: 12px; margin-bottom: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.3; } .dac-page .hero-form-wrapper .form-trust i { color: #36e7c4; font-size: 13px; } @media (max-width: 567px) { .dac-page .hero-form-wrapper { padding: 18px 16px 16px; border-radius: 10px; } } /* ===== Hero compact form (custom HTML, posts to HubSpot v3 API) ===== */ .dac-page .hero-form-compact { font-family: "Exo 2", sans-serif; } .dac-page .hero-form-compact .row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.35rem; } .dac-page .hero-form-compact .form-floating { position: relative; } /* Inputs / selects / textarea — underline only, transparent */ .dac-page .hero-form-compact .form-floating > .form-control, .dac-page .hero-form-compact .form-floating > select.form-control, .dac-page .hero-form-compact .form-floating > textarea.form-control { height: 48px !important; min-height: 48px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(217, 217, 217, .22) !important; border-radius: 0 !important; padding: 18px 0 6px !important; margin: 0 !important; font-family: "Exo 2", sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; color: #d9d9d9 !important; opacity: 1 !important; box-shadow: none !important; outline: none !important; transition: border-color .25s ease !important; } .dac-page .hero-form-compact .form-floating > textarea.form-control { height: 78px !important; min-height: 78px !important; resize: vertical; padding: 22px 0 6px !important; } .dac-page .hero-form-compact .form-floating > .form-control:focus, .dac-page .hero-form-compact .form-floating > select.form-control:focus, .dac-page .hero-form-compact .form-floating > textarea.form-control:focus { border-bottom-color: #36e7c4 !important; } .dac-page .hero-form-compact .form-floating > .form-control:hover:not(:focus) { border-bottom-color: rgba(217, 217, 217, .4) !important; } .dac-page .hero-form-compact .form-floating > .form-control::placeholder { color: transparent !important; } /* Floating labels — small uppercase above field once focused/filled */ .dac-page .hero-form-compact .form-floating > label { position: absolute !important; top: 0 !important; left: 0 !important; height: auto !important; width: auto !important; padding: 14px 0 !important; margin: 0 !important; font-family: "Exo 2", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #d9d9d9 !important; opacity: .55 !important; background: transparent !important; border: 0 !important; pointer-events: none; transform-origin: 0 0; transition: transform .2s ease, font-size .2s ease, opacity .2s ease, color .2s ease; } .dac-page .hero-form-compact .form-floating > .form-control:focus ~ label, .dac-page .hero-form-compact .form-floating > .form-control:not(:placeholder-shown) ~ label, .dac-page .hero-form-compact .form-floating > select.form-control ~ label, .dac-page .hero-form-compact .form-floating > textarea.form-control:focus ~ label, .dac-page .hero-form-compact .form-floating > textarea.form-control:not(:placeholder-shown) ~ label { transform: translateY(-10px) scale(.78) !important; opacity: .65 !important; letter-spacing: .4px; text-transform: uppercase; font-weight: 600 !important; } .dac-page .hero-form-compact .form-floating > .form-control:focus ~ label, .dac-page .hero-form-compact .form-floating > select.form-control:focus ~ label, .dac-page .hero-form-compact .form-floating > textarea.form-control:focus ~ label { color: #36e7c4 !important; opacity: .9 !important; } .dac-page .hero-form-compact .form-floating .red { color: #f5d255 !important; margin-left: 2px; } /* Select chevron */ .dac-page .hero-form-compact select.form-control { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer; padding-right: 20px !important; background-image: linear-gradient(45deg, transparent 50%, #d9d9d9 50%), linear-gradient(135deg, #d9d9d9 50%, transparent 50%) !important; background-position: calc(100% - 12px) 25px, calc(100% - 7px) 25px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat, no-repeat !important; } .dac-page .hero-form-compact select.form-control option { background: #141414 !important; color: #d9d9d9 !important; } html body .dac-page .hero-form-compact .form-floating input.form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; caret-color: #36e7c4 !important; background-color: #131720 !important; background-image: none !important; border-bottom-color: rgba(217, 217, 217, .22) !important; -webkit-appearance: none !important; appearance: none !important; } html body .dac-page .hero-form-compact .form-floating input.form-control:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } html body .dac-page .hero-form-compact .form-floating input.form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; border-bottom-color: #36e7c4 !important; } html body .dac-page .hero-form-compact .form-floating input.form-control:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } /* select and textarea variants */ html body .dac-page .hero-form-compact .form-floating select.form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } html body .dac-page .hero-form-compact .form-floating textarea.form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } /* Phone input is nested inside .iti after intl-tel-input init */ html body .hero-form-compact .phone-field-floating .iti input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } /* Chrome internal preview/selected states (isolated rules so unrecognized pseudo can't kill chain) */ html body .dac-page .hero-form-compact input:-internal-autofill-selected { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } html body .dac-page .hero-form-compact input:-internal-autofill-previewed { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } /* Standardised :autofill (newer Chrome/Firefox/Safari) */ html body .dac-page .hero-form-compact input:autofill { -webkit-box-shadow: 0 0 0 1000px #131720 inset !important; box-shadow: 0 0 0 1000px #131720 inset !important; -webkit-text-fill-color: #d9d9d9 !important; color: #d9d9d9 !important; background-color: #131720 !important; } /* Firefox autofill */ html body .dac-page .hero-form-compact input:-moz-autofill, html body .dac-page .hero-form-compact select:-moz-autofill, html body .dac-page .hero-form-compact textarea:-moz-autofill { background-color: #131720 !important; color: #d9d9d9 !important; } /* ===== Phone field with intl-tel-input ===== */ .dac-page .hero-form-compact .phone-field-floating { position: relative; padding-top: 0; z-index: 1; } .hero-form-compact .phone-field-floating .iti { width: 100% !important; height: 48px; } /* Static label above the input (intl-tel-input occupies the in-input space) */ .dac-page .hero-form-compact .phone-field-floating > label { position: absolute !important; top: 4px !important; left: 0 !important; height: 14px !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-family: "Exo 2", sans-serif !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .5px !important; text-transform: uppercase !important; color: #d9d9d9 !important; opacity: .55 !important; background: transparent !important; border: 0 !important; transform: none !important; pointer-events: none; z-index: 2; } /* Phone input — match other fields' underline style; explicit padding-left clears the flag + dial code area */ .hero-form-compact .phone-field-floating .iti .form-control, .hero-form-compact .phone-field-floating .iti input[type="tel"], .hero-form-compact .phone-field-floating .iti input.iti__tel-input, .hero-form-compact .phone-field-floating .iti--separate-dial-code input, .hero-form-compact .phone-field-floating .iti--separate-dial-code .iti__tel-input { width: 100% !important; height: 48px !important; min-height: 48px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(217, 217, 217, .22) !important; border-radius: 0 !important; padding-top: 18px !important; padding-bottom: 6px !important; padding-right: 0 !important; padding-left: 92px !important; margin: 0 !important; font-family: "Exo 2", sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; color: #d9d9d9 !important; opacity: 1 !important; box-shadow: none !important; outline: none !important; transition: border-color .25s ease !important; } .hero-form-compact .phone-field-floating .iti .form-control:focus, .hero-form-compact .phone-field-floating .iti input[type="tel"]:focus { border-bottom-color: #36e7c4 !important; } .hero-form-compact .phone-field-floating .iti .form-control::placeholder, .hero-form-compact .phone-field-floating .iti input[type="tel"]::placeholder { color: transparent !important; } /* Flag container (v25 renamed .iti__flag-container → .iti__country-container) */ .hero-form-compact .phone-field-floating .iti__country-container, .hero-form-compact .phone-field-floating .iti__flag-container { height: 48px !important; top: 0 !important; bottom: auto !important; } .hero-form-compact .phone-field-floating .iti__selected-country, .hero-form-compact .phone-field-floating .iti__selected-flag, .hero-form-compact .phone-field-floating .iti__selected-country-primary { background: transparent !important; background-color: transparent !important; outline: none !important; height: 48px !important; padding: 17px 6px 7px 0 !important; border: 0 !important; } /* the outer box already carries the height and padding, so this one sizes to the flag */ .hero-form-compact .phone-field-floating .iti__selected-country-primary { height: auto !important; padding: 0 !important; align-items: center !important; } .hero-form-compact .phone-field-floating .iti__selected-country:hover, .hero-form-compact .phone-field-floating .iti__selected-flag:hover, .hero-form-compact .phone-field-floating .iti__selected-country:focus, .hero-form-compact .phone-field-floating .iti__selected-flag:focus { background: rgba(255, 255, 255, 0.04) !important; } .hero-form-compact .phone-field-floating .iti__selected-dial-code { color: #d9d9d9 !important; font-family: "Exo 2", sans-serif !important; font-size: 14px !important; padding-left: 6px !important; } .hero-form-compact .phone-field-floating .iti__arrow { border-top-color: #d9d9d9 !important; opacity: .65; } .iti__dropdown-content { background: #141414 !important; border: 1px solid #562caf !important; border-radius: 10px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important; overflow: hidden !important; } .iti__search-input, .iti input.iti__search-input, input.iti__search-input { width: 100% !important; background: rgba(255, 255, 255, 0.03) !important; background-color: rgba(255, 255, 255, 0.03) !important; border: 0 !important; border-bottom: 1px solid rgba(217, 217, 217, 0.1) !important; border-radius: 0 !important; color: #d9d9d9 !important; padding: 11px 36px 11px 38px !important; margin: 0 !important; font-family: "Exo 2", sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .iti__country {font-size:13px !important;} .dac-page .hero-form-compact .hero-submit { width: 100% !important; padding: 13px 22px !important; font-family: "Exo 2", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .3px !important; color: #000 !important; background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%) !important; border: 0 !important; border-radius: 10px !important; cursor: pointer; transition: filter .2s ease, transform .15s ease; box-shadow: 0 6px 20px rgba(54, 231, 196, .18); margin-top: 4px; } .dac-page .hero-form-compact .hero-gdpr .form-check-label { margin: 0 !important; padding: 0 !important; font-family: "Exo 2", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #d9d9d9 !important; opacity: .75 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; position: static !important; background: transparent !important; border: 0 !important; } .dac-page .hero-form-compact .hero-gdpr a { margin: 0 3px; color: #f5d255; text-decoration: underline; } .dac-page .hero-form-compact .hero-gdpr .red { margin-left: 1px; color: #f5d255; } .dac-page .hero-form-compact .hero-gdpr .form-check-input { position: static !important; float: none !important; margin: 2px 0 0 !important; flex: 0 0 15px; width: 15px !important; height: 15px !important; min-height: 15px; background-color: transparent; border: 1px solid rgba(217, 217, 217, .5); border-radius: 3px; cursor: pointer; } .dac-page .hero-form-compact .form-check.hero-gdpr { padding-left: 0 !important; padding: 0 !important; margin: 6px 0 0 !important; display: flex; align-items: flex-start; gap: 9px; min-height: 0; } /* --- Security architecture: every layer listed, with a feature panel alongside. The tag on each row is a two-word summary of that row own sentence. --- */ .dac-page .dac-arch { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } .dac-page .dac-arch-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rw-border); border-radius: 16px; background: rgba(28, 29, 37, .45); overflow: hidden; } .dac-page .dac-arch-list li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid rgba(49, 52, 71, .5); transition: background .25s; } .dac-page .dac-arch-list li:last-child { border-bottom: 0; } .dac-page .dac-arch-list li:hover { background: rgba(78, 31, 163, .12); } .dac-page .dac-arch-no { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: 1px solid var(--rw-border); border-radius: 7px; background: rgba(4, 9, 20, .55); font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700; color: var(--tx-teal); } .dac-page .dac-arch-body { flex: 1; min-width: 0; } .dac-page .dac-arch-body h3 { margin-bottom: 3px; font-size: 16.5px; font-weight: 700; color: var(--rw-text-hi); } .dac-page .dac-arch-body p { font-size: var(--dac-card) !important; line-height: 1.5; color: var(--rw-text-mid); } .dac-page .dac-arch-tag { flex-shrink: 0; font-family: "Exo 2", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(168, 179, 204, .55); } /* the panel beside the list */ .dac-page .dac-arch-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 30px 28px; border: 1px solid var(--rw-border); border-radius: 16px; background: linear-gradient(165deg, rgba(78, 31, 163, .22), rgba(20, 21, 31, .95)); } .dac-page .dac-arch-panel::before { content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border: 1px solid rgba(161, 131, 224, .18); border-radius: 50%; pointer-events: none; } .dac-page .dac-arch-ico svg { width: 27px; height: 27px; } .dac-page .dac-arch-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 22px; border: 1px solid rgba(161, 131, 224, .25); border-radius: 16px; background: rgba(78, 31, 163, .25); color: var(--tx-teal); } .dac-page .dac-arch-panel h3 { margin-bottom: 12px; font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--rw-text-hi); } .dac-page .dac-arch-panel p { font-size: var(--dac-card) !important; line-height: 1.6; color: var(--rw-text-mid); } /* the checkpoint list carries the height the panel gains from the list beside it */ .dac-page .dac-arch-checks { list-style: none; margin: 22px 0 0; padding: 0; } .dac-page .dac-arch-checks li { position: relative; padding-left: 24px; font-family: Epilogue, sans-serif; font-size: var(--dac-card); font-weight: 300; line-height: 1.5; color: #d9d9d9; } .dac-page .dac-arch-checks li + li { margin-top: 10px; } .dac-page .dac-arch-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--tx-teal); } .dac-page .dac-arch-link { align-self: flex-start; margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 7px; font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 700; color: var(--rw-text-hi); border-bottom: 1px solid rgba(54, 231, 196, .4); padding-bottom: 3px; transition: color .25s, border-color .25s; } .dac-page .dac-arch-link:hover { color: var(--tx-teal); border-color: var(--tx-teal); } @media (max-width: 991px) { .dac-page .dac-arch { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575px) { .dac-page .dac-arch-list li { flex-wrap: wrap; gap: 10px 14px; padding: 15px 16px; } .dac-page .dac-arch-tag { width: 100%; padding-left: 52px; } .dac-page .dac-arch-panel { padding: 24px 20px; } .dac-page .dac-arch-panel h3 { font-size: 20px; } } /* --- Core capabilities: the section heading and intro sit in a left column, the six capabilities run two-up on the right as numbered rows. No icons. --- */ .dac-page .dac-caps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 56px; align-items: stretch; } .dac-page .dac-caps-intro { display: flex; flex-direction: column; } /* no intrinsic height, so the row is sized by the column opposite */ .dac-page .dac-caps-scroll { position: relative; min-height: 380px; border: 1px solid var(--rw-border); border-radius: 16px; background: rgba(28, 29, 37, .4); overflow: hidden; } .dac-page .dac-caps-scroll .dac-caps-list { position: absolute; inset: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(161, 131, 224, .5) transparent; } .dac-page .dac-caps-intro h2 { font-size: var(--tx-h2); line-height: 1.18; font-weight: 600; margin-bottom: 18px; } .dac-page .dac-caps-intro p { color: var(--rw-text-mid); } .dac-page .dac-caps-intro > p { margin-bottom: 22px; } .dac-page .dac-caps-list { list-style: none; margin: 0; padding: 0; } .dac-page .dac-caps-list::-webkit-scrollbar { width: 6px; } .dac-page .dac-caps-list::-webkit-scrollbar-thumb { background: rgba(161, 131, 224, .45); border-radius: 8px; } .dac-page .dac-caps-list li { display: flex; gap: 14px; padding: 22px 26px; border-bottom: 1px solid rgba(49, 52, 71, .6); } /* the last row in each column keeps the rule off the bottom edge */ .dac-page .dac-caps-list li:last-child { border-bottom: 0; } .dac-page .dac-caps-no { flex-shrink: 0; font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--tx-teal); padding-top: 3px; } .dac-page .dac-caps-list h3 { margin-bottom: 5px; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--rw-text-hi); } .dac-page .dac-caps-list p { font-size: var(--dac-card) !important; line-height: 1.55; color: var(--rw-text-mid); } @media (max-width: 1199px) { .dac-page .dac-caps { gap: 36px; } .dac-page .dac-caps-list { gap: 0 28px; } } @media (max-width: 991px) { .dac-page .dac-caps { grid-template-columns: minmax(0, 1fr); gap: 28px; } .dac-page .dac-caps-intro { position: static; } } @media (max-width: 767px) { .dac-page .dac-caps-list { grid-template-columns: minmax(0, 1fr); } .dac-page .dac-caps-list li { padding: 16px 0; } .dac-page .dac-caps-list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(49, 52, 71, .6); } .dac-page .dac-caps-list li:last-child { border-bottom: 0; } .dac-page .dac-caps-list h3 { font-size: 15.5px; } } /* --- Interface: one panel holding the six items two-up, each with an outline SVG icon. The icon inherits currentColor, so it follows the theme. --- */ .dac-page .dac-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; padding: 10px 34px; border: 1px solid var(--rw-border); border-radius: 18px; background: rgba(28, 29, 37, .45); } .dac-page .dac-ui-item { display: flex; gap: 16px; padding: 26px 0; border-bottom: 1px solid rgba(49, 52, 71, .55); } .dac-page .dac-ui-item:nth-last-child(-n+2) { border-bottom: 0; } .dac-page .dac-ui-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(54, 231, 196, .3); border-radius: 11px; background: rgba(54, 231, 196, .08); color: var(--tx-teal); transition: background .25s, border-color .25s; } .dac-page .dac-ui-ico svg { width: 20px; height: 20px; } .dac-page .dac-ui-item:hover .dac-ui-ico { background: rgba(54, 231, 196, .16); border-color: var(--tx-teal); } .dac-page .dac-ui-body { min-width: 0; } .dac-page .dac-ui-body h3 { margin-bottom: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--rw-text-hi); } .dac-page .dac-ui-body p { font-size: var(--dac-card) !important; line-height: 1.55; color: var(--rw-text-mid); } @media (max-width: 767px) { .dac-page .dac-ui { grid-template-columns: minmax(0, 1fr); padding: 6px 20px; border-radius: 14px; } .dac-page .dac-ui-item { gap: 13px; padding: 20px 0; } .dac-page .dac-ui-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(49, 52, 71, .55); } .dac-page .dac-ui-item:last-child { border-bottom: 0; } .dac-page .dac-ui-ico { width: 34px; height: 34px; border-radius: 9px; } .dac-page .dac-ui-ico svg { width: 17px; height: 17px; } .dac-page .dac-ui-body h3 { font-size: 15.5px; } } /* ===== Operations hub, ported from demo.html and re-scoped. The core ring and disc carry the animation the demo defines. ===== */ .dac-page /* icon tiles: inline SVG line icons and the site's webp icons share one frame */ .dac-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 12px; background: rgba(78, 31, 163, .28); border: 1px solid rgba(161, 131, 224, .3); color: var(--lilac); } .dac-page .dac-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dac-page .dac-ico img { width: 28px; height: 28px; object-fit: contain; } .dac-page /* ===== "what you can manage" hub: six operations wired into one custody core, .dac-page no card boxes ===== */ .dac-hub { --hub-gap: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: var(--hub-gap); align-items: center; } .dac-page .dac-hub-col { display: grid; gap: 46px; } .dac-page .dac-hub-item { position: relative; display: grid; grid-template-columns: 1fr 50px; gap: 18px; align-items: start; text-align: right; } .dac-page .dac-hub-item .dac-ico { grid-column: 2; grid-row: 1; margin: 0; transition: background .25s, border-color .25s, box-shadow .25s; } .dac-page .dac-hub-item h3 { margin-bottom: 6px; transition: color .25s; } .dac-page .dac-hub-item p { font-size: 15px; color: var(--rw-text-mid); } .dac-page .dac-hub-right .dac-hub-item { grid-template-columns: 50px 1fr; text-align: left; } .dac-page .dac-hub-right .dac-hub-item .dac-ico { grid-column: 1; } .dac-page /* connector from each icon toward the core */ .dac-hub-item::after { content: ""; position: absolute; top: 24px; width: calc(var(--hub-gap) + 14px); height: 1px; } .dac-page .dac-hub-left .dac-hub-item::after { right: calc(-1 * var(--hub-gap) - 14px); background: linear-gradient(90deg, rgba(161, 131, 224, .12), rgba(185, 164, 255, .7)); } .dac-page .dac-hub-right .dac-hub-item::after { left: calc(-1 * var(--hub-gap) - 14px); background: linear-gradient(270deg, rgba(161, 131, 224, .12), rgba(185, 164, 255, .7)); } .dac-page .dac-hub-item::before { content: ""; position: absolute; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 10px rgba(185, 164, 255, .7); } .dac-page .dac-hub-left .dac-hub-item::before { right: calc(-1 * var(--hub-gap) - 17px); } .dac-page .dac-hub-right .dac-hub-item::before { left: calc(-1 * var(--hub-gap) - 17px); } .dac-page .dac-hub-item:hover h3 { color: var(--tx-teal); } .dac-page .dac-hub-item:hover .dac-ico { background: rgba(78, 31, 163, .5); border-color: var(--tx-teal); box-shadow: 0 0 22px rgba(54, 231, 196, .25); } .dac-page .dac-hub-core { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(91, 37, 192, .45), rgba(54, 231, 196, .06) 70%, transparent); } .dac-page .dac-hub-core::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(161, 131, 224, .22); border-radius: 50%; box-shadow: inset 0 0 0 34px rgba(255, 255, 255, .012); } .dac-page .dac-hub-ring { position: absolute; inset: 22px; border-radius: 50%; border: 1.5px dashed rgba(54, 231, 196, .4); animation: dmoSpin 38s linear infinite; } .dac-page .dac-hub-ring::before, .dac-page .dac-hub-ring::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; } .dac-page .dac-hub-ring::before { top: -5px; left: calc(50% - 5px); background: var(--tx-gold); box-shadow: 0 0 14px var(--tx-gold); } .dac-page .dac-hub-ring::after { bottom: -5px; left: calc(50% - 5px); background: var(--tx-teal); box-shadow: 0 0 14px var(--tx-teal); } .dac-page .dac-hub-disc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 60%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(160deg, #3a1a86, #120f2c 75%); border: 1px solid rgba(185, 164, 255, .5); box-shadow: 0 0 60px rgba(103, 43, 250, .4), inset 0 1px 0 rgba(255, 255, 255, .12); } .dac-page .dac-hub-disc svg { width: 54px; height: 54px; fill: none; stroke: var(--tx-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dac-page .dac-hub-disc b { max-width: 80%; font-family: "Exo 2", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-align: center; text-transform: uppercase; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dac-services .dac-ico { margin: 0; } .dac-page .dac-tech .dac-ico { width: 44px; height: 44px; margin: 0; } @media (max-width: 991px) { .dac-page .dac-hub { grid-template-columns: 1fr 1fr; gap: 40px 36px; } .dac-page .dac-hub-core { grid-column: 1 / -1; grid-row: 1; width: 240px; margin-inline: auto; } .dac-page .dac-hub-col { gap: 32px; } .dac-page .dac-hub-left .dac-hub-item { grid-template-columns: 50px 1fr; text-align: left; } .dac-page .dac-hub-left .dac-hub-item .dac-ico { grid-column: 1; } .dac-page .dac-hub-item::after, .dac-page .dac-hub-item::before { display: none; } } @media (max-width: 767px) { .dac-page .dac-hub { grid-template-columns: 1fr; } .dac-page .dac-hub-core { grid-column: auto; width: 210px; } } @keyframes dmoSpin { to { transform: rotate(360deg); } } /* ===== Consultants, ported from /defi-tokenization-development/ and re-scoped ===== */ /* ===== Consultants (+ contact strip) and Platforms We've Built — modelled on /asset-tokenization-company/, using this page's card borders ===== */ .dac-page .dtk-people { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; gap: 24px; } .dac-page .dtk-person { position: relative; display: flex; align-items: center; gap: 22px; height: 100%; padding: 22px; background: var(--rw-card); border: 1px solid var(--rw-border); border-radius: 16px; transition: transform .3s, border-color .3s, background .3s, box-shadow .3s; } .dac-page .dtk-person::before { content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: 17px; background: var(--rw-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; } .dac-page .dtk-person:hover { transform: translateY(-4px); border-color: transparent; background: #1f2030; box-shadow: 0 16px 36px -12px rgba(54, 231, 196, .28); } .dac-page .dtk-person:hover::before { opacity: 1; } .dac-page .dtk-person-photo { flex: 0 0 130px; width: 130px; height: 130px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, rgba(245, 210, 85, .55), rgba(54, 231, 196, .45)); } .dac-page .dtk-person-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; background: #040914; } .dac-page .dtk-person-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .dac-page .dtk-person h3 { font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff; } .dac-page .dtk-person:hover h3 { background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dtk-person-role { margin-bottom: 10px; font-family: "Exo 2", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rw-text-mid); } .dac-page .dtk-linkedin { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 14px; border: 1px solid rgba(54, 231, 196, .35); border-radius: 50px; background: rgba(54, 231, 196, .06); color: #d9d9d9; font-family: "Exo 2", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; transition: background .25s, border-color .25s, color .25s, transform .2s; } .dac-page .dtk-linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; transform: translateY(-1px); } @media (max-width: 767px) { .dac-page .dtk-people { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575px) { .dac-page .dtk-person { flex-direction: column; gap: 16px; padding: 22px 18px; text-align: center; } .dac-page .dtk-person-photo { flex-basis: 110px; width: 110px; height: 110px; } .dac-page .dtk-person-info { align-items: center; } } /* the architecture link is a button now, and the thesis card leads with the logo */ .dac-page .dac-arch-btn { align-self: flex-start; margin-top: auto; padding: 12px 22px; font-size: 14px; } .dac-page .dac-thesis-logo { width: 150px; height: auto; margin-bottom: 22px; } .dac-page .dac-ui-ico img { width: 24px; height: 24px; object-fit: contain; } /* ===== Testimonials, ported from /white-label-tokenization-platform-development/. The cards keep their own look; the grid and stat row are this page's. ===== */ .dac-page .dac-review-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--rw-border); border-radius: 16px; background: rgba(28, 29, 37, .5); overflow: hidden; } .dac-page .dac-review-stat { padding: 22px 18px; text-align: center; } .dac-page .dac-review-stat + .dac-review-stat { border-left: 1px solid var(--rw-border); } .dac-page .dac-review-stat b { display: block; font-family: "Exo 2", sans-serif; font-size: 27px; font-weight: 700; line-height: 1.2; background: var(--rw-head-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dac-page .dac-review-stat span { font-family: Epilogue, sans-serif; font-size: 13.5px; font-weight: 300; color: var(--rw-text-mid); } .dac-page .dac-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-top: 22px; } .dac-page /* Review cards */ .review-card { background: rgba(20, 22, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-card); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; transition: var(--transition); } .dac-page .review-card:hover { border-color: rgba(161, 131, 224, 0.25); box-shadow: 0 8px 32px rgba(78, 31, 163, 0.12); } .dac-page .review-card-top { display: flex; align-items: center; justify-content: space-between; } .dac-page .review-stars { color: var(--tx-gold); font-size: 14px; letter-spacing: 1px; } .dac-page .review-text { font-size: 13px !important; color: #d9d9d9; line-height: 1.75; flex: 1; margin: 0; } .dac-page .review-author { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: auto; } .dac-page .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #4E1FA3, #36E7C4); display: flex; align-items: center; justify-content: center; font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; } .dac-page .review-author-name { font-family: "Exo 2", sans-serif; font-size: 13px; font-weight: 700; color: #fff; } .dac-page .review-author-role { font-size: 11px; color: rgba(217, 217, 217, 0.45); } /* ===== Client success stories, ported from /white-label-tokenization-platform-development/ ===== */ .dac-page /* ============================================================ SECTION 5 — CASE STUDIES ============================================================ */ .case-study-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-glass); margin-bottom: 32px; overflow-x: auto; } .dac-page .case-tab { padding: 14px 24px; font-family: "Exo 2", sans-serif; font-size: 14px; font-weight: 600; color: rgba(217, 217, 217, 0.5); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); white-space: nowrap; background: none; border-left: none; border-right: none; border-top: none; } .dac-page .case-tab.active { color: var(--accent-lavender); border-bottom-color: var(--accent-lavender); } .dac-page .case-tab:hover { color: #fff; } .dac-page .case-panel { display: none; } .dac-page .case-panel.active { display: flex; gap: 40px; flex-wrap: wrap; } .dac-page .case-panel-content { flex: 1; min-width: 280px; } .dac-page .case-panel-screen { flex: 1; min-width: 280px; } @media (max-width: 768px) { .dac-page .case-panel.active { flex-direction: column; } } /* inner copy for both ported sections */ .dac-page /* ---------- Gradient Text ---------- */ .gradient-text { background: linear-gradient(90deg, #F5D255 0%, #36E7C4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dac-page /* ---------- Buttons ---------- */ .btn-primary-gradient { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: linear-gradient(135deg, #4E1FA3 0%, #661EB9 100%); color: #fff; font-family: "Exo 2", sans-serif; font-size: 15px; font-weight: 700; border-radius: var(--radius-btn); border: none; cursor: pointer; transition: var(--transition); letter-spacing: 0.3px; white-space: nowrap; position: relative; overflow: hidden; } .dac-page .btn-primary-gradient::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #661EB9 0%, #A183E0 100%); opacity: 0; transition: var(--transition); } .dac-page .btn-primary-gradient:hover::before { opacity: 1; } .dac-page .btn-primary-gradient span { position: relative; z-index: 1; } .dac-page .case-label { display: inline-block; background: rgba(78, 31, 163, 0.25); border: 1px solid rgba(161, 131, 224, 0.25); color: var(--accent-lavender); font-family: "Exo 2", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; padding: 4px 12px; border-radius: 50px; margin-bottom: 16px; text-transform: uppercase; } .dac-page .case-heading { font-family: "Exo 2", sans-serif; font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.25; } .dac-page .case-row-label { font-family: "Exo 2", sans-serif; font-size: 12px; font-weight: 700; color: var(--tx-gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .dac-page .case-text { font-size: 14px !important; color: var(--tx-text); line-height: 1.7; margin-bottom: 16px; } .dac-page .case-points { margin-bottom: 20px; } .dac-page .case-point { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--tx-text); margin-bottom: 8px; } .dac-page .case-point-dot { width: 6px; height: 6px; background: var(--tx-teal); border-radius: 50%; flex-shrink: 0; margin-top: 7px; } .dac-page .verified-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tx-teal) !important; } .dac-page .verified-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-teal); flex-shrink: 0; } .dac-page .review-title { font-family: "Exo 2", sans-serif; font-size: 16px; font-weight: 700; color: #fff; margin: 0; } @media (max-width: 480px) { .dac-page .btn-primary-gradient, .dac-page .btn-outline-light { padding: 12px 22px; font-size: 14px; width: 100%; justify-content: center; } } .dac-page .dac-cases-block { margin-top: 0; } .dac-page .review-card.h-100 { height: 100%; } /* testimonials: the heading sits beside the stat row, as in the source layout */ .dac-page .dac-rev-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; margin-bottom: 34px; } .dac-page .dac-rev-head-copy h2 { font-size: var(--tx-h2); line-height: 1.18; font-weight: 600; margin-bottom: 14px; } .dac-page .dac-rev-head-copy p { color: var(--rw-text-mid); } .dac-page .dac-rev-head .dac-review-stats { margin: 0; } /* a section heading that reads from the left rather than centred */ .dac-page .tx-heading.dac-head-left { text-align: left; margin-inline: 0; max-width: 820px; } .dac-page .tx-heading.dac-head-left p { margin-inline: 0; } @media (max-width: 991px) { .dac-page .dac-rev-head { grid-template-columns: minmax(0, 1fr); gap: 24px; } } /* CTA box at the foot of the capabilities intro */ .dac-page .dac-caps-cta { margin-top: 0; padding: 24px 24px 22px; border: 1px solid var(--rw-border); border-radius: 16px; background: linear-gradient(160deg, rgba(78, 31, 163, .28), rgba(28, 29, 37, .8)); } .dac-page .dac-caps-cta p { font-size: var(--dac-card) !important; line-height: 1.55; color: var(--rw-text-mid); } .dac-page .dac-caps-cta h3 { margin-bottom: 10px; font-size: 19px; font-weight: 700; color: var(--rw-text-hi); } .dac-page .dac-caps-cta .tx-btn { margin-top: 20px; padding: 12px 20px; font-size: 13.5px; } @media (max-width: 991px) { .dac-page .dac-caps-scroll { min-height: 0; } .dac-page .dac-caps-scroll .dac-caps-list { position: static; } .dac-page .dac-caps-cta { margin-top: 24px; } } /* one button per tier, identical width so the three cards read as a set */ .dac-page .dac-tier-btn { display: block; width: 100%; margin-top: 26px; padding: 13px 16px; border-radius: 10px; background: linear-gradient(135deg, #4e1fa3, #661eb9); font-family: "Exo 2", sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.4; text-align: center; color: #fff; transition: background .25s, transform .2s; } .dac-page .dac-tier-btn:hover { background: linear-gradient(135deg, #661eb9, #7446be); color: #fff; transform: translateY(-2px); }