If the property isn't set (or the file 404s), the section just shows
its normal background — same graceful-fallback pattern used elsewhere
on this page. A light overlay sits between the image and the content
so heading/body text stays legible regardless of what photo is used;
adjust the overlay opacity below if a given image needs it lighter or
darker, or remove the ::before entirely for a section that doesn't
need one.
========================================================================== */
.section-bg-image {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
isolation: isolate;
}
.section-bg-image::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.88);
z-index: 0;
}
.section-bg-image>.container {
position: relative;
z-index: 1;
}
/* ==========================================================================
"From Crypto Business Idea to Full VASP License" — a row of step cards
that expand sideways when clicked (flex-grow driven, no JS width math).
One is always active. Below 768px this becomes a normal stacked
accordion instead, since a 6-way horizontal expand doesn't work on
narrow screens. JS: see "Journey selector" in finjuris-lp.js.
========================================================================== */
.journey-row {
display: flex;
gap: 1rem;
align-items: stretch;
height: 460px;
}
/* Dark section wrapper — reuses the same "black for authority" treatment
as .doc-section.section-dark elsewhere, scoped here since this section
uses the centered .qsection-head pattern instead of the left-aligned
.eyebrow/.lede one that .section-dark targets. */
.journey-dark-section {
background: radial-gradient(900px 380px at 85% -10%, rgba(220, 38, 38, 0.12), transparent 60%),
linear-gradient(160deg, #0b0f14 0%, #15191f 100%);
}
.journey-dark-section .qsection-eyebrow {
color: var(--red);
}
.journey-dark-section .qsection-head h2 {
color: #ffffff;
}
.journey-dark-section .qsection-head p {
color: #c9d0d9;
}
.journey-card {
position: relative;
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
border: none;
border-radius: 20px;
padding: 1.75rem 1.5rem;
background: var(--surface-alt);
cursor: pointer;
text-align: left;
transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
/* Photo + overlay scrim — both only apply to the active/expanded card.
The gradient here is a fallback (e.g. before JS runs); the real photo
is set as an inline background-image directly by JS when a card
becomes active (see "Journey selector" in finjuris-lp.js) — not via a
CSS custom property, since a var() containing url() resolves relative
to the STYLESHEET that reads it, not the page, which silently breaks
relative image paths. Setting it via JS/inline style resolves exactly
like every other image on this page. */
.journey-card.is-active {
background-image: linear-gradient(135deg, rgba(255, 95, 95, 0.92) 0%, rgba(230, 57, 70, 0.92) 55%, rgba(200, 30, 58, 0.92) 100%);
background-size: cover;
background-position: center;
background-color: #1e2732;
}
.journey-card>* {
position: relative;
z-index: 1;
}
.journey-card.is-active {
flex-grow: 6;
}
.journey-card-num {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
color: var(--red);
}
.journey-card.is-active .journey-card-num {
color: rgba(255, 255, 255, 0.75);
}
.journey-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ffffff;
color: var(--red);
font-size: 1.1rem;
margin-top: 1rem;
}
.journey-card.is-active .journey-card-icon {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
}
/* Collapsed-state label: vertical spine text, only visible when the card
is narrow. Fades out as the card expands. */
.journey-card-collapsed-title {
position: absolute;
left: 1.75rem;
bottom: 1.5rem;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--ink);
white-space: nowrap;
opacity: 1;
transition: opacity 0.25s ease;
}
.journey-card.is-active .journey-card-collapsed-title {
opacity: 0;
pointer-events: none;
}
/* Expanded-state body: hidden (0 width via opacity/visibility) until the
card is active, then fades in once the flex-grow transition has room. */
.journey-card-body {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease 0.15s;
margin-top: 1.5rem;
max-width: 420px;
}
.journey-card.is-active .journey-card-body {
opacity: 1;
visibility: visible;
}
.journey-card-body h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.4rem;
color: #ffffff;
margin-bottom: 0.75rem;
}
.journey-card-body p {
font-size: 0.92rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 0.75rem;
}
.journey-card-outcome {
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.journey-card-outcome strong {
color: #ffffff;
}
@media (max-width: 767.98px) {
.journey-row {
flex-direction: column;
height: auto;
gap: 0.75rem;
}
/* Closed state (default): one compact row — number, icon, title —
nothing else. The existing click handler (finjuris-lp.js) already
toggles .is-active on click; this media query is the only thing
that needs to change for mobile to behave as a true accordion. */
.journey-card {
flex-grow: 1 !important;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.25rem;
min-height: 0;
}
.journey-card-num {
margin: 0;
font-size: 1.1rem;
}
.journey-card-icon {
margin-top: 0;
width: 34px;
height: 34px;
font-size: 0.95rem;
flex-shrink: 0;
}
.journey-card-collapsed-title {
position: static;
writing-mode: horizontal-tb;
transform: none;
white-space: normal;
font-size: 0.92rem;
flex: 1;
}
.journey-card-body {
display: none;
margin-top: 1.25rem;
max-width: none;
transition: none;
}
.journey-card-body h3 {
color: var(--ink);
}
.journey-card-body p {
color: var(--muted);
}
.journey-card-outcome {
border-top-color: rgba(11, 15, 20, 0.12);
}
.journey-card-outcome strong {
color: var(--ink);
}
/* Open state — switch to a full vertical card (matching the desktop
expanded look), collapsed row hidden, full body shown. */
.journey-card.is-active {
flex-direction: column;
align-items: flex-start;
padding: 1.5rem;
}
.journey-card.is-active .journey-card-collapsed-title {
display: none;
}
.journey-card.is-active .journey-card-body {
display: block;
}
.journey-card.is-active .journey-card-body h3,
.journey-card.is-active .journey-card-body p {
color: #ffffff;
}
.journey-card.is-active .journey-card-outcome {
border-top-color: rgba(255, 255, 255, 0.25);
}
.journey-card.is-active .journey-card-outcome strong {
color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-card {
transition: none;
}
}
/* ==========================================================================
Feature card with a bleeding illustration on one side — heading +
description text constrained to ~58% width so it never overlaps the
art. Generic/reusable (not tied to any one page's content). Variants:
--dark (ink gradient), --light (surface-alt), --red (brand gradient).
========================================================================== */
.feature-image-card {
position: relative;
border-radius: 20px;
padding: 2.25rem 2.25rem;
min-height: 230px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.feature-image-card::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 45%;
height: 100%;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
transform: skewX(-20deg);
transition: left 0.75s ease;
pointer-events: none;
z-index: 2;
}
.feature-image-card:hover::after {
left: 125%;
}
@media (prefers-reduced-motion: reduce) {
.feature-image-card::after {
transition: none;
}
}
.feature-image-card h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.3rem;
max-width: 58%;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
}
.feature-image-card p {
font-size: 0.92rem;
max-width: 58%;
margin: 0;
position: relative;
z-index: 1;
}
.feature-image-card--dark {
background: linear-gradient(155deg, #0b0f14 0%, #1e2732 100%);
color: #ffffff;
}
.feature-image-card--dark h3 {
color: #ffffff;
}
.feature-image-card--dark p {
color: rgba(255, 255, 255, 0.8);
}
.feature-image-card--light {
background: var(--surface-alt);
color: var(--ink);
}
.feature-image-card--sky {
background: linear-gradient(160deg, #eaf1fe 0%, #e2ecfb 100%);
color: var(--ink);
}
.feature-image-card--sky p {
color: var(--muted);
}
.feature-image-card--light p {
color: var(--muted);
}
.feature-image-card--red {
background: linear-gradient(155deg, #ff5f5f 0%, #c81e3a 100%);
color: #ffffff;
}
.feature-image-card--red h3 {
color: #ffffff;
}
.feature-image-card--red p {
color: rgba(255, 255, 255, 0.85);
}
.feature-image-card-art {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 48%;
background-size: cover;
background-position: center;
-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
mask-image: linear-gradient(to left, #000 55%, transparent 100%);
opacity: 0.92;
}
@media (max-width: 767.98px) {
.feature-image-card h3,
.feature-image-card p {
max-width: 100%;
}
.feature-image-card {
justify-content: flex-start;
}
.feature-image-card-art {
position: static;
width: 100%;
height: 180px;
margin-top: 1.25rem;
border-radius: 14px;
-webkit-mask-image: none;
mask-image: none;
opacity: 1;
}
.feature-image-card--dark .feature-image-card-art,
.feature-image-card--red .feature-image-card-art {
background-color: rgba(255, 255, 255, 0.08);
}
.feature-image-card--light .feature-image-card-art {
background-color: rgba(11, 15, 20, 0.06);
}
}
/* ==========================================================================
"What VARA Will Expect" — dotted/network background texture (echoing a
reference layout's node-grid backdrop) behind a scattered, slightly
rotated card arrangement instead of a rigid grid. Generic/reusable.
========================================================================== */
.readiness-scatter-section {
position: relative;
overflow: hidden;
}
.readiness-scatter-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(11, 15, 20, 0.1) 1.4px, transparent 1.4px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 85%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 85%);
pointer-events: none;
z-index: 0;
}
.readiness-scatter-section>.container {
position: relative;
z-index: 1;
}
/* Hub + satellite orbit — a central status card with N compact category
cards absolutely positioned around it, on faint concentric orbit rings
(not spoke lines) echoing a reference layout's dotted-ring backdrop.
Coordinates below are hand-placed against a 1160x800 reference frame;
adjust card positions if item count changes. Desktop only (≥992px) —
.readiness-orbit-fallback carries the same content as a plain readable
grid for narrower screens. */
.readiness-orbit {
position: relative;
min-height: 800px;
margin: 2rem 0 1rem;
}
.readiness-orbit-rings {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
pointer-events: none;
}
.readiness-orbit-rings span {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 1px dashed rgba(220, 38, 38, 0.22);
transform: translate(-50%, -50%);
}
.readiness-orbit-rings span:nth-child(1) {
width: 420px;
height: 420px;
}
.readiness-orbit-rings span:nth-child(2) {
width: 640px;
height: 640px;
}
.readiness-orbit-rings span:nth-child(3) {
width: 860px;
height: 860px;
}
.readiness-orbit-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
background: #ffffff;
border-radius: 22px;
box-shadow: 0 20px 44px rgba(11, 15, 20, 0.16);
overflow: hidden;
z-index: 2;
}
.readiness-orbit-hub-banner {
position: relative;
height: 100px;
background: linear-gradient(115deg, #ffb4b4 0%, #ff5f5f 45%, #c81e3a 100%);
}
.readiness-orbit-hub-badge {
position: absolute;
top: 14px;
right: 14px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.readiness-orbit-hub-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: #ffffff;
border: 5px solid #ffffff;
box-shadow: 0 6px 16px rgba(11, 15, 20, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: var(--red);
font-size: 1.75rem;
margin: -40px auto 0;
position: relative;
}
.readiness-orbit-hub-body {
padding: 0.6rem 1.75rem 1.75rem;
text-align: center;
}
.readiness-orbit-hub h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.3rem;
color: var(--ink);
margin-bottom: 0.4rem;
}
.readiness-orbit-hub-status {
font-size: 0.86rem;
color: var(--muted);
margin-bottom: 1.1rem;
}
.readiness-orbit-progress-row {
display: flex;
align-items: center;
gap: 0.6rem;
}
.readiness-orbit-progress-label {
font-size: 0.75rem;
color: var(--muted);
flex-shrink: 0;
}
.readiness-orbit-progress {
flex: 1;
height: 7px;
border-radius: 999px;
background: var(--surface-alt);
overflow: hidden;
}
.readiness-orbit-progress span {
display: block;
height: 100%;
width: 62%;
background: linear-gradient(90deg, #ff5f5f, #c81e3a);
border-radius: 999px;
}
.readiness-orbit-callout {
position: absolute;
top: calc(50% + 145px);
left: 50%;
transform: translateX(-50%);
background: #ffffff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.65rem 1.1rem;
font-size: 0.78rem;
color: var(--ink);
box-shadow: 0 10px 24px rgba(11, 15, 20, 0.08);
max-width: 230px;
text-align: center;
z-index: 2;
}
.readiness-orbit-callout::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: #ffffff;
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
}
.readiness-orbit-item {
position: absolute;
width: 230px;
background: #ffffff;
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: 0 10px 24px rgba(11, 15, 20, 0.07);
padding: 0.75rem 0.9rem;
display: flex;
align-items: center;
gap: 0.75rem;
z-index: 1;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.readiness-orbit-item:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(11, 15, 20, 0.14);
z-index: 3;
}
.readiness-orbit-item-icon {
width: 38px;
height: 38px;
border-radius: 10px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.readiness-orbit-item-icon--red {
background: var(--red);
}
.readiness-orbit-item-icon--blue {
background: var(--blue);
}
.readiness-orbit-item-icon--amber {
background: #e08a2b;
}
.readiness-orbit-item-icon--dark {
background: #1e2732;
}
.readiness-orbit-item-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.readiness-orbit-item-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.84rem;
color: var(--ink);
line-height: 1.25;
}
.readiness-orbit-item-meta {
font-size: 0.74rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.readiness-orbit-fallback {
display: none;
}
@media (max-width: 991.98px) {
.readiness-orbit {
display: none;
}
.readiness-orbit-fallback {
display: block;
margin-top: 1rem;
}
}
/* Pill variant of the primary button, for CTAs styled after a fully
rounded reference button. */
.btn-primary-custom--pill {
border-radius: 999px;
}
/* ==========================================================================
Cal.com embed wrapper — just a card shell (matches the site's card
language: white, rounded, shadow) around the third-party embed, which
renders its own UI inside. Generic/reusable on any page.
========================================================================== */
.cal-embed-card {
max-width: 920px;
min-height: 650px;
margin: 3rem auto 0;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 24px 60px rgba(11, 15, 20, 0.14);
overflow: hidden;
padding: 1rem;
}
@media (max-width: 767.98px) {
.cal-embed-card {
min-height: 560px;
margin-top: 2rem;
border-radius: 18px;
padding: 0.5rem;
}
}
/* ==========================================================================
Meeting scheduler card — live calendar (left) + time slots and a
confirm form (right). Front-end only, no backend; generic/reusable —
see "Meeting scheduler" in finjuris-lp.js, which auto-initialises any
.scheduler-card found on the page.
========================================================================== */
.scheduler-card {
max-width: 920px;
margin: 3rem auto 0;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 24px 60px rgba(11, 15, 20, 0.14);
display: flex;
overflow: hidden;
text-align: left;
}
.scheduler-card-calendar {
flex: 1 1 55%;
padding: 2rem;
border-right: 1px solid var(--border);
}
.scheduler-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.scheduler-cal-month {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
}
.scheduler-nav-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--border);
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
cursor: pointer;
transition: background 0.15s ease;
}
.scheduler-nav-btn:hover {
background: var(--surface-alt);
}
.scheduler-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 0.7rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 0.5rem;
}
.scheduler-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.scheduler-cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
background: none;
border: none;
cursor: pointer;
}
.scheduler-cal-day.is-empty {
visibility: hidden;
cursor: default;
}
.scheduler-cal-day.is-past,
.scheduler-cal-day.is-unavailable {
color: #c7ccd2;
cursor: not-allowed;
}
.scheduler-cal-day.is-unavailable {
text-decoration: line-through;
}
.scheduler-cal-day.is-available:hover {
background: var(--surface-alt);
}
.scheduler-cal-day.is-today {
box-shadow: inset 0 0 0 1.5px var(--red);
}
.scheduler-cal-day.is-selected,
.scheduler-cal-day.is-selected:hover {
background: var(--red);
color: #ffffff;
}
.scheduler-cal-legend {
margin-top: 1.25rem;
font-size: 0.75rem;
color: var(--muted);
}
.scheduler-cal-legend i {
font-size: 0.5rem;
margin: 0 4px 0 10px;
}
.scheduler-cal-legend i:first-child {
margin-left: 0;
color: var(--red);
}
.scheduler-card-slots {
flex: 1 1 45%;
padding: 2rem;
display: flex;
flex-direction: column;
}
.scheduler-slots-head {
display: flex;
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.scheduler-slots-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(220, 38, 38, 0.08);
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.05rem;
}
.scheduler-slots-head h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1rem;
color: var(--ink);
margin: 0 0 0.2rem;
}
.scheduler-slots-head p {
font-size: 0.78rem;
color: var(--muted);
margin: 0;
}
.scheduler-slot-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
overflow-y: auto;
max-height: 280px;
margin-bottom: 1rem;
}
.scheduler-slot-placeholder {
font-size: 0.88rem;
color: var(--muted);
}
.scheduler-slot-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: #ffffff;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.scheduler-slot-btn:hover {
border-color: var(--red);
}
.scheduler-slot-btn.is-selected {
background: var(--red);
border-color: var(--red);
color: #ffffff;
}
.scheduler-slot-btn i {
opacity: 0;
}
.scheduler-slot-btn.is-selected i {
opacity: 1;
}
.scheduler-confirm-form {
border-top: 1px solid var(--border);
padding-top: 1.25rem;
margin-top: auto;
}
.scheduler-summary {
background: var(--surface-alt);
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.85rem;
color: var(--ink);
margin-bottom: 1rem;
font-weight: 600;
}
@media (max-width: 767.98px) {
.scheduler-card {
flex-direction: column;
margin-top: 2rem;
border-radius: 18px;
}
.scheduler-card-calendar {
border-right: none;
border-bottom: 1px solid var(--border);
padding: 1.5rem;
}
.scheduler-card-slots {
padding: 1.5rem;
}
}
/* ==========================================================================
Full-bleed photo section with heading/intro top-left and a floating
white card bottom-right — modeled on a reference layout the client
supplied. Generic/reusable (not tied to any one page's content).
========================================================================== */
.photo-banner-section {
position: relative;
min-height: 780px;
background-size: cover;
background-position: center;
background-color: #1e2732;
display: flex;
align-items: center;
overflow: hidden;
}
.photo-banner-section>.container {
position: relative;
z-index: 1;
height: 100%;
min-height: 780px;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.photo-banner-content {
max-width: 480px;
}
.photo-banner-content h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 2.8vw, 2.2rem);
line-height: 1.3;
color: #ffffff;
margin-bottom: 1.25rem;
}
.photo-banner-content p {
font-size: 0.95rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 0.9rem;
}
.photo-banner-card {
position: absolute;
right: 2rem;
bottom: 2rem;
width: 500px;
max-width: calc(100% - 2rem);
background: #ffffff;
border-radius: 20px;
box-shadow: 0 24px 48px rgba(11, 15, 20, 0.28);
padding: 1.5rem;
display: flex;
gap: 1.25rem;
align-items: stretch;
z-index: 2;
}
.photo-banner-card-media {
flex: 0 0 120px;
width: 120px;
border-radius: 14px;
background-size: cover;
background-position: center;
background-color: var(--surface-alt);
}
.photo-banner-card-body {
flex: 1;
min-width: 0;
}
.photo-banner-card h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 0.6rem;
}
.photo-banner-card p {
font-size: 0.88rem;
color: var(--muted);
margin-bottom: 0.5rem;
}
.photo-banner-card .btn-primary-custom {
margin-top: 0.6rem;
}
@media (max-width: 767.98px) {
.photo-banner-section {
min-height: 0;
padding-bottom: 2rem;
}
.photo-banner-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 15, 20, 0.35) 0%, rgba(11, 15, 20, 0.85) 55%, #0b0f14 100%);
z-index: 0;
}
.photo-banner-section>.container {
min-height: 0;
padding-top: 3rem;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
}
.photo-banner-content {
max-width: 100%;
}
.photo-banner-card {
position: static;
width: 100%;
max-width: 100%;
margin-top: 1.5rem;
flex-direction: column;
}
.photo-banner-card-media {
width: 100%;
height: 160px;
flex: 0 0 auto;
}
}
.activity-card {
background: linear-gradient(160deg, #ffffff 0%, #fdf3f3 100%);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem;
height: 100%;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.activity-card:hover {
box-shadow: 0 14px 30px rgba(11, 15, 20, 0.08);
transform: translateY(-2px);
}
.activity-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(220, 38, 38, 0.08);
color: var(--red);
font-size: 1.3rem;
margin-bottom: 1rem;
}
.activity-card h3 {
font-family: "Geist", sans-serif !important;
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 0.5rem;
}
.activity-card p {
font-size: 0.9rem;
color: var(--muted);
margin: 0;
}
.stage-card {
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.stage-card:focus-visible {
outline: 2px solid var(--red);
outline-offset: 3px;
}
.stage-card.is-active {
background: linear-gradient(155deg, #ff5f5f 0%, #c81e3a 100%);
box-shadow: 0 18px 36px rgba(200, 30, 58, 0.28);
}
.stage-card.is-active h3 {
color: #ffffff;
}
.stage-card.is-active p {
color: rgba(255, 255, 255, 0.85);
}
.stage-card.is-active .stage-card-icon {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.stage-card.is-active .stage-card-cta {
color: #ffffff;
}
.stage-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 1.25rem;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--red);
transition: transform 0.2s ease;
}
.stage-card.is-active .stage-card-cta i {
transform: translateX(3px);
}
.stage-card-cta i {
transition: transform 0.2s ease;
}
/* Icon badge replacing the 01/02/03 number on each stage-select box. */
.stage-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 14px;
background: #ffffff;
color: var(--red);
font-size: 1.4rem;
box-shadow: 0 8px 20px rgba(11, 15, 20, 0.08);
margin-bottom: 1.4rem;
}
.stage-card-stack {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: 100%;
}
.stage-card-stack .qcard {
min-height: 0;
flex: 1 1 auto;
}
.stage-panels {
position: relative;
height: 100%;
}
.stage-panel {
display: none;
height: 100%;
}
.stage-panel.show {
display: flex;
animation: stage-panel-fade-in 0.35s ease;
}
@keyframes stage-panel-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.stage-panel.show {
animation: none;
}
}
.stage-panel-inner {
border-radius: 20px;
padding: 2.5rem;
width: 100%;
overflow-y: auto;
}
.stage-panel-inner--amber {
background: linear-gradient(160deg, #fdeef1 0%, #f8e2e8 100%);
}
.stage-panel-inner--blush {
background: linear-gradient(160deg, #fdeef1 0%, #f8e2e8 100%);
}
.stage-panel-inner--sky {
background: linear-gradient(160deg, #fdeef1 0%, #f8e2e8 100%);
}
.stage-panel-intro {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--ink);
margin-bottom: 0.75rem;
}
.stage-panel-inner p {
color: var(--muted);
}
.stage-panel-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink);
margin: 1.5rem 0 1rem;
}
.stage-panel-closing {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(11, 15, 20, 0.1);
font-size: 0.98rem;
}
.stage-workstream-list {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.stage-workstream-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.stage-workstream-num {
flex-shrink: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.1rem;
color: var(--red);
width: 2.2rem;
}
.stage-workstream-item h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--ink);
margin: 0 0 0.35rem;
}
.stage-workstream-item p {
font-size: 0.9rem;
margin: 0;
}
.stage-check-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem 1.5rem;
}
@media (min-width: 576px) {
.stage-check-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Force single column regardless of width — for narrower contexts (e.g.
a sidebar-style detail panel) where 2 columns would cramp the text. */
.stage-check-grid.stage-check-grid--1col {
grid-template-columns: 1fr;
}
.stage-check-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.92rem;
color: var(--ink);
}
.stage-check-item i {
color: var(--red);
font-size: 1rem;
margin-top: 2px;
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.stage-panel-inner {
padding: 1.75rem;
}
.form-img img:nth-last-of-type(2) {
width: auto;
height: 38px !important;
margin-right: 8px;
border-radius: 3px;
}
.form-img img:nth-last-of-type(1) {
width: auto;
height: 55px !important;
margin-right: 8px;
border-radius: 3px;
}
.form-img {
margin-top: -2px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.stage-panel {
transition: none;
}
}
/* Mobile-only: collapse the 3 stage-select cards into a compact tab bar
(icon/description/"click to learn more" hidden, just the title) so
the expanded panel appears right below the tabs instead of after 3
full-height cards. Desktop (≥992px, where the two-column layout
applies) is completely unaffected by this block. */
@media (max-width: 991.98px) {
.stage-card-stack {
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 0.6rem;
height: auto;
margin-bottom: 0.5rem;
}
.stage-card-stack .qcard {
flex: 1 1 0;
height: 96px;
}
.stage-card {
padding: 0.6rem 0.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.stage-card-icon,
.stage-card p,
.stage-card-cta {
display: none;
}
.stage-card h3 {
font-size: 0.82rem;
line-height: 1.25;
margin: 0;
}
}
/* "Regulatory reality" section (start-crypto-venture) — overrides
fiu-styles.css's .bg-white-section, which ships with a 1px border
around the whole block. Border dropped; background kept plain
(transparent, blends into the page) rather than the light gradient
tried earlier — client preferred the plainer look. */
.doc-section.bg-gradient-section {
background: transparent;
border: none;
}
/* Increased inter-section spacing — scoped to body.scv-page only (see the
body class set in assemble.py for start-crypto-venture.html), since
.lp-section / .doc-section are shared classes used on every other page
too. Widening them globally would change spacing site-wide; this only
affects the one page that asked for more breathing room between
sections. */
body.scv-page .lp-section {
padding: 5.5rem 0;
}
body.scv-page .lp-section-tight {
padding: 3.5rem 0;
}
body.scv-page .doc-section {
margin-bottom: 3rem;
border-radius: 0;
}
/* Main section headline size, same scoping reasoning as above — this
covers "The regulatory reality" and "How we help", which both use
fiu-styles.css's shared .doc-section h2 rather than a page-specific
class. Matches the larger size just applied to the other section
headlines on this page (qsection-head, svc-head, glass-head). */
body.scv-page .doc-section h2 {
font-size: clamp(2rem, 3.6vw, 2.7rem);
}
/* Mobile: the wider desktop spacing above (5.5rem / 3rem) reads as too
much empty space on small screens, where there's less horizontal
content to balance it. Scaled back down closer to the site's original
section rhythm on narrow viewports only. */
@media (max-width: 767.98px) {
body.scv-page .lp-section {
padding: 3rem 0;
}
body.scv-page .lp-section-tight {
padding: 2.25rem 0;
}
body.scv-page .doc-section {
margin-bottom: 2rem;
}
}
/* ==========================================================================
Services grid — dark section (start-crypto-venture, between "regulatory
reality" and "How we help") — dark navy background, white cards with a
headline + description + a round "+" button, and a colored gradient
strip standing in for a photo at the bottom of each card. Modeled on a
dark-section card reference the client supplied (3 cards, each with a
distinct photographic image); adapted to 6 items as a 3x2 grid, and
each "image" is a CSS gradient rather than a real photo, consistent
with the rest of this page (avoids sourcing/licensing real images for
a client site — see the earlier qcard--dark component's comment for
the same reasoning).
========================================================================== */
.svc-section {
background: var(--ink);
padding: 5rem 0;
}
.svc-head {
max-width: 640px;
margin: 0 auto 3rem;
text-align: center;
}
.svc-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 2.7rem);
color: #ffffff;
line-height: 1.25;
margin-bottom: 0.85rem;
}
.svc-head p {
color: rgba(255, 255, 255, 0.68);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.svc-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.svc-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
}
.svc-card-top {
padding: 2rem 1.65rem 2.25rem;
min-height: 240px;
}
/* Numbered badge — sits on its own line above the heading rather than
inline with it, sized up and given rounded corners + a drop shadow
(plus a faint inset highlight along the top edge) for a raised,
dimensional chip look rather than flat colored text. */
.svc-num-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 16px;
background: linear-gradient(160deg, #ff5f5f 0%, #c81e3a 100%);
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
color: #ffffff;
box-shadow: 0 10px 20px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
margin-bottom: 1.1rem;
}
.svc-card h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
line-height: 1.35;
margin-bottom: 0.55rem;
}
.svc-card p {
font-size: 0.84rem;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
/* Image area — a background-image layer (empty path for now — drop a
real file at the path below whenever it's ready) sits over the
existing color gradient, comma-separated as two background layers.
If the image path 404s or is left as-is, that layer simply paints
nothing and the gradient underneath still shows through, so the card
never breaks or shows a missing-image icon — it just looks like the
current placeholder until a real photo is added at that path. */
.svc-card-image {
height: 130px;
width: 100%;
background-size: cover;
background-position: center;
margin-top: auto;
}
.svc-card-image--1 {
background-image: url('images/services/01-regulatory-advisory.jpg'), linear-gradient(150deg, #0b0f14 0%, #1e2732 45%, var(--red) 100%);
}
.svc-card-image--2 {
background-image: url('images/services/02-fiu-ind-registration.jpg'), linear-gradient(150deg, #ff8a8a 0%, var(--red) 55%, #7a1220 100%);
}
.svc-card-image--3 {
background-image: url('images/services/03-aml-kyc.jpg'), linear-gradient(150deg, #eafaf1 0%, #6fcf97 55%, #1f7a3d 100%);
}
.svc-card-image--4 {
background-image: url('images/services/04-web3-legal.jpg'), linear-gradient(150deg, #e2ecfb 0%, var(--blue) 55%, #0d2a6b 100%);
}
.svc-card-image--5 {
background-image: url('images/services/05-tokenisation.jpg'), linear-gradient(150deg, #fdf1e6 0%, #e08a2b 55%, #8a4d0f 100%);
}
.svc-card-image--6 {
background-image: url('images/services/06-market-entry.jpg'), linear-gradient(150deg, #0b0f14 0%, var(--blue) 55%, #7ab2f5 100%);
}
@media (max-width: 767.98px) {
.svc-section {
padding: 3rem 0;
}
}
/* ==========================================================================
"Built for serious crypto founders" — two-column section
(start-crypto-venture, right after "Legal & compliance advisory built
for digital assets"): headline + description + CTA on the left, a
stack of frosted-glass pill cards with icons on the right, modeled on
a glassmorphism reference the client supplied.
Background is a light color for now, with a background-image layer on
top (empty path — drop a real file at the path below whenever it's
ready), same pattern as the services-grid cards earlier: if the image
404s or isn't added yet, that layer simply paints nothing and the
light gradient underneath shows through, so the section never breaks.
The glass cards themselves use a more opaque white fill (not the
thinner dark-on-dark version from the first draft), so they stay
readable both against today's plain light background and against
whatever photo eventually goes here — light or dark.
========================================================================== */
.glass-section {
position: relative;
overflow: hidden;
padding: 5.5rem 0;
}
.glass-section-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('images/sections/founders-hero.jpg');
background-size: cover;
background-position: center;
background-color: transparent;
}
.glass-section::before {
/* light gradient fallback, sits behind glass-section-bg's image layer
via stacking order (this pseudo-element is painted first) */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(160deg, #fdf3f0 0%, #fdeef1 55%, #f5e9f0 100%);
}
.glass-section .container {
position: relative;
z-index: 1;
}
.glass-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.1rem, 4vw, 2.9rem);
color: var(--ink);
line-height: 1.22;
margin-bottom: 1rem;
}
.glass-head p {
color: var(--muted);
font-size: 1rem;
line-height: 1.65;
margin-bottom: 1.75rem;
max-width: 46ch;
}
.glass-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.95rem 1.75rem;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(200, 30, 58, 0.32);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.glass-cta:hover {
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(200, 30, 58, 0.4);
}
.glass-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.glass-item {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 1.1rem 1.5rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 10px 26px rgba(11, 15, 20, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 0.2s ease, background 0.2s ease;
}
.glass-item:hover {
transform: translateX(4px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72));
}
.glass-item-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(220, 38, 38, 0.12);
border: 1px solid rgba(220, 38, 38, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: var(--red);
font-size: 1.15rem;
flex-shrink: 0;
}
.glass-item span {
color: var(--ink);
font-weight: 600;
font-size: 0.96rem;
}
@media (max-width: 991.98px) {
.glass-section .row>div:first-child {
margin-bottom: 2.5rem;
}
}
/* ==========================================================================
"From business idea to compliance roadmap" — minimal editorial process
section (start-crypto-venture, after "How we help"): centered eyebrow +
two-line headline (second line in accent color), a divider, then 3
columns separated by vertical rules, each with a large numeral and a
heading/description. Modeled on a clean divider-based reference the
client supplied — kept in the site's own Archivo/Inter type system and
brand red accent rather than the reference's serif display font and
gold, to stay visually consistent with the rest of the page.
========================================================================== */
.roadmap-section {
padding: 5.5rem 0;
background: var(--surface);
}
.roadmap-head {
text-align: center;
margin-bottom: 2.5rem;
}
.roadmap-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 1rem;
}
.roadmap-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 2.7rem);
color: var(--ink);
line-height: 1.25;
margin: 0;
}
.roadmap-head h2 .accent {
color: var(--red);
}
.roadmap-divider {
border-top: 1px solid var(--border);
}
.roadmap-grid {
display: flex;
flex-wrap: wrap;
}
/* The "How we help" pillar cards used to be their own separate section
before "From business idea to compliance roadmap" — moved here, below
the 3-step grid, so both live under one combined section instead of
two adjacent ones. */
.roadmap-pillars {
margin-top: 4rem;
}
.roadmap-pillars-head {
text-align: center;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
color: var(--ink);
line-height: 1.3;
margin-bottom: 2.5rem;
}
.roadmap-col {
flex: 1 1 0;
min-width: 260px;
display: flex;
gap: 1.25rem;
padding: 2.5rem 2rem;
border-bottom: 1px solid var(--border);
}
.roadmap-col:not(:first-child) {
border-left: 1px solid var(--border);
}
.roadmap-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 2.1rem;
color: var(--red);
line-height: 1;
flex-shrink: 0;
}
.roadmap-col-text h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.08rem;
color: var(--ink);
line-height: 1.3;
margin-bottom: 0.5rem;
}
.roadmap-col-text p {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
@media (max-width: 767.98px) {
.roadmap-section {
padding: 3rem 0;
}
.roadmap-col {
flex: 1 1 100%;
padding: 1.75rem 0;
}
.roadmap-col:not(:first-child) {
border-left: none;
}
}
/* Full-width mid-page CTA banner — scoped to body.scv-page only, since
.cta-hero-banner is shared with stage-1-guide.html, which keeps the
card/white-frame version. Here the colored background sits outside
.container so it bleeds edge-to-edge, while .cta-hero-inner (new,
holding the flex row that used to live directly on .cta-hero-banner)
stays inside .container so text and buttons keep the same reading
width as the rest of the page. */
body.scv-page .cta-hero-banner {
border-radius: 0;
padding: 3.5rem 0;
}
body.scv-page .cta-hero-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
/* ==========================================================================
FAQ section (start-crypto-venture, after mid-page CTA) — pill badge,
two-line headline with an accent second line, and rounded card-style
accordion items with a circular chevron toggle, modeled on a reference
the client supplied. New .faq-accordion class rather than reusing
.dossier-accordion (used on Stage 2), since the visual style here
(rounded gray cards, circular chevron) is deliberately different from
the thin-divider accordion used elsewhere — this stays scoped to this
one section and doesn't touch Stage 2's FAQ.
========================================================================== */
.faq-section {
padding: 5.5rem 0;
background: none !important;
}
.faq-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #fdeded;
color: var(--red);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.78rem;
padding: 7px 15px;
border-radius: 999px;
margin-bottom: 1.4rem;
}
.faq-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 2.7rem);
color: var(--ink);
line-height: 1.2;
margin-bottom: 1rem;
}
.faq-head h2 .accent {
color: var(--red);
}
.faq-head p {
color: var(--muted);
font-size: 0.98rem;
line-height: 1.65;
max-width: 42ch;
}
/* Rounded card accordion */
.faq-accordion .accordion-item {
background: var(--surface-alt);
border: none;
border-radius: 14px;
overflow: hidden;
margin-bottom: 1rem;
}
.faq-accordion .accordion-item:last-child {
margin-bottom: 0;
}
.faq-accordion .accordion-header {
margin: 0;
}
.faq-accordion .accordion-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
background: transparent;
border: none;
box-shadow: none;
padding: 1.25rem 1.4rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--ink);
text-align: left;
}
.faq-accordion .accordion-button::after {
display: none;
content: none;
}
.faq-accordion .faq-chevron {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-accordion .faq-chevron i {
transition: transform 0.2s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-chevron i {
transform: rotate(180deg);
}
.faq-accordion .accordion-body {
padding: 0 1.4rem 1.5rem;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.6;
}
/* ==========================================================================
Client logo marquee (start-crypto-venture, before FAQ) — headline above
a horizontal infinite-scroll strip of client logos. Reuses the exact
same .marquee-strip/.marquee-track/.marquee-content infrastructure (and
JS in lp-crypto.js, now generalized to support more than one marquee
per page) as the text ticker below the hero — only the visual theme
differs via the .logo-marquee-strip modifier (light background instead
of dark ink) and .logo-marquee-item (instead of .item/.spark text).
Logo files don't exist yet — each item is a background-image layer
over a plain placeholder box, same graceful-fallback pattern as the
services-grid cards and the "Built for serious founders" section:
if the image path 404s or isn't added yet, the box just shows as a
muted placeholder rectangle rather than a broken-image icon.
========================================================================== */
.logo-section {
padding: 2.5rem 0;
}
.logo-section-head {
text-align: center;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
color: var(--ink);
line-height: 1.35;
margin-bottom: 2.75rem;
}
.marquee-strip.logo-marquee-strip {
background: transparent;
border-top: none;
border-bottom: none;
padding: 0;
}
.logo-marquee-item {
width: 150px;
height: 88px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
filter: grayscale(100%);
opacity: 0.7;
transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-marquee-item:hover {
opacity: 1;
filter: grayscale(0%);
}
/* ==========================================================================
"Let's discuss your crypto venture" — closing lead-capture section
(start-crypto-venture, after FAQ), rebuilt as a single bounded rounded
card split into a dark left panel and a light right panel, modeled on
a login-card reference the client supplied. No photo this time (an
earlier photo-overlay version was tried and reverted over text
legibility/placement) — the left panel is a plain dark gradient with a
brand tag, headline, description, and two small trust-feature boxes
at the bottom, mirroring the reference's "Predictive Flow / Enterprise
Shield" mini-cards but with content relevant to a legal advisory.
========================================================================== */
.discuss-section {
padding: 5.5rem 0;
}
.discuss-card {
display: flex;
flex-wrap: wrap;
border-radius: 24px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 30px 60px rgba(11, 15, 20, 0.14);
}
.discuss-card-left {
position: relative;
flex: 1 1 46%;
min-width: 320px;
display: flex;
flex-direction: column;
padding: 2.5rem;
background: radial-gradient(700px 360px at 15% 0%, rgba(255, 95, 95, 0.22), transparent 60%),
linear-gradient(165deg, #1c2024 0%, #101316 100%);
}
.discuss-card-brand {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffffff;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.98rem;
}
.discuss-card-brand i {
color: var(--red);
font-size: 1.1rem;
}
.discuss-card-left-content {
display: flex;
flex-direction: column;
padding: 0 0 2.5rem;
}
.discuss-card-left-content h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 2.8vw, 2.3rem);
color: #ffffff;
line-height: 1.25;
margin-bottom: 0.85rem;
}
.discuss-card-left-content p {
color: rgba(255, 255, 255, 0.65);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
max-width: 38ch;
}
.discuss-card-features {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 2.5rem;
}
.discuss-feature {
flex: 1 1 150px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 1rem 1.1rem;
}
.discuss-feature i {
color: var(--red);
font-size: 1.1rem;
margin-bottom: 0.6rem;
display: block;
}
.discuss-feature strong {
display: block;
color: #ffffff;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.86rem;
margin-bottom: 0.3rem;
}
.discuss-feature span {
display: block;
color: rgba(255, 255, 255, 0.55);
font-size: 0.76rem;
line-height: 1.4;
}
.discuss-card-right {
flex: 1 1 54%;
min-width: 340px;
padding: 3rem;
}
.discuss-card-right h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.35rem;
color: var(--ink);
margin-bottom: 0.5rem;
}
.discuss-card-right>p {
color: var(--muted);
font-size: 0.94rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.btn-lp-primary.btn-lp-uppercase {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.88rem;
}
/* Named advisor — avatar beside a single flowing sentence (name bolded,
then role + a line on how they can help). Now sits on the dark left
panel below the headline/description, instead of the light right
panel. Avatar is a background-image layer over a colored gradient +
initials fallback (empty image path for now — same graceful-fallback
pattern as the logo marquee and services cards). Note: unlike those
other placeholders, the "RK" initials text is a real child element,
not something a missing image automatically hides — remove the
RK from the HTML once a real photo is added at the path
below, or the initials will sit on top of the photo. */
.discuss-advisor {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: 4rem;
}
.discuss-advisor-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: url('images/testimonials/advisor-rhea-kapoor.jpg') center/cover no-repeat,
linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.discuss-advisor-avatar span {
color: #ffffff;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.92rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.discuss-advisor-text {
font-size: 0.86rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.62);
margin: 0;
}
.discuss-advisor-text strong {
color: #ffffff;
font-weight: 700;
}
@media (max-width: 767.98px) {
.discuss-card-left,
.discuss-card-right {
padding: 2rem;
}
.discuss-card-left-content {
padding: 1.75rem 0;
}
}
/* Hero checklist (start-crypto-venture) — short inline trust row between
the CTA buttons and the stats bar. */
/* ==========================================================================
Simple hero social-proof block — overlapping avatar photos + a short
trust line + stars. Reusable on any page (generic, not tied to VARA
content).
========================================================================== */
.hero-social-proof {
display: flex;
align-items: center;
gap: 1rem;
}
.hero-social-proof-avatars {
display: flex;
}
.hero-social-proof-avatars span {
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid #ffffff;
background-color: var(--surface-alt);
background-image: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
background-size: cover;
background-position: center;
box-shadow: 0 4px 10px rgba(11, 15, 20, 0.1);
margin-left: -16px;
}
.hero-social-proof-avatars span:first-child {
margin-left: 0;
}
.hero-social-proof-text {
text-align: left;
}
.hero-social-proof-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
margin: 0;
}
.hero-social-proof-sub {
font-size: 0.88rem;
color: var(--muted);
margin: 0 0 0.3rem;
}
.hero-social-proof .stars {
font-size: 1.25rem;
letter-spacing: 1px;
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.hero-social-proof {
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.hero-social-proof-sub {
margin-bottom: 0.5rem;
}
/* Centered-hero pages (e.g. meeting-scheduler.php) — center the whole
social-proof block and its text, instead of the left-aligned default
used by the VARA page's 2-column hero. */
.dlg-hero--centered .hero-social-proof {
align-items: center;
}
.dlg-hero--centered .hero-social-proof-text {
text-align: center;
}
}
.lp-hero-checklist {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-top: 1.35rem;
}
.lp-hero-checklist span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
}
.lp-hero-checklist i {
color: #1f7a3d;
font-size: 0.98rem;
flex-shrink: 0;
}
/* Scroll offset fix for anchors on nested elements (not top-level
sections) — #consultation-form (hero's lead-magnet card), #guide (the
bottom discuss-card-right panel), and #services/#stage-select/
#process/#readiness (plain sections with no natural top clearance of
their own). Other top-level section anchors (#faqs, etc.) already
clear the sticky nav fine via their own natural padding; these don't,
so the sticky nav overlapped their top edge when scrolled to directly. */
#consultation-form,
#guide,
#services,
#stage-select,
#process,
#readiness {
scroll-margin-top: calc(var(--nav-h) + 16px);
}
/* ==========================================================================
Testimonials (start-crypto-venture, before FAQ) — 6 cards, mix of
Indian and international founders, modeled on a pastel-card reference
the client supplied: small context tag, quote, optional star rating, a
large decorative quote mark, and an avatar/name/role footer. A blue
verified badge sits next to each name. Reuses the existing pastel
background classes (.pillar-card--blush/sky/peach/mint) rather than
duplicating new gradient values, cycling through them across 6 cards.
========================================================================== */
.testi-section {
padding: 5.5rem 0;
}
.testi-head {
max-width: 640px;
margin: 0 auto 2.5rem;
}
.testi-head h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 3.6vw, 2.7rem);
color: var(--ink);
line-height: 1.22;
margin-bottom: 0.85rem;
}
.testi-head p {
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.testi-card {
position: relative;
overflow: hidden;
border-radius: 18px;
padding: 1.6rem 1.6rem 1.75rem;
height: 100%;
min-height: 230px;
display: flex;
flex-direction: column;
}
.testi-tag {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.85rem;
}
.testi-quote {
font-size: 0.96rem;
font-weight: 600;
color: var(--ink);
line-height: 1.5;
margin-bottom: 0.75rem;
max-width: 88%;
}
.testi-stars {
color: #f2a33d;
font-size: 0.85rem;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.testi-mark {
position: absolute;
right: 1.4rem;
bottom: 4.6rem;
font-size: 2.2rem;
color: rgba(11, 15, 20, 0.14);
line-height: 1;
}
.testi-footer {
margin-top: auto;
padding-top: 1.25rem;
display: flex;
align-items: center;
gap: 12px;
}
/* Photo layered over a gradient fallback — same pattern as the advisor
avatar and logo marquee elsewhere on this page. Each card sets its own
two-layer background (photo url + gradient) via an inline style in the
HTML, since every avatar needs a different image; if a photo path
doesn't exist yet, that layer paints nothing and the gradient +
initials show through underneath, so nothing breaks before real
photos are added. This class only sets the structural properties
(size, shape, sizing/position) — the actual background-image comes
from each avatar's own inline style. */
.testi-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-size: cover;
background-position: center;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
}
.testi-name {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.86rem;
color: var(--ink);
}
.testi-verified {
color: #1d9bf0;
font-size: 0.86rem;
}
.testi-role {
display: block;
font-size: 0.74rem;
color: var(--muted);
}
/* Hero pull-quote avatars are now set per-slide via inline style (each
of the 4 rotating quotes has its own photo), since a single shared
CSS rule can't point at 4 different images — the old single-avatar
rule that lived here has been removed. */
/* ==========================================================================
Trust stats strip (start-crypto-venture, right after hero) — full-width
dark bar with 4 stats, modeled on a reference the client supplied: dark
navy background, faint dot-grid texture, bold white numbers, muted
blue-gray labels. Moved here from inside the hero's left column, where
it was competing for space with the headline/description/CTAs/quote.
========================================================================== */
.stats-strip {
background: var(--ink);
background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 16px 16px;
padding: 2.25rem 0;
}
.stats-strip-row {
display: flex;
flex-wrap: wrap;
}
.stats-strip-item {
flex: 1 1 0;
min-width: 150px;
text-align: center;
padding: 0.5rem 1rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.stats-strip-item:first-child {
border-left: none;
}
.stats-strip-item .v {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.6rem;
color: #ffffff;
margin-bottom: 0.3rem;
}
.stats-strip-item .k {
display: block;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 767.98px) {
.stats-strip-item {
flex: 1 1 50%;
border-left: none;
margin-bottom: 1.25rem;
}
}
/* Verified pill badge, top-right corner of each hero quote card
(separate from the small inline checkmark next to the name). */
.lp-quote-verified-pill {
position: absolute;
top: 1rem;
right: 1.25rem;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(31, 122, 61, 0.1);
color: #1f7a3d;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
}
/* Verified pill, top-right corner of each testimonial card (replaced an
earlier shield-icon version per client feedback), same style as the
hero quote cards' verified pill. */
.testi-verified-pill {
position: absolute;
top: 1.1rem;
right: 1.1rem;
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(31, 122, 61, 0.1);
color: #1f7a3d;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
z-index: 2;
}
/* ==========================================================================
"Start Your FIU-IND Registration" CTA banner (start-crypto-venture,
closing section) — replaces the earlier "discuss-card" split-panel
design. Full-width dark gradient banner, centered content, a pill
badge, headline, description, a row of feature pills, two CTA buttons,
and a small trust line — modeled on a reference the client supplied,
with their blue gradient swapped for the site's dark red/ink gradient
for brand consistency. No form here — both buttons link elsewhere
(see the HTML comment above this section for exactly where).
========================================================================== */
.cta-banner-section {
padding: 5rem 0;
}
.cta-banner-inner {
position: relative;
overflow: hidden;
border-radius: 28px;
padding: 3.5rem 2.5rem;
text-align: center;
background: radial-gradient(900px 480px at 85% 100%, rgba(255, 95, 95, 0.35), transparent 60%),
linear-gradient(155deg, #0b0f14 0%, #3d0a12 55%, #7a1220 100%);
}
/* Optional background-image variant — set the photo directly as part of
the inline background-image (combined with the tint gradient in the
SAME declaration), not via a CSS custom property: a var() containing
url() resolves relative to the stylesheet that reads it, not the
page, which silently breaks relative image paths. Example:
The gradient layer keeps the same brand-red tint/legibility as the
flat-color version, just tinting a photo instead of nothing. If no
inline background-image is set (or the file 404s), this class alone
changes nothing — the base .cta-banner-inner background still shows. */
.cta-banner-inner--bg-image {
background-size: cover;
background-position: center;
}
.cta-banner-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.cta-banner-inner h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
color: #ffffff;
line-height: 1.25;
max-width: 36ch;
margin: 0 auto 1.25rem;
}
.cta-banner-inner>p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.98rem;
line-height: 1.65;
max-width: 78ch;
margin: 0 auto 2rem;
}
.cta-banner-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.cta-banner-features span {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(11, 15, 20, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 0.82rem;
font-weight: 600;
padding: 8px 16px;
border-radius: 999px;
}
.cta-banner-features i {
color: #6fcf97;
}
.cta-banner-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.85rem;
margin-bottom: 1.75rem;
}
.cta-banner-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.92rem;
padding: 0.9rem 1.75rem;
border-radius: 10px;
}
.cta-banner-btn--primary {
background: #1f7a3d;
color: #ffffff;
}
.cta-banner-btn--primary:hover {
background: #195f30;
color: #ffffff;
}
.cta-banner-btn--secondary {
background: #ffffff;
color: var(--ink);
}
.cta-banner-btn--secondary:hover {
background: #f2f2f2;
color: var(--ink);
}
/* Red-gradient variant — used where a second CTA should carry the same
visual weight/urgency as the primary brand button, rather than the
plain white --secondary style. */
.cta-banner-btn--red {
background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%);
color: #ffffff;
}
.cta-banner-btn--red:hover {
filter: brightness(0.92);
color: #ffffff;
}
.cta-banner-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.5rem;
}
.cta-banner-trust span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.8rem;
color: #c9d3f5;
}
.cta-banner-trust i {
color: #6fcf97;
font-size: 0.75rem;
}
/* ==========================================================================
Split variant — left content / right actions, side by side (instead of
the centered single-column layout .cta-banner-inner uses). Reuses the
same .cta-banner-section background, .cta-banner-pill, .cta-banner-btn
and .cta-hero-avatars/.cta-hero-social components as-is.
========================================================================== */
.cta-banner-split {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
}
/* Full-width, edge-to-edge variant — background moves to the section
itself (no container constraint, no rounded corners), .cta-banner-split
becomes a plain flex layout wrapper instead of its own card. */
.cta-banner-section--full {
padding: 4rem 0;
background: radial-gradient(900px 480px at 85% 100%, rgba(255, 95, 95, 0.35), transparent 60%),
linear-gradient(155deg, #0b0f14 0%, #3d0a12 55%, #7a1220 100%);
}
.cta-banner-split-content {
flex: 1 1 380px;
max-width: 560px;
}
.cta-banner-split-content .cta-banner-pill {
margin-bottom: 1.25rem;
}
.cta-banner-split-content h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.3rem);
color: #ffffff;
line-height: 1.25;
margin-bottom: 0.75rem;
}
.cta-banner-split-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
.cta-banner-split-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
flex: 0 0 auto;
}
.cta-banner-split-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.cta-banner-btn--outline {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.cta-banner-btn--outline:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
@media (max-width: 991.98px) {
.cta-banner-split-actions {
align-items: flex-start;
}
}
@media (max-width: 767.98px) {
.cta-banner-section--full {
padding: 2.5rem 0;
}
.cta-banner-split {
flex-direction: column;
align-items: flex-start;
}
.cta-banner-split-content {
flex: 0 0 auto;
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.cta-banner-inner {
padding: 2.5rem 1.5rem;
}
}
.top-bar-contact a {
color: #D0253D;
}
.top-bar-contact a:hover {
color: #000;
transition: all 0.3s linear;
}
/* ==========================================================================
Minimal footer (start-crypto-venture only) — replaces the full
sitemap/disclosures footer used on every other page with just a logo,
copyright line, and Privacy/Terms links, per client request. Lives in
its own _footer-scv.html file rather than editing the shared
_footer.html, so every other page keeps the full footer untouched.
========================================================================== */
.site-footer-minimal {
background: var(--ink);
padding: 2.5rem 0;
}
.site-footer-minimal p {
font-size: 14px;
color: #ffffffa2;
margin-top: 20px;
letter-spacing: 0.4px;
}
.footer-social-vara {
display: flex;
gap: 10px;
margin: 30px 0 40px 0;
padding: 0;
}
.footer-social-vara li {
list-style: none;
width: 40px;
height: 40px;
border: 1px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.footer-social-vara li:hover {
filter: brightness(0.95);
color: #ffffff;
transform: translateY(-4px) scale(1.06);
box-shadow: 0 16px 32px rgba(200, 30, 58, 0.4);
background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%);
border: none
}
.footer-social-vara a {
color: #fff;
}
.site-footer-minimal li {
list-style: none;
}
.site-footer-minimal-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.footer-social-nav h4 {
color: #fff;
font-size: 16px;
font-weight: 800;
margin-bottom: 10px;
}
.footer-social-nav a {
color: #ffffff8b;
font-size: 14px;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.4px;
}
.footer-social-nav a:hover {
color: #ff5f5f;
margin-left: 2px;
transition: all 0.3s ease-in;
}
.footer-social-nav ul {
margin: 0;
padding: 0;
}
.site-footer-minimal-logo {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: #ffffff;
}
.site-footer-minimal-logo span {
color: var(--red);
}
.site-footer-minimal-copy {
color: rgba(255, 255, 255, 0.55);
font-size: 0.85rem;
margin: 0;
}
.site-footer-minimal-links {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
}
.site-footer-minimal-links a {
color: rgba(255, 255, 255, 0.75);
}
.site-footer-minimal-links a:hover {
color: #ffffff;
}
.site-footer-minimal-links span {
color: rgba(255, 255, 255, 0.35);
}
@media (max-width: 575.98px) {
.site-footer-minimal-inner {
flex-direction: column;
text-align: center;
}
}
/* ==========================================================================
guide-download.html — a new, separate, minimal standalone page: a
transparent floating nav (logo + one button, no menu), a hero with
marketing text on the left and the guide-download form on the right
(reusing .lead-magnet/.lp-form as-is), and the existing logo marquee
below. Nothing else on this page — no footer. Background reuses
.lp-hero's existing light grid + red radial texture from
start-crypto-venture's hero, so it stays visually consistent even
though this is a separate file.
========================================================================== */
.minimal-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: transparent;
padding: 1.75rem 0;
}
.minimal-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.minimal-nav-logo {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.15rem;
color: var(--ink);
}
.minimal-nav-logo span {
color: var(--red);
}
.minimal-nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--ink);
color: #ffffff;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.88rem;
padding: 0.7rem 1.4rem;
border-radius: 999px;
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.minimal-nav-btn i {
transition: transform 0.25s ease;
}
.minimal-nav-btn:hover {
background: var(--red);
color: #ffffff;
transform: translateY(-2px) scale(1.03);
box-shadow: 0 10px 20px rgba(220, 38, 38, 0.28);
}
.minimal-nav-btn:hover {
transform: translate(2px, -2px);
}
/* Hero needs extra top padding on this page since the nav floats over
it (position:absolute) instead of taking up its own space in flow. */
.dlg-hero {
padding-top: 7.5rem;
}
.dlg-list {
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.dlg-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.95rem;
color: var(--muted);
}
.dlg-list li i {
color: #1f7a3d;
font-size: 1.05rem;
margin-top: 2px;
flex-shrink: 0;
}
.dlg-list li strong {
color: var(--ink);
font-weight: 700;
}
@media (max-width: 767.98px) {
.dlg-hero {
padding-top: 6rem;
}
}
/* Logo marquee moved inside the hero itself on guide-download.html
(was previously its own separate section below the hero, with its
own heading — both removed per client feedback). */
.dlg-hero-marquee {
margin-top: 4rem;
}
/* Logo placeholder boxes need real contrast here, since they now sit
inside .lp-hero, whose own background is nearly the same light gray
as .logo-marquee-item's default placeholder fill — nearly invisible
until real logos are added. White fill + a visible border fixes that
regardless of what's behind them. */
.dlg-hero-marquee .logo-marquee-item {
background-color: #ffffff;
border: 1px solid rgba(11, 15, 20, 0.1);
box-shadow: 0 2px 6px rgba(11, 15, 20, 0.05);
}
/* Dots hidden on both pages that use this rotator component
(start-crypto-venture.html and guide-download.html) — .lp-quote-dots
is shared between them, so hiding it directly here affects both
rather than needing the page-specific scoping used elsewhere. */
.lp-quote-dots {
display: none;
}
/* ==========================================================================
guide-download-2.html — second variant of the guide-download page.
Same transparent nav + minimal footer as guide-download.html, but a
different flow: centered hero (heading/description/button, no form),
an avatar-stack social-proof strip, the logo marquee, a standalone
testimonial rotator section, then a final image+form card at the
bottom as the actual conversion point.
========================================================================== */
.dlg-hero--centered {
text-align: center;
}
.dlg-hero-centered {
max-width: 700px;
margin: 0 auto;
}
.dlg-hero-centered .lp-sub {
margin-left: auto;
margin-right: auto;
}
.dlg-hero-centered .btn-primary-custom {
display: inline-flex;
}
/* Avatar-stack social proof, modeled on a reference the client supplied */
.dlg-social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
text-align: left;
}
.dlg-avatar-stack {
display: flex;
}
.dlg-stack-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid #ffffff;
background-size: cover;
background-position: center;
margin-left: -14px;
box-shadow: 0 2px 6px rgba(11, 15, 20, 0.1);
}
.dlg-stack-avatar:first-child {
margin-left: 0;
}
.dlg-social-proof-text p {
font-size: 0.92rem;
color: var(--muted);
margin: 0 0 0.3rem;
}
.dlg-social-proof-text strong {
color: var(--ink);
font-weight: 700;
}
.dlg-social-stars {
color: #f2a33d;
font-size: 0.9rem;
letter-spacing: 2px;
}
/* Standalone testimonial rotator section (not inside the hero's 2-column
row this time — its own centered section further down the page) */
.dlg-testi-section {
background: #f7f9fb;
}
.dlg-final-section {
background: #f7f9fb;
padding-top: 1rem;
}
.dlg-testi-wrap {
max-width: 820px;
margin: 0 auto;
}
/* Bigger card specifically on this page's standalone testimonial
section — scoped here rather than changing .lp-quote-slide globally,
since that same component also sits inside the (narrower) hero
columns on start-crypto-venture.html and guide-download.html, where
more padding/larger text would overflow. */
.dlg-testi-wrap .lp-quote-slide {
padding: 2.5rem 2.75rem;
}
.dlg-testi-wrap .lp-quote-slides {
min-height: 200px;
}
.dlg-testi-wrap .lp-pull-quote .stars {
font-size: 1.4rem;
}
.dlg-testi-wrap .lp-pull-quote blockquote {
font-size: 1.15rem;
line-height: 1.6;
}
.dlg-testi-wrap .lp-pull-quote .testimonial-author .avatar {
width: 52px;
height: 52px;
font-size: 0.95rem;
}
.dlg-testi-wrap .lp-pull-quote .testimonial-author .name {
font-size: 1rem;
}
.dlg-testi-wrap .lp-pull-quote .testimonial-author .role {
font-size: 0.86rem;
}
.dlg-testi-wrap .lp-quote-verified-pill {
font-size: 0.78rem;
padding: 5px 12px;
}
/* Final image + form card */
.dlg-final-card {
display: flex;
flex-wrap: wrap;
border-radius: 24px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 30px 60px rgba(11, 15, 20, 0.12);
}
.dlg-final-card-image {
position: relative;
flex: 1 1 26%;
min-width: 280px;
min-height: 560px;
display: flex;
flex-direction: column;
padding: 1.75rem;
/* Image link to add later — drop the real photo at this exact path
and it'll appear automatically (same graceful-fallback pattern used
everywhere else on this site: paints nothing if missing, so the
dark gradient underneath shows through until then). */
background: url('images/sections/guide-final-cta.jpg') center/cover no-repeat,
linear-gradient(160deg, #0b0f14 0%, #3d0a12 55%, #7a1220 100%);
}
.dlg-final-card-testi {
position: relative;
z-index: 1;
margin-top: auto;
}
.dlg-final-card-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(11, 15, 20, 0.35) 0%, rgba(11, 15, 20, 0.05) 100%);
}
.dlg-final-card-form {
flex: 1 1 38%;
min-width: 320px;
display: flex;
align-items: center;
}
.dlg-final-card-form .lead-magnet {
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
width: 100%;
padding: 2.5rem;
}
@media (max-width: 767.98px) {
.dlg-final-card {
flex-direction: column;
}
.dlg-final-card-image {
min-height: 220px;
flex: 1 1 auto;
}
.dlg-final-card-form {
flex: 1 1 auto;
}
.dlg-final-card-form .lead-magnet {
padding: 2rem;
}
.dlg-final-card-included {
flex: 1 1 auto;
}
}
/* guide-download-2.html specific adjustments */
/* 1. H1 was wrapping to 3 lines because the shared .lp-hero h1 rule caps
width at 22ch — too narrow for this page's wider centered layout.
Widen it here so it settles into 2 lines instead. */
.dlg-hero--centered .dlg-hero-centered h1 {
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
font-size: 2.2rem !important;
line-height: 1.25 !important;
}
/* 2. Logo marquee hidden on guide-download-2.html only (this class is
also used by guide-download.html, which should keep its marquee) */
body.dlg2-page .dlg-hero-marquee {
display: none;
}
/* 3. Social proof restructured into 3 stacked lines (name count, then
sub-line, then stars — was previously one wrapped paragraph + stars). */
.dlg-social-proof-text p {
margin: 0;
}
.dlg-social-proof-text .dlg-social-line1,
.dlg-social-proof-text .dlg-social-line2 {
display: block;
font-size: 0.92rem;
color: var(--muted);
}
.dlg-social-proof-text .dlg-social-line1 strong {
color: var(--ink);
font-weight: 700;
}
/* 4. Bigger stars and avatars */
.dlg-social-stars {
font-size: 1.3rem;
margin-top: 0.35rem;
}
.dlg-stack-avatar {
width: 56px;
height: 56px;
margin-left: -18px;
}
/* Third column added to the final card — "What's Included?" heading +
checklist, reusing .dlg-list (same styling already used in
guide-download.html's hero) rather than a new list component. */
.dlg-final-card-included {
flex: 1 1 36%;
min-width: 260px;
padding: 2.5rem 2rem;
background: #f7f9fb;
border-right: 1px solid var(--border);
}
.dlg-final-card-included h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.9rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 1.5rem;
}
/* Image link to add later — drop the real photo/illustration at this
exact path and it'll appear automatically (same graceful-fallback
pattern used everywhere else on this page: paints nothing if missing,
so the gradient underneath shows through until then). */
.dlg-final-card-included-image {
height: 280px;
border-radius: 14px;
margin-bottom: 1.75rem;
background: url('images/sections/guide-included-preview.jpg') center/cover no-repeat,
linear-gradient(160deg, #ff5f5f 0%, #c81e3a 100%);
}
.dlg-final-card-included h3 {
font-family: "Geist", sans-serif !important;
font-weight: 800;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 1.25rem;
}
.dlg-final-card-included .dlg-list {
margin-top: 0;
gap: 0.5rem;
}
.dlg-final-card-included .dlg-list li {
font-size: 0.88rem;
}
@media (max-width: 991.98px) {
.dlg-final-card-included {
border-right: none;
border-top: none;
border-bottom: 1px solid var(--border);
}
}
/* Wider container for the 3-column final card specifically — the
standard Bootstrap .container caps at 1320px, which felt cramped once
a third column was added. */
.dlg-final-container {
max-width: 1500px;
}
/* Different pastel background per testimonial slide, on this page's
final-card rotator only — .dlg-testi-wrap doesn't exist anywhere
else, so this is naturally scoped without touching the hero rotators
on start-crypto-venture.html or guide-download.html, which stay white. */
.dlg-testi-wrap .lp-quote-slide:nth-child(1) {
background: #fdeef1;
}
.dlg-testi-wrap .lp-quote-slide:nth-child(2) {
background: #eaf2fd;
}
.dlg-testi-wrap .lp-quote-slide:nth-child(3) {
background: #fdf3e6;
}
.dlg-testi-wrap .lp-quote-slide:nth-child(4) {
background: #e9f7ef;
}
.dlg-testi-wrap .lp-quote-slide:nth-child(5) {
background: #f1eefc;
}
.dlg-testi-wrap .lp-quote-slide:nth-child(6) {
background: #fdeee6;
}
/* Hero bottom border removed for the centered dlg-hero variant — scoped
via the .dlg-hero--centered class already on the section (not a body
class), so any page using this hero pattern gets it automatically. */
.lp-hero.dlg-hero--centered {
border-bottom: none;
}
/* guide-download.html restructure: hero's right column now holds an
image card (was the guide form) instead, and the social proof block
(reused from guide-download-2.html) needed left-alignment here since
this hero is a normal 2-column layout, not the centered one that
component was originally built for. Scoped to dlg1-page so
guide-download-2.html's centered version is untouched. */
body.dlg1-page .dlg-social-proof {
justify-content: flex-start;
margin-left: 0;
}
/* Hero image card, replacing the guide form on the right side */
.dlg-hero-image-card {
min-height: 600px;
border-radius: 20px;
background: url('images/sections/guide-hero-preview.jpg') center/cover no-repeat,
linear-gradient(160deg, #7a1220 0%, #3d0a12 55%, #17070a 100%);
box-shadow: 0 30px 60px rgba(11, 15, 20, 0.14);
}
/* Testimonial (left) + form (right) section below the hero */
.dlg-testi-form-section {
background: #f7f9fb;
}
@media (max-width: 767.98px) {
.dlg-hero-image-card {
min-height: 260px;
}
}
/* guide-download.html testimonial+form section — big heading above the
testimonial card, matching the "less weight, bigger size" treatment
used for the heading in guide-download-2.html's final card. Scoped to
.dlg-testi-form-section, which only exists on this page. */
.dlg-testi-col-heading {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.9rem;
line-height: 1.25;
color: var(--ink);
margin-bottom: 1.5rem;
}
/* Bigger testimonial card + a different pastel background per slide,
scoped to this page's testimonial+form section only (the identical
rotator component embedded elsewhere — start-crypto-venture.html's
hero, guide-download-2.html's final card — stays as it was). */
.dlg-testi-form-section .lp-quote-slides {
min-height: 260px;
}
.dlg-testi-form-section .lp-quote-slide {
padding: 2.5rem 2.75rem;
}
.dlg-testi-form-section .lp-pull-quote .stars {
font-size: 1.4rem;
}
.dlg-testi-form-section .lp-pull-quote blockquote {
font-size: 1.15rem;
line-height: 1.6;
}
.dlg-testi-form-section .lp-pull-quote .testimonial-author .avatar {
width: 52px;
height: 52px;
font-size: 0.95rem;
}
.dlg-testi-form-section .lp-pull-quote .testimonial-author .name {
font-size: 1rem;
}
.dlg-testi-form-section .lp-pull-quote .testimonial-author .role {
font-size: 0.86rem;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(1) {
background: #fdeef1;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(2) {
background: #eaf2fd;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(3) {
background: #fdf3e6;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(4) {
background: #e9f7ef;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(5) {
background: #f1eefc;
}
.dlg-testi-form-section .lp-quote-slide:nth-child(6) {
background: #fdeee6;
}
/* ==========================================================================
Back-to-top floating button — bottom-right, fixed, fades in once the
page has scrolled down. Hover lifts/scales it and reveals a top-
positioned speech-bubble tooltip. Generic/reusable on any page.
========================================================================== */
.back-to-top-btn {
position: fixed;
right: 3.5rem;
bottom: 2.75rem;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%);
color: #ffffff;
font-size: 1.35rem;
box-shadow: 0 10px 24px rgba(200, 30, 58, 0.32);
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.back-to-top-btn.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.back-to-top-btn:hover {
filter: brightness(0.95);
color: #ffffff;
transform: translateY(-4px) scale(1.06);
box-shadow: 0 16px 32px rgba(200, 30, 58, 0.4);
}
.back-to-top-btn i {
transition: transform 0.2s ease;
}
.back-to-top-btn:hover i {
transform: translateY(-2px);
}
/* CSS-only tooltip, no extra markup beyond the data-tooltip attribute.
Speech-bubble style: white bubble above the button, a small rotated
square peeking out from behind its bottom edge as the pointer. */
.back-to-top-btn::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #ffffff;
color: var(--muted);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
padding: 14px 22px;
border-radius: 16px;
box-shadow: 0 16px 32px rgba(11, 15, 20, 0.14);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 1;
}
.back-to-top-btn::before {
content: "";
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 3px;
box-shadow: 3px 3px 6px rgba(11, 15, 20, 0.06);
transform: translateX(-50%) translateY(12px) rotate(45deg);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 0;
}
.back-to-top-btn:hover::after,
.back-to-top-btn:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.back-to-top-btn:hover::before {
transform: translateX(-50%) translateY(0) rotate(45deg);
}
@media (max-width: 767.98px) {
.back-to-top-btn {
right: 1.5rem;
bottom: 1.5rem;
width: 42px;
height: 42px;
font-size: 1rem;
}
/* Tooltips don't make sense on touch devices with no hover state. */
.back-to-top-btn::after,
.back-to-top-btn::before {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.back-to-top-btn,
.back-to-top-btn i {
transition: none;
}
}
.logo-track {
width: 100%;
overflow: hidden;
position: relative;
}
.logo-slide {
display: flex;
align-items: center;
gap: 80px;
width: max-content;
animation: marquee 25s linear infinite;
}
.logo-slide img {
height: 80px;
width: 150px;
opacity: 0.8;
transition: 0.3s;
object-fit: contain;
}
.form-img img:nth-last-of-type(2) {
width: auto;
height: 47px;
margin-right: 8px;
border-radius: 3px;
}
.form-img img:nth-last-of-type(1) {
width: auto;
height: 71px;
margin-right: 8px;
border-radius: 3px;
}
.form-img {
margin-top: -14px;
}
.site-footer-minimal-logo img {
width: 94px;
}
/* Phone Country Code Start */
.lp-phone-code-menu {
max-height: 320px;
overflow-y: auto;
width: 280px;
}
.lp-phone-search-wrap {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
padding-top: .5rem;
}
.lp-phone-code-menu .dropdown-item img {
width: 20px;
margin-right: .5rem;
}
.lp-phone-code-menu-code {
margin-left: auto;
color: #888;
font-size: .85em;
}
.lp-phone-code-menu .dropdown-item {
display: flex;
align-items: center;
}
/* Phone Country Code Ends */
/* Form Messgae Display CSS START */
.form-success-message {
text-align: center;
padding: 40px 25px;
margin-top: 20px;
border: 1px solid #dfe5e1;
border-radius: 12px;
background: #f8faf9;
}
.form-success-message .success-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #198754;
color: #fff;
font-size: 28px;
font-weight: 600;
}
.form-success-message h3 {
margin-bottom: 12px;
font-size: 24px;
}
.form-success-message p {
max-width: 500px;
margin: 0 auto;
line-height: 1.7;
color: #555;
}
#form-message {
padding: 20px;
border-radius: 10px;
margin-top: 20px;
font-size: 15px;
line-height: 1.6;
}
#form-message.success {
background: #f0f9f4;
border: 1px solid #b7dfc5;
color: #176b3a;
}
#form-message.error {
background: #fff5f5;
border: 1px solid #f1b8b8;
color: #a52828;
}
/* Form Messgae Display CSS END */
/* ==========================================================================
finjuris-home.css
Page-specific stylesheet for the Home page ONLY.
Loaded AFTER finjuris-lp.css (shared design system) — reuses existing
tokens (--ink, --red, --surface, --muted, --border, --nav-h, fonts) and
shared utility classes (.btn-primary-custom, .reveal, .eyebrow) instead
of redefining them. Every new class here is prefixed fj-home- so it
can never collide with the shared stylesheet or other pages.
========================================================================== */
/* ==========================================================================
Hero
========================================================================== */
.fj-home-hero {
position: relative;
overflow: hidden;
padding: calc(var(--nav-h) + 0.1rem) 0 4rem;
text-align: center;
color: var(--muted);
background-color: var(--surface-alt);
/* background-image (photo + light gradient wash for text contrast) is set
inline on the tag in the HTML — swap the url() there when the
asset is ready, no CSS edit needed. background-size/position below are
fallbacks in case the inline style is ever removed. */
background-size: cover;
background-position: center;
}
.fj-home-flag-bg {
width: 100%;
height: 100%;
background: url(../assets/images/home/banner-bg.png) left bottom no-repeat;
background-size: cover;
position: absolute;
}
.fj-home-hero .container {
position: relative;
z-index: 1;
}
/* Faint diamond/argyle grid texture across the hero — two crossing sets of
diagonal lines, sits above the background photo/gradient but below the
content. Very light so it reads as texture, not a pattern that competes
with the heading/body text. Masked so it fades out behind the heading
and description (roughly the upper-center of the hero) and stays fully
visible toward the edges and lower down. */
.fj-home-hero-inner {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Eyebrow-style badge pill, e.g. "Law for What's Next" */
.fj-home-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.55rem 1.15rem;
border-radius: 999px;
background: linear-gradient(135deg, #ffffff 0%, #fdeceb 100%);
border: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(11, 15, 20, 0.06);
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink);
margin-bottom: 1.75rem;
}
.fj-home-badge i {
color: var(--red);
font-size: 0.95rem;
}
.fj-home-hero h1 {
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
line-height: 1.14;
font-weight: 800;
color: var(--ink);
max-width: 34ch;
margin-bottom: 1.5rem;
}
.fj-home-hero-sub {
font-family: "Inter", sans-serif !important;
font-size: clamp(1rem, 1.4vw, 1.15rem);
color: #434952;
max-width: 78ch;
margin: 0 auto 2.5rem;
font-weight: 400;
}
.fj-home-hero-cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
/* Secondary CTA — transparent/ink outline, fills solid ink on hover.
Pairs with the shared .btn-primary-custom (solid red gradient) so the
two hero buttons read as primary vs. secondary, not two competing CTAs. */
.fj-home-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
background: #ffffff;
border: 1px solid #b8bec7;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fj-home-btn-secondary:hover {
background: var(--ink);
border-color: var(--ink);
color: #ffffff;
transform: translateY(-2px);
}
/* Circular flag row under the hero CTAs */
.fj-home-flags-label {
margin-top: 2.75rem;
margin-bottom: 1rem;
font-family: var(--font-body);
font-size: 0.80rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
color: #000;
}
.fj-home-flags {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.9rem;
}
.fj-home-flag {
display: block;
width: 43px;
height: 43px;
border-radius: 50%;
overflow: hidden;
background: #ffffff;
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(11, 15, 20, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fj-home-flag img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fj-home-flag:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(11, 15, 20, 0.16);
}
/* ==========================================================================
Services marquee — two rows, opposite directions, infinite loop.
Lives inside the hero, below the flag row, so it's scoped there for
spacing rather than being its own padded section.
========================================================================== */
.fj-home-hero .fj-home-marquee-belt {
position: relative;
z-index: 1;
margin-top: 3.5rem;
overflow-x: hidden;
}
/* Each row fades out at the left/right edges so cards don't hard-cut.
overflow-x hides the looping track's horizontal overflow; overflow-y is
left visible (with a little vertical padding) so card box-shadows and
the hover lift aren't clipped at the top/bottom edge of the row. */
.fj-home-marquee-row {
overflow-x: hidden;
overflow-y: visible;
padding: 0.6rem 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.fj-home-marquee-row+.fj-home-marquee-row {
margin-top: 1.1rem;
}
.fj-home-marquee-track {
display: flex;
width: max-content;
gap: 1rem;
will-change: transform;
}
.fj-home-marquee-track.fj-home-marquee-left {
animation: fjHomeMarqueeLeft 38s linear infinite;
}
.fj-home-marquee-track.fj-home-marquee-right {
animation: fjHomeMarqueeRight 38s linear infinite;
}
/* Pause both rows together when the whole belt is hovered */
.fj-home-marquee-belt:hover .fj-home-marquee-track {
animation-play-state: paused;
}
@keyframes fjHomeMarqueeLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes fjHomeMarqueeRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
.fj-home-service-card {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
width: 168px;
padding: 1.6rem 1rem;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fj-home-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(11, 15, 20, 0.1);
border-color: rgba(220, 38, 38, 0.35);
}
.fj-home-service-icon {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
}
/* Rotate icon-circle tone through the palette instead of one flat color */
.fj-home-service-card:nth-child(3n+1) .fj-home-service-icon {
background: rgba(220, 38, 38, 0.1);
color: var(--red);
}
.fj-home-service-card:nth-child(3n+2) .fj-home-service-icon {
background: rgba(29, 78, 216, 0.1);
color: var(--blue);
}
.fj-home-service-card:nth-child(3n) .fj-home-service-icon {
background: rgba(11, 15, 20, 0.06);
color: var(--ink);
}
.fj-home-service-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
color: var(--ink);
text-align: center;
line-height: 1.3;
}
@media (max-width: 767.98px) {
.fj-home-hero {
padding: calc(var(--nav-h) + 0rem) 0 2.5rem
}
.fj-home-hero h1 {
max-width: 100%;
}
.fj-home-hero .fj-home-marquee-belt {
margin-top: 2.5rem;
}
.fj-home-hero::before {
background-image:
repeating-linear-gradient(45deg, rgba(11, 15, 20, 0.04) 0, rgba(11, 15, 20, 0.04) 1px, transparent 1px, transparent 56px),
repeating-linear-gradient(-45deg, rgba(11, 15, 20, 0.04) 0, rgba(11, 15, 20, 0.04) 1px, transparent 1px, transparent 56px);
-webkit-mask-image: radial-gradient(ellipse 320px 380px at 50% 30%, transparent 0%, transparent 40%, #000 85%);
mask-image: radial-gradient(ellipse 320px 380px at 50% 30%, transparent 0%, transparent 40%, #000 85%);
}
.fj-home-service-card {
width: 140px;
padding: 1.3rem 0.85rem;
}
.fj-home-marquee-track.fj-home-marquee-left,
.fj-home-marquee-track.fj-home-marquee-right {
animation-duration: 26s;
}
}
/* ==========================================================================
Intro statement — dark, two columns. Flat charcoal background (distinct
from the red-tinted near-black of .fj-home-global) so the two dark
sections don't blend into each other.
========================================================================== */
.fj-home-intro {
position: relative;
padding: 4.5rem 0;
background: var(--surface-alt);
}
.fj-home-intro-inner {
position: relative;
z-index: 1;
}
.fj-home-intro-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
}
.fj-home-intro-text {
max-width: 780px;
}
.fj-home-intro-text h2 {
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
font-weight: 500;
line-height: 1.3;
color: var(--ink);
margin-bottom: 1.25rem;
}
.fj-home-intro-text h2 .is-muted {
color: var(--muted);
}
.fj-home-intro-text h2 .is-red-text {
color: var(--red);
}
.fj-home-hero h1 .is-red-text {
color: var(--red);
}
.fj-home-intro-text p {
font-family: var(--font-body);
font-size: 1rem;
color: #9aa2ab;
line-height: 1.6;
max-width: 60ch;
margin: 0;
}
.fj-home-intro-tags {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
max-width: 460px;
}
.fj-home-intro-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.5rem 0.9rem;
border-radius: 999px;
border: 1px solid;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.82rem;
white-space: nowrap;
cursor: default;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fj-home-intro-tag:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(11, 15, 20, 0.14);
color: #ffffff;
}
.fj-home-intro-tag:hover i {
color: #ffffff;
}
.fj-home-intro-tag.is-orange {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.4);
color: #b45309;
}
.fj-home-intro-tag.is-blue {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.4);
color: #1d4ed8;
}
.fj-home-intro-tag.is-purple {
background: rgba(168, 85, 247, 0.12);
border-color: rgba(168, 85, 247, 0.4);
color: #7e22ce;
}
.fj-home-intro-tag.is-green {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.4);
color: #15803d;
}
.fj-home-intro-tag.is-amber {
background: rgba(234, 179, 8, 0.12);
border-color: rgba(234, 179, 8, 0.4);
color: #a16207;
}
.fj-home-intro-tag.is-cyan {
background: rgba(6, 182, 212, 0.12);
border-color: rgba(6, 182, 212, 0.4);
color: #0e7490;
}
.fj-home-intro-tag.is-red {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.4);
color: #b91c1c;
}
.fj-home-intro-tag.is-gray {
background: rgba(156, 163, 175, 0.12);
border-color: rgba(156, 163, 175, 0.35);
color: #4b5563;
}
.fj-home-intro-tag.is-teal {
background: rgba(20, 184, 166, 0.12);
border-color: rgba(20, 184, 166, 0.4);
color: #0f766e;
}
.fj-home-intro-tag.is-pink {
background: rgba(236, 72, 153, 0.12);
border-color: rgba(236, 72, 153, 0.4);
color: #be185d;
}
.fj-home-intro-tag.is-indigo {
background: rgba(99, 102, 241, 0.12);
border-color: rgba(99, 102, 241, 0.4);
color: #4338ca;
}
.fj-home-intro-tag.is-lime {
background: rgba(132, 204, 22, 0.12);
border-color: rgba(132, 204, 22, 0.4);
color: #4d7c0f;
}
/* Hover — solid fill using each tone's own color, white text/icon */
.fj-home-intro-tag.is-orange:hover {
background: #b45309;
border-color: #b45309;
color: #ffffff;
}
.fj-home-intro-tag.is-blue:hover {
background: #1d4ed8;
border-color: #1d4ed8;
color: #ffffff;
}
.fj-home-intro-tag.is-purple:hover {
background: #7e22ce;
border-color: #7e22ce;
color: #ffffff;
}
.fj-home-intro-tag.is-green:hover {
background: #15803d;
border-color: #15803d;
color: #ffffff;
}
.fj-home-intro-tag.is-amber:hover {
background: #a16207;
border-color: #a16207;
color: #ffffff;
}
.fj-home-intro-tag.is-cyan:hover {
background: #0e7490;
border-color: #0e7490;
color: #ffffff;
}
.fj-home-intro-tag.is-red:hover {
background: #b91c1c;
border-color: #b91c1c;
color: #ffffff;
}
.fj-home-intro-tag.is-gray:hover {
background: #4b5563;
border-color: #4b5563;
color: #ffffff;
}
.fj-home-intro-tag.is-teal:hover {
background: #0f766e;
border-color: #0f766e;
color: #ffffff;
}
.fj-home-intro-tag.is-pink:hover {
background: #be185d;
border-color: #be185d;
color: #ffffff;
}
.fj-home-intro-tag.is-indigo:hover {
background: #4338ca;
border-color: #4338ca;
color: #ffffff;
}
.fj-home-intro-tag.is-lime:hover {
background: #4d7c0f;
border-color: #4d7c0f;
color: #ffffff;
}
@media (max-width: 767.98px) {
.fj-home-intro {
padding: 3rem 0;
}
.fj-home-intro-inner {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
}
/* ==========================================================================
Stats bar — dark, 4 columns with dividers. Warm charcoal vignette
background (radial glow toward center, darker at the edges) with a
subtle dot-grid texture.
========================================================================== */
.fj-home-stats-bar {
position: relative;
overflow: hidden;
padding: 2.75rem 0;
background: radial-gradient(1000px 600px at 40% 30%, #a10208 0%, #8b0107 70%);
}
.fj-home-stats-bar::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 16px 16px;
}
.fj-home-stats-bar-row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.fj-home-stats-bar-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0 1.5rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.fj-home-stats-bar-item:last-child {
border-right: none;
}
.fj-home-stats-bar-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.3rem, 2vw, 1.7rem);
color: #ffffff;
}
.fj-home-stats-bar-label {
font-family: var(--font-body);
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.85);
text-align: center;
}
@media (max-width: 767.98px) {
.fj-home-stats-bar {
padding: 2rem 0;
}
.fj-home-stats-bar-row {
flex-wrap: wrap;
row-gap: 1.5rem;
}
.fj-home-stats-bar-item {
flex: 0 0 50%;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 1rem;
}
.fj-home-stats-bar-item:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* ==========================================================================
About / intro — two columns: text left, video card right
========================================================================== */
.fj-home-about {
padding: 5.5rem 0;
background: var(--surface);
}
.fj-home-about-text h2 {
font-size: clamp(1.8rem, 4.2vw, 3.0rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.fj-home-about-text .lede {
margin-bottom: 1.25rem;
font-weight: 400;
}
.fj-home-about-text p {
margin-bottom: 1.25rem;
}
.fj-home-about-text p:last-of-type {
margin-bottom: 1.75rem;
}
.fj-home-about-text strong {
color: var(--ink);
font-weight: 700;
}
/* Red arrow text-link — reads as the on-brand accent CTA, distinct from
the shared .lp-secondary-link (which is blue, used elsewhere on site) */
.fj-home-link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
color: var(--red);
}
.fj-home-link-arrow i {
transition: transform 0.2s ease;
}
.fj-home-link-arrow:hover {
color: var(--red-dark);
}
.fj-home-link-arrow:hover i {
transform: translateX(4px);
}
/* Video card — 16:9-ish frame, poster image + play button until clicked,
at which point finjuris-home.js swaps in a real