/* =============================================================
LogiPath — variables.css (single source of truth)
============================================================= */
:root {
/* ---------- Palette ---------- */
--navy: #393E66;
--navy-deep: #2a2e4d;
--navy-ink: #21243d;
--light: #F4F5FA;
--light-soft: #ECEEF6;
--coral: #F73760;
--coral-deep: #d92a52;
--teal: #2DD4BF;
--teal-soft: rgba(45,212,191,.16);
--ivory: #F4F5FA;
--ink: #1A1D33;
--muted: #6B6F8A;
--muted-dark: rgba(244,245,250,.66);
/* ---------- Type ---------- */
--ff-display: "Cormorant Garamond", "Times New Roman", serif;
--ff-ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
--ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* fluid scale */
--fs-hero: clamp(2.4rem, 5.6vw, 4.6rem);
--fs-display: clamp(1.8rem, 3.6vw, 3rem);
--fs-section: clamp(1.6rem, 3vw, 2.4rem);
--fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
--fs-body: 1rem;
--fs-small: .875rem;
--fs-mono-xl: clamp(2rem, 3.4vw, 3rem);
--fs-mono-md: 1rem;
/* ---------- Spacing ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 72px;
--s-9: 112px;
--s-10: 160px;
--radius-s: 8px;
--radius-m: 14px;
--radius-l: 24px;
--radius-pill: 999px;
/* ---------- Continuous viewport-fixed grid ----------
--grid-dark = navy lines (paint over light backgrounds)
--grid-light = white lines (paint over dark backgrounds)
Both use 28px raster, viewport-fixed so lines stay continuous across section borders. */
--grid-dark:
repeating-linear-gradient(0deg, rgba(57,62,102,.09) 0, rgba(57,62,102,.09) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(90deg, rgba(57,62,102,.09) 0, rgba(57,62,102,.09) 1px, transparent 1px, transparent 28px);
--grid-light:
repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 28px);
/* ---------- Shadows (derived from navy, never pure black) ---------- */
--shadow-soft: 0 6px 20px rgba(57,62,102,.10);
--shadow-card: 0 14px 40px rgba(33,36,61,.14);
--shadow-pop: 0 20px 60px rgba(33,36,61,.22);
--shadow-glass: 0 18px 60px rgba(33,36,61,.45);
--shadow-fab: 0 10px 28px rgba(247,55,96,.42);
/* ---------- Layout ---------- */
--container: 1200px;
--gutter: clamp(20px, 4vw, 56px);
--nav-h: 72px;
}
/* =============================================================
Reset / base
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--ff-ui);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--ink);
background-color: var(--light);
background-image: var(--grid-dark);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
/* ---------- Focus ring (keyboard) ---------- */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 4px;
}
/* =============================================================
Sections — dark/light rhythm
============================================================= */
.section {
position: relative;
padding: var(--s-9) var(--gutter);
}
.section.dark {
color: var(--ivory);
background-color: var(--navy-ink);
background-image: var(--grid-light), linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, var(--navy-ink) 100%);
background-attachment: fixed, scroll;
}
.section.light {
color: var(--ink);
background-color: var(--light);
/* Re-apply the navy grid here — the opaque background-color above would
otherwise cover the body grid and leave light sections blank. */
background-image: var(--grid-dark);
background-attachment: fixed;
}
.section .container { max-width: var(--container); margin: 0 auto; }
/* =============================================================
Typography classes
============================================================= */
.display-italic {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
letter-spacing: -.005em;
line-height: 1.05;
}
.hero-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: var(--fs-hero);
line-height: 1.02;
letter-spacing: -.01em;
}
.section-title {
font-family: var(--ff-ui);
font-weight: 600;
font-size: var(--fs-section);
}
.eyebrow {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
}
.section.light .eyebrow { color: var(--navy); }
.lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--muted);
max-width: 60ch;
}
.section.dark .lead { color: var(--muted-dark); }
.mono { font-family: var(--ff-mono); }
.metric {
font-family: var(--ff-mono);
font-size: var(--fs-mono-xl);
font-weight: 500;
letter-spacing: -.02em;
}
/* =============================================================
Buttons / CTAs
============================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-weight: 500;
font-size: .98rem;
border-radius: var(--radius-pill);
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--coral);
color: #fff;
box-shadow: 0 10px 28px rgba(247,55,96,.32);
}
.btn-primary:hover { background: var(--coral-deep); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
background: transparent;
color: inherit;
border: 1px solid rgba(255,255,255,.32);
}
.section.light .btn-secondary { border-color: rgba(57,62,102,.22); color: var(--navy); }
.btn-secondary:hover { background: rgba(255,255,255,.08); }
.section.light .btn-secondary:hover { background: rgba(57,62,102,.06); }
.btn-icon { width: 1em; height: 1em; }
/* =============================================================
Top navbar (desktop)
============================================================= */
.topnav {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: var(--s-6);
height: var(--nav-h);
padding: 0 var(--gutter);
background: rgba(244,245,250,.78);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border-bottom: 1px solid rgba(57,62,102,.08);
}
.topnav .brand {
font-family: var(--ff-ui);
font-weight: 700;
letter-spacing: -.02em;
font-size: 1.15rem;
color: var(--navy);
display: inline-flex;
align-items: center;
gap: 8px;
}
.topnav .brand-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 4px rgba(247,55,96,.16);
}
/* Logo image — the LogiPath brand mark. Sized for the 72px topnav
(44px tall gives comfortable breathing room), a bit smaller in the
footer, and smaller again on mobile where the topnav collapses to 60px. */
.brand-logo {
display: block;
height: 44px;
width: auto;
}
@media (max-width: 760px) {
.brand-logo { height: 38px; }
}
.site-footer-row .brand-logo {
height: 30px;
}
/* =============================================================
Site header (new) — sticky, dropdown Soluții, mobile hamburger.
Replaces the older .topnav on all pages.
============================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: #f4f5fa;
transition: box-shadow .25s ease;
}
.site-header.is-scrolled {
box-shadow: 0 6px 20px rgba(33,36,61,.08);
}
.header-wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
height: 72px;
display: flex;
align-items: center;
gap: var(--s-6);
}
@media (max-width: 880px) {
.header-wrap { height: 64px; gap: var(--s-3); }
}
.site-header .brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.site-header .brand-logo {
height: 40px;
width: auto;
display: block;
}
@media (min-width: 1200px) {
.site-header .brand-logo { height: 48px; }
}
@media (max-width: 880px) {
.site-header .brand-logo { height: 36px; }
}
/* Main desktop nav */
.main-nav {
display: flex;
align-items: center;
gap: 32px;
margin-left: var(--s-6);
font-family: var(--ff-ui);
font-size: .95rem;
}
.main-nav > a,
.main-nav .dropdown-toggle {
font-family: var(--ff-ui);
font-weight: 400;
font-size: .95rem;
color: var(--navy);
text-decoration: none;
transition: color .2s ease;
background: none;
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
line-height: 1.5;
}
.main-nav > a:hover,
.main-nav .dropdown-toggle:hover {
color: var(--coral);
}
.main-nav > a.active,
.main-nav .dropdown.active .dropdown-toggle {
color: var(--navy);
}
.main-nav > a.active::after,
.main-nav .dropdown.active .dropdown-toggle::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 2px;
background: var(--coral);
border-radius: 1px;
}
/* Dropdown Soluții — .dropdown fills the full header height so that
.dropdown-menu with top:100% lands exactly at the header's bottom edge
(nu în interiorul header-ului). Toggle-ul stays vertically centered
inside the taller box, so nav items keep their uniform spacing.
Adăugat height:100% + flex center ca dropdown-ul să nu mai influențeze
layout-ul cu-o iota. */
.dropdown {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.dropdown-toggle svg {
transition: transform .2s ease;
}
.dropdown:hover .dropdown-toggle svg,
.dropdown.open .dropdown-toggle svg {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 8px);
min-width: 280px;
padding: 12px;
background: #fff;
border: 1px solid rgba(57,62,102,.08);
border-radius: 12px;
box-shadow: 0 12px 30px -12px rgba(33,36,61,.2);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 4px;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.dropdown-menu a {
padding: 10px 16px;
font-size: .95rem;
color: var(--navy);
text-decoration: none;
border-radius: 6px;
transition: background .15s ease, color .15s ease;
white-space: nowrap;
}
.dropdown-menu a:hover {
background: rgba(247,55,96,.06);
color: var(--coral);
}
.dropdown-menu a.active {
color: var(--coral);
font-weight: 500;
}
/* Compact primary CTA in the header */
.btn-header {
margin-left: auto;
padding: 10px 22px;
font-size: .9rem;
flex-shrink: 0;
}
/* Language toggle RO / EN — segmented pill în header, între nav și CTA. */
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 0;
margin-left: 12px;
border: 1px solid rgba(57,62,102,.14);
border-radius: 999px;
padding: 2px;
background: rgba(255,255,255,.6);
flex-shrink: 0;
font-family: var(--ff-mono);
}
.lang-toggle a {
display: inline-block;
padding: 5px 12px;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--navy);
opacity: .55;
text-decoration: none;
border-radius: 999px;
transition: opacity .15s ease, background .15s ease, color .15s ease;
-webkit-tap-highlight-color: transparent;
}
.lang-toggle a:hover,
.lang-toggle a:focus-visible { opacity: 1; outline: 0; }
.lang-toggle a.active {
background: var(--navy);
color: #fff;
opacity: 1;
}
/* Pe secțiuni dark, borderul devine mai vizibil pe alb */
.section.dark .lang-toggle,
.hero-3d .lang-toggle {
border-color: rgba(255,255,255,.20);
background: rgba(255,255,255,.08);
}
.section.dark .lang-toggle a,
.hero-3d .lang-toggle a { color: var(--ivory); }
@media (max-width: 880px) {
.lang-toggle { display: none; }
}
/* Hamburger — hidden on desktop, visible ≤880px */
.hamburger {
display: none;
background: none;
border: 0;
padding: 8px;
cursor: pointer;
margin-left: auto;
flex-direction: column;
gap: 5px;
}
.hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--navy);
border-radius: 1px;
transition: transform .25s ease, opacity .2s ease;
}
body.menu-open .hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.menu-open .hamburger span:nth-child(2) {
opacity: 0;
}
body.menu-open .hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Hide the header CTA at ≤1024px — the mobile bottom bar provides the
duplicate Contact CTA in that range so we don't want two side by side. */
@media (max-width: 1024px) {
.btn-header { display: none; }
}
@media (max-width: 880px) {
.main-nav { display: none; }
.hamburger { display: flex; }
}
/* Mobile drawer — full-screen liquid glass, dark navy tint with ambient teal glow.
Refactor complet: în locul side-slide-in cu fundal alb, drawer-ul devine
un panel full-viewport care șterge complet fundalul cu blur + saturare,
arată logo-ul + butonul close sus și CTA-ul „Solicită analiză" jos. */
.mobile-menu-backdrop {
/* Kept as a fallback element for close-on-click, but visually the drawer
itself covers everything so this stays transparent. */
position: fixed;
inset: 0;
z-index: 150;
background: transparent;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
body.menu-open .mobile-menu-backdrop {
opacity: 1;
pointer-events: auto;
}
.mobile-menu {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 200;
background: rgba(30, 33, 55, .55);
-webkit-backdrop-filter: blur(40px) saturate(1.2);
backdrop-filter: blur(40px) saturate(1.2);
opacity: 0;
transform: scale(.97);
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: clamp(16px, 4vw, 24px) clamp(20px, 5vw, 40px) calc(clamp(20px, 5vw, 32px) + env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-menu {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
/* Ambient teal glow behind the nav content — subtle motion */
.mobile-menu::before {
content: "";
position: absolute;
top: -20%;
left: -10%;
width: 90%;
height: 90%;
background: radial-gradient(circle at 30% 40%, rgba(45, 212, 191, .22) 0%, transparent 60%);
pointer-events: none;
filter: blur(20px);
animation: mmGlowShift 12s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes mmGlowShift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(18%, 22%) scale(1.15); }
}
/* Header row: logo left + close right */
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: clamp(20px, 5vw, 32px);
position: relative;
z-index: 1;
}
.mobile-menu-header .brand-logo {
height: 34px;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.mobile-menu-close {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .10);
color: #fff;
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: background .18s ease;
display: grid;
place-items: center;
position: relative;
z-index: 3;
pointer-events: auto;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
appearance: none;
padding: 0;
margin: 0;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
background: rgba(255, 255, 255, .16);
outline: 0;
}
/* Nav items */
.mobile-menu > a,
.mobile-menu > .mobile-section-label,
.mobile-menu > .mobile-sub-links {
position: relative;
z-index: 1;
}
.mobile-menu > a {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.05rem;
color: rgba(255, 255, 255, .90);
text-decoration: none;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
transition: color .15s ease;
}
.mobile-menu > a:hover,
.mobile-menu > a.active,
.mobile-menu > a[aria-current="page"] {
color: var(--coral);
}
.mobile-menu .mobile-section-label {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral);
padding: 22px 0 6px;
font-weight: 500;
}
.mobile-menu .mobile-sub-links {
display: flex;
flex-direction: column;
padding-left: 8px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 4px;
}
.mobile-menu .mobile-sub-links a {
font-family: var(--ff-ui);
font-weight: 400;
font-size: .95rem;
color: rgba(255, 255, 255, .72);
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, .06);
transition: color .15s ease;
}
.mobile-menu .mobile-sub-links a:last-of-type { border-bottom: 0; }
.mobile-menu .mobile-sub-links a:hover,
.mobile-menu .mobile-sub-links a.active {
color: var(--coral);
}
/* CTA button pinned to bottom */
.mobile-menu .mobile-cta {
margin-top: auto;
padding: 16px 28px;
border-radius: 999px;
background: var(--coral);
color: #fff !important;
text-align: center;
border: 0 !important;
border-bottom: 0 !important;
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1rem;
letter-spacing: .01em;
box-shadow: 0 14px 32px -12px rgba(247, 55, 96, .55);
text-decoration: none;
position: relative;
z-index: 1;
transition: transform .12s ease, filter .18s ease;
}
.mobile-menu .mobile-cta:hover,
.mobile-menu .mobile-cta:focus-visible {
filter: brightness(1.08);
outline: 0;
}
.mobile-menu .mobile-cta:active { transform: scale(.98); }
body.menu-open { overflow: hidden; }
@media (min-width: 881px) {
.mobile-menu,
.mobile-menu-backdrop { display: none; }
}
.topnav-links {
display: flex;
gap: var(--s-5);
margin-left: auto;
align-items: center;
}
.topnav-links a {
color: var(--navy);
font-weight: 500;
font-size: .95rem;
padding: 8px 4px;
position: relative;
}
.topnav-links a:hover { color: var(--coral); }
.topnav .btn-primary { padding: 10px 18px; font-size: .9rem; }
@media (max-width: 760px) {
.topnav-links { display: none; }
.topnav .btn-primary { display: none; }
.topnav { height: 60px; }
}
/* =============================================================
Block 1 — Hero
============================================================= */
.hero {
min-height: 92vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero .container { width: 100%; }
.hero-grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: var(--s-8);
align-items: center;
}
@media (max-width: 880px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
.hero { min-height: auto; padding-top: var(--s-8); padding-bottom: var(--s-8); }
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: rgba(45,212,191,.10);
border: 1px solid rgba(45,212,191,.32);
color: var(--teal);
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.hero-title { margin-top: var(--s-5); color: var(--ivory); }
.hero-title .accent { color: var(--coral); font-style: italic; }
.hero-sub { margin-top: var(--s-5); }
.hero-ctas {
margin-top: var(--s-6);
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
}
/* Hero visual — liquid glass card over navy */
.hero-visual {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-l);
background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
box-shadow: var(--shadow-glass);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: var(--s-6);
}
.hero-visual::before {
content: "";
position: absolute;
inset: -1px;
background:
radial-gradient(60% 50% at 80% 10%, rgba(45,212,191,.22), transparent 60%),
radial-gradient(50% 40% at 10% 90%, rgba(247,55,96,.22), transparent 60%);
pointer-events: none;
}
.hero-visual-caption {
position: relative;
z-index: 2;
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(244,245,250,.78);
}
.hero-visual-grid {
position: absolute; inset: 0;
background-image: var(--grid-light);
opacity: .55;
pointer-events: none;
}
/* =============================================================
Block 2 — Trust strip
============================================================= */
.trust { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.trust .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-5);
align-items: end;
}
@media (max-width: 880px) {
.trust .container { grid-template-columns: repeat(2, 1fr); }
}
.stat {
padding: var(--s-4) 0;
}
.stat .metric { color: var(--navy); display: block; }
.stat .label {
font-size: .78rem;
color: var(--muted);
margin-top: 4px;
letter-spacing: .02em;
}
.badge-neutral {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: rgba(57,62,102,.06);
border: 1px solid rgba(57,62,102,.12);
color: var(--navy);
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.badge-neutral .dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
/* =============================================================
Block 3 — Trade-off
============================================================= */
.tradeoff-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: var(--s-8);
align-items: center;
}
@media (max-width: 880px) { .tradeoff-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.tradeoff-title { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-display); color: var(--ivory); margin-top: var(--s-4); }
.tradeoff-sub { margin-top: var(--s-5); }
.tradeoff-diagram {
position: relative;
aspect-ratio: 1/1;
border-radius: var(--radius-l);
background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.16);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: var(--shadow-glass);
padding: var(--s-6);
display: grid;
place-items: center;
}
.tradeoff-axes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
width: 100%;
height: 100%;
}
.axis-card {
border-radius: var(--radius-m);
padding: var(--s-5);
border: 1px dashed rgba(255,255,255,.22);
display: flex; flex-direction: column; justify-content: space-between;
background: rgba(255,255,255,.04);
}
.axis-card .axis-label {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--teal);
}
.axis-card .axis-value {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.4rem;
color: var(--ivory);
}
.axis-card.flex { border-color: rgba(45,212,191,.36); }
.axis-card.dens { border-color: rgba(247,55,96,.36); }
.tradeoff-caption {
margin-top: var(--s-4);
font-family: var(--ff-mono);
font-size: .76rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(244,245,250,.6);
text-align: center;
}
/* =============================================================
Block 4 — Capability map (5 cards)
============================================================= */
.capabilities-header {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-6);
align-items: end;
margin-bottom: var(--s-7);
}
@media (max-width: 880px) { .capabilities-header { grid-template-columns: 1fr; } }
.capabilities-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-4);
}
.capabilities-grid .cap-card.orchestrator { grid-column: 1 / -1; }
@media (max-width: 760px) {
.capabilities-grid { grid-template-columns: 1fr; }
.capabilities-grid .cap-card.orchestrator { grid-column: 1 / -1; }
}
.cap-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-6);
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
min-height: 220px;
}
.cap-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: rgba(45,212,191,.36);
}
.cap-card.orchestrator {
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
color: var(--ivory);
border-color: rgba(45,212,191,.32);
}
.cap-card .cap-num {
font-family: var(--ff-mono);
font-size: .76rem;
letter-spacing: .14em;
color: var(--coral);
}
.cap-card.orchestrator .cap-num { color: var(--teal); }
.cap-card h3 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.25rem;
letter-spacing: -.01em;
}
.cap-card p { color: var(--muted); }
.cap-card.orchestrator p { color: rgba(244,245,250,.74); }
.cap-card .cap-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--coral);
font-family: var(--ff-mono);
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.cap-card.orchestrator .cap-cta { color: var(--teal); }
.cap-card .cap-cta::after { content: "→"; transition: transform .2s ease; }
.cap-card:hover .cap-cta::after { transform: translateX(4px); }
/* =============================================================
Block 5 — Anonymized proof
============================================================= */
.proof-header { margin-bottom: var(--s-7); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: end; }
@media (max-width: 880px) { .proof-header { grid-template-columns: 1fr; } }
.proof-title { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-display); color: var(--ivory); }
.proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
@media (max-width: 880px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card {
padding: var(--s-6);
padding-bottom: calc(var(--s-6) + 8px);
min-height: 340px;
border-radius: var(--radius-l);
background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
display: flex; flex-direction: column; gap: var(--s-4);
overflow: visible;
}
.proof-card .proof-sector {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ff-mono);
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--teal);
}
.proof-card .proof-headline {
font-family: var(--ff-mono);
/* Tighter clamp so the long "[CIFRĂ DE CONFIRMAT]" placeholder fits at every breakpoint. */
font-size: clamp(1.4rem, 2.4vw, 2.2rem);
color: var(--ivory);
letter-spacing: -.02em;
line-height: 1.18;
margin: 0;
overflow: visible;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.proof-card .proof-rows {
display: grid; gap: var(--s-3);
font-size: .94rem; color: rgba(244,245,250,.78);
}
.proof-card .proof-rows dt {
font-family: var(--ff-mono);
font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--teal); margin-bottom: 2px;
}
.proof-card .proof-rows dd { margin: 0 0 8px 0; }
.sector-row {
margin-top: var(--s-6);
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.sector-chip {
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: rgba(244,245,250,.78);
}
.proof-cta { margin-top: var(--s-6); }
/* =============================================================
Block 6 — Configurator hook
============================================================= */
.config-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--s-8);
align-items: center;
}
@media (max-width: 880px) { .config-grid { grid-template-columns: 1fr; } }
.config-preview {
position: relative;
border-radius: var(--radius-l);
padding: var(--s-6);
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
color: var(--ivory);
box-shadow: var(--shadow-card);
overflow: hidden;
min-height: 360px;
}
.config-preview::before {
content: ""; position: absolute; inset: 0;
background-image: var(--grid-light);
opacity: .35;
pointer-events: none;
}
.config-preview-inner { position: relative; z-index: 1; display: grid; gap: var(--s-4); }
.config-progress {
display: flex; align-items: center; gap: 12px;
font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
}
.config-progress-bar {
flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden;
}
.config-progress-fill {
display: block; height: 100%; width: 58%;
background: var(--teal);
border-radius: 999px;
}
.config-question {
font-family: var(--ff-display); font-style: italic; font-size: 1.6rem; line-height: 1.15;
}
.config-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.config-option {
padding: 12px 14px;
border-radius: var(--radius-m);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
font-family: var(--ff-ui); font-size: .9rem;
color: var(--ivory);
}
.config-option.active {
background: rgba(247,55,96,.16);
border-color: var(--coral);
color: #fff;
}
.config-cta-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-top: var(--s-5); }
.config-meta {
font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .1em;
color: var(--muted);
}
/* =============================================================
Block 7 — Method
============================================================= */
.method-header { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
@media (max-width: 880px) { .method-header { grid-template-columns: 1fr; } }
.method-title { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-display); color: var(--ivory); }
.method-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-4);
position: relative;
}
@media (max-width: 880px) { .method-steps { grid-template-columns: 1fr; } }
.method-step {
padding: var(--s-5);
border-radius: var(--radius-m);
background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.14);
position: relative;
}
.method-step .step-num {
font-family: var(--ff-mono); font-size: 1.2rem; font-weight: 500;
color: var(--teal); letter-spacing: -.02em;
display: block; margin-bottom: 8px;
}
.method-step h4 {
font-family: var(--ff-ui); font-size: 1.05rem; font-weight: 600;
color: var(--ivory); margin-bottom: 6px;
}
.method-step p { color: rgba(244,245,250,.7); font-size: .9rem; }
.method-certs {
margin-top: var(--s-7);
display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
}
.cert-chip {
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(255,255,255,.22);
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: rgba(244,245,250,.78);
}
.method-cta { margin-top: var(--s-6); }
/* =============================================================
Block 8 — FAQ
============================================================= */
.faq-header { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
@media (max-width: 880px) { .faq-header { grid-template-columns: 1fr; } }
.faq-list { display: grid; gap: var(--s-3); max-width: 880px; }
.faq-item {
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: var(--radius-m);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.faq-q {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: 18px 22px;
font-family: var(--ff-ui); font-weight: 500; font-size: 1.02rem; text-align: left;
color: var(--ink);
}
.faq-q::after {
content: "+";
font-family: var(--ff-mono);
color: var(--coral);
font-size: 1.4rem;
line-height: 1;
transition: transform .25s ease;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a {
padding: 0 22px 22px;
color: var(--muted);
font-size: .96rem;
line-height: 1.6;
}
.faq-cta { margin-top: var(--s-7); }
/* =============================================================
Block 9 — Footer conversion
============================================================= */
.footer-conv {
padding-top: var(--s-9); padding-bottom: var(--s-7);
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-8);
align-items: start;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-title { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-display); color: var(--ivory); }
.footer-sub { margin-top: var(--s-5); }
.footer-steps {
margin-top: var(--s-6);
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
}
@media (max-width: 760px) { .footer-steps { grid-template-columns: 1fr; } }
.footer-step {
padding: var(--s-5);
border-radius: var(--radius-m);
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.footer-step .step-n {
font-family: var(--ff-mono); color: var(--teal); font-size: .82rem;
letter-spacing: .14em; text-transform: uppercase;
}
.footer-step h5 { font-family: var(--ff-ui); font-weight: 600; font-size: 1rem; margin: 6px 0 4px; color: var(--ivory); }
.footer-step p { color: rgba(244,245,250,.7); font-size: .9rem; }
.footer-promise {
margin-top: var(--s-5);
display: flex; gap: 10px; flex-wrap: wrap;
}
.promise-chip {
display: inline-flex; gap: 8px; align-items: center;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(45,212,191,.10);
border: 1px solid rgba(45,212,191,.28);
font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--teal);
}
.footer-card {
padding: var(--s-6);
border-radius: var(--radius-l);
background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: var(--shadow-glass);
display: grid; gap: var(--s-4);
}
.footer-card h4 { font-family: var(--ff-display); font-style: italic; font-size: 1.5rem; color: var(--ivory); }
.footer-card .btn-primary { justify-content: center; }
.footer-bottom {
margin-top: var(--s-9);
padding-top: var(--s-5);
border-top: 1px solid rgba(255,255,255,.10);
display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
font-size: .84rem; color: rgba(244,245,250,.6);
}
.footer-bottom nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer-bottom nav a:hover { color: var(--coral); }
.footer-bottom .spacer { flex: 1; }
/* =============================================================
Mobile bottom pill nav
============================================================= */
.bottom-nav {
position: fixed;
bottom: 10px; left: 10px; right: 10px;
z-index: 100;
display: flex; justify-content: space-around; align-items: center;
padding: 10px 8px;
background: rgba(57,62,102,.82);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255,255,255,.2);
border-radius: var(--radius-l);
box-shadow: 0 8px 32px rgba(33,36,61,.4);
}
@media (min-width: 761px) { .bottom-nav { display: none; } }
@media (max-width: 760px) { body { padding-bottom: 92px; } }
.bottom-nav .nav-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
padding: 6px 8px;
color: rgba(255,255,255,.72);
font-family: var(--ff-ui);
font-size: .68rem;
letter-spacing: .04em;
min-width: 48px; min-height: 48px;
}
.bottom-nav .nav-item svg { width: 20px; height: 20px; }
.bottom-nav .nav-item.active,
.bottom-nav .nav-item:hover {
color: #fff;
}
.bottom-nav .nav-fab {
width: 56px; height: 56px; border-radius: 50%;
background: var(--coral);
color: #fff;
display: flex; align-items: center; justify-content: center;
margin-top: -22px;
box-shadow: var(--shadow-fab);
border: 3px solid rgba(255,255,255,.95);
}
.bottom-nav .nav-fab svg { width: 24px; height: 24px; }
.bottom-nav .nav-fab:hover { background: var(--coral-deep); }
/* =============================================================
Bottom sheets (mobile only)
============================================================= */
.sheet-backdrop {
position: fixed; inset: 0; z-index: 110;
background: rgba(33,36,61,.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet {
position: fixed;
left: 10px; right: 10px; bottom: 10px;
z-index: 120;
transform: translateY(120%);
transition: transform .35s cubic-bezier(.22,.86,.36,1);
background: linear-gradient(160deg, rgba(57,62,102,.96), rgba(33,36,61,.96));
color: var(--ivory);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-l);
box-shadow: 0 -20px 60px rgba(33,36,61,.5);
padding: var(--s-6) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0));
max-height: 80vh;
overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
.sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.32); margin: 0 auto var(--s-4); }
.sheet h3 {
font-family: var(--ff-display); font-style: italic; font-size: 1.6rem; color: var(--ivory);
margin-bottom: var(--s-4);
}
.sheet-list { display: grid; gap: var(--s-3); }
.sheet-item {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-4);
border-radius: var(--radius-m);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: var(--ivory);
text-decoration: none;
}
.sheet-item:hover { background: rgba(255,255,255,.1); }
.sheet-item .sheet-icon {
width: 36px; height: 36px; border-radius: 10px;
background: rgba(45,212,191,.16);
display: flex; align-items: center; justify-content: center;
color: var(--teal);
flex: none;
}
.sheet-item .sheet-icon svg { width: 18px; height: 18px; }
.sheet-item .sheet-title { font-weight: 500; font-size: .98rem; }
.sheet-item .sheet-sub { font-family: var(--ff-mono); font-size: .72rem; color: rgba(244,245,250,.6); letter-spacing: .04em; }
.sheet-item.fab-style .sheet-icon { background: rgba(247,55,96,.18); color: var(--coral); }
.sheet-close {
position: absolute; top: 12px; right: 14px;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(255,255,255,.08);
color: var(--ivory);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
/* =============================================================
Scroll reveal — respect prefers-reduced-motion
IMPORTANT: the transform/will-change is applied to the section's
DIRECT CHILD (typically .container), NOT to the section itself.
`transform` or `will-change: transform` on the section would make
it a containing block for its own backgrounds, which silently
demotes `background-attachment: fixed` to `scroll` — breaking the
continuous viewport grid.
============================================================= */
[data-reveal] > * {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s cubic-bezier(.22,.86,.36,1);
will-change: opacity, transform;
}
[data-reveal].is-visible > * {
opacity: 1;
transform: none;
}
[data-reveal].is-visible > * {
/* Drop will-change once the animation has finished its job. */
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal] > * { opacity: 1; transform: none; transition: none; will-change: auto; }
.cap-card:hover { transform: none; }
.btn-primary:hover { transform: none; }
}
/* =============================================================
Utilities
============================================================= */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.row-tight { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.divider-soft {
height: 1px; background: rgba(255,255,255,.10); margin: var(--s-5) 0;
}
/* =============================================================
Solution pages — shared components
============================================================= */
/* Compact hero variant */
.hero-solution {
min-height: 68vh;
padding-top: var(--s-8);
padding-bottom: var(--s-8);
}
/* Generic two-column section header */
.section-header {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--s-6);
align-items: end;
margin-bottom: var(--s-7);
}
@media (max-width: 880px) { .section-header { grid-template-columns: 1fr; } }
.section-title-italic {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: var(--fs-display);
letter-spacing: -.01em;
line-height: 1.1;
}
.section.dark .section-title-italic { color: var(--ivory); }
/* Split (problem) cards: pain vs. fix */
.split-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-5);
}
@media (max-width: 760px) { .split-cards { grid-template-columns: 1fr; } }
.split-card {
padding: var(--s-6);
border-radius: var(--radius-l);
display: flex; flex-direction: column; gap: var(--s-3);
}
.split-card .split-label {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.split-card.pain {
background: #fff;
border: 1px solid rgba(247,55,96,.32);
box-shadow: var(--shadow-soft);
}
.split-card.pain .split-label { color: var(--coral); }
.split-card.fix {
background: linear-gradient(160deg, var(--navy), var(--navy-deep));
color: var(--ivory);
border: 1px solid rgba(45,212,191,.32);
}
.split-card.fix .split-label { color: var(--teal); }
.split-card h3 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: 1.45rem;
line-height: 1.15;
}
.split-card ul { display: grid; gap: 8px; }
.split-card li { padding-left: 18px; position: relative; font-size: .96rem; }
.split-card.pain li { color: var(--ink); }
.split-card.fix li { color: rgba(244,245,250,.85); }
.split-card li::before {
content: "—";
position: absolute; left: 0; top: 0;
font-family: var(--ff-mono);
color: var(--coral);
}
.split-card.fix li::before { color: var(--teal); }
/* How-it-works steps (on dark sections) */
.how-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
@media (max-width: 880px) { .how-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .how-steps { grid-template-columns: 1fr; } }
.how-step {
padding: var(--s-5);
border-radius: var(--radius-m);
background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.14);
display: flex; flex-direction: column; gap: 8px;
}
.how-step .step-num {
font-family: var(--ff-mono); font-size: 1.1rem; color: var(--teal);
}
.how-step h4 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1rem;
color: var(--ivory);
}
.how-step p {
color: rgba(244,245,250,.72);
font-size: .9rem;
}
/* Glossary (on dark sections) */
.glossary {
margin-top: var(--s-6);
display: grid; gap: var(--s-4);
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .glossary { grid-template-columns: 1fr; } }
.glossary dt {
font-family: var(--ff-mono);
font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--teal);
margin-bottom: 4px;
}
.glossary dd {
margin: 0;
color: rgba(244,245,250,.78);
font-size: .94rem;
}
/* Fit-by-use-case grid (on light sections) */
.fit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
@media (max-width: 880px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-card {
padding: var(--s-6);
border-radius: var(--radius-l);
background: #fff;
border: 1px solid rgba(57,62,102,.10);
box-shadow: var(--shadow-soft);
display: flex; flex-direction: column; gap: var(--s-3);
}
.fit-card .fit-when {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--navy);
}
.fit-card h4 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.1rem;
color: var(--ink);
}
.fit-card p { color: var(--muted); font-size: .94rem; }
/* Mini orchestration diagram (on dark sections) */
.orch-mini {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: var(--s-3);
align-items: stretch;
margin-top: var(--s-5);
}
@media (max-width: 760px) {
.orch-mini {
grid-template-columns: 1fr;
}
.orch-arrow { transform: rotate(90deg); justify-self: center; padding: 4px 0; }
}
.orch-node {
padding: var(--s-5);
border-radius: var(--radius-m);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.16);
text-align: left;
display: flex; flex-direction: column; gap: 6px;
}
.orch-node.center {
background: linear-gradient(160deg, rgba(45,212,191,.16), rgba(45,212,191,.04));
border-color: rgba(45,212,191,.42);
}
.orch-node .orch-label {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--teal);
}
.orch-node h4 {
font-family: var(--ff-ui);
color: var(--ivory);
font-size: 1rem;
}
.orch-node p {
color: rgba(244,245,250,.7);
font-size: .88rem;
}
.orch-arrow {
font-family: var(--ff-mono);
font-size: 1.4rem;
color: var(--teal);
align-self: center;
}
/* FAQ — dark-section variant (solution-page block 7) */
.section.dark .faq-item {
background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border-color: rgba(255,255,255,.14);
box-shadow: none;
}
.section.dark .faq-q { color: var(--ivory); }
.section.dark .faq-a { color: rgba(244,245,250,.7); }
/* =============================================================
Configurator page
============================================================= */
.configurator-page {
display: grid;
grid-template-columns: 1.4fr .9fr;
gap: var(--s-7);
align-items: start;
}
@media (max-width: 980px) {
.configurator-page { grid-template-columns: 1fr; }
}
.config-form-card {
padding: var(--s-6);
border-radius: var(--radius-l);
background: #fff;
border: 1px solid rgba(57,62,102,.10);
box-shadow: var(--shadow-card);
min-height: 580px;
display: flex; flex-direction: column;
}
.config-progress {
display: flex; align-items: center; gap: 12px;
margin-bottom: var(--s-6);
font-family: var(--ff-mono);
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--navy);
}
.config-progress-bar {
flex: 1;
height: 4px;
border-radius: 999px;
background: rgba(57,62,102,.12);
overflow: hidden;
}
.config-progress-fill {
display: block;
height: 100%;
width: 0%;
background: var(--teal);
border-radius: 999px;
transition: width .35s cubic-bezier(.22,.86,.36,1);
}
.config-step { display: grid; gap: var(--s-5); flex: 1; }
.config-step[hidden] { display: none; }
.config-step h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--ink);
line-height: 1.15;
}
.config-step .help {
font-size: .92rem;
color: var(--muted);
margin-top: -8px;
}
.choice-list {
display: grid;
gap: var(--s-3);
}
.choice-list.two-col { grid-template-columns: 1fr 1fr; }
.choice-list.three-col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
.choice-list.two-col,
.choice-list.three-col { grid-template-columns: 1fr; }
}
.choice {
position: relative;
display: flex; align-items: center; gap: var(--s-3);
min-height: 56px;
padding: 14px 16px;
border-radius: var(--radius-m);
background: var(--light-soft);
border: 1px solid rgba(57,62,102,.12);
cursor: pointer;
transition: border-color .18s ease, background .18s ease;
font-family: var(--ff-ui); font-size: .98rem;
color: var(--ink);
}
.choice:hover { background: rgba(57,62,102,.06); border-color: rgba(57,62,102,.22); }
.choice input {
position: absolute; opacity: 0; pointer-events: none;
}
.choice .check {
width: 22px; height: 22px; flex: none;
border-radius: 50%;
border: 2px solid rgba(57,62,102,.22);
display: grid; place-items: center;
transition: border-color .18s ease;
}
.choice .check::after {
content: "";
width: 10px; height: 10px; border-radius: 50%;
background: var(--coral);
opacity: 0;
transition: opacity .18s ease;
}
.choice .choice-icon {
width: 28px; height: 28px;
display: grid; place-items: center;
color: var(--navy);
flex: none;
}
.choice .choice-text {
flex: 1;
display: grid; gap: 2px;
}
.choice .choice-title { font-weight: 500; }
.choice .choice-sub {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .08em;
color: var(--muted);
}
.choice.is-selected {
background: rgba(247,55,96,.05);
border-color: var(--coral);
}
.choice.is-selected .check { border-color: var(--coral); }
.choice.is-selected .check::after { opacity: 1; }
.choice:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; }
.config-input-field {
display: grid; gap: 6px;
}
.config-input-field label {
font-family: var(--ff-mono);
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--navy);
}
.config-input-field input,
.config-input-field textarea {
font-family: var(--ff-ui);
font-size: 1rem;
padding: 14px 16px;
min-height: 52px;
border-radius: var(--radius-m);
background: var(--light-soft);
border: 1px solid rgba(57,62,102,.16);
color: var(--ink);
width: 100%;
}
.config-input-field input:focus-visible,
.config-input-field textarea:focus-visible {
border-color: var(--teal);
outline: 2px solid var(--teal);
outline-offset: 0;
}
.config-input-field .field-error {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .06em;
color: var(--coral);
display: none;
margin-top: 4px;
}
.config-input-field.is-invalid .field-error { display: block; }
.config-input-field.is-invalid input,
.config-input-field.is-invalid textarea { border-color: var(--coral); }
.config-grid-fields {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
@media (max-width: 540px) { .config-grid-fields { grid-template-columns: 1fr; } }
.config-consent {
display: flex; align-items: flex-start; gap: 10px;
padding: var(--s-4);
background: var(--light-soft);
border-radius: var(--radius-m);
font-size: .9rem;
color: var(--muted);
border: 1px solid rgba(57,62,102,.10);
}
.config-consent input { margin-top: 3px; flex: none; }
.config-consent a { color: var(--navy); text-decoration: underline; }
.config-nav {
display: flex;
gap: var(--s-3);
align-items: center;
justify-content: space-between;
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid rgba(57,62,102,.08);
}
.config-nav .btn-back {
color: var(--muted);
font-size: .85rem;
font-family: var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
padding: 10px 14px;
}
.config-nav .btn-back:hover { color: var(--navy); }
.config-nav .btn-back:disabled { opacity: .35; cursor: not-allowed; }
.config-nav .btn-next { min-width: 160px; justify-content: center; }
.config-nav .btn-submit { min-width: 220px; justify-content: center; }
.config-microcopy {
margin-top: var(--s-3);
text-align: center;
font-family: var(--ff-mono);
font-size: .74rem; letter-spacing: .06em;
color: var(--muted);
}
/* Live profile panel (sidebar) */
.profile-panel {
padding: var(--s-6);
border-radius: var(--radius-l);
background: linear-gradient(160deg, var(--navy), var(--navy-deep));
color: var(--ivory);
border: 1px solid rgba(255,255,255,.14);
box-shadow: var(--shadow-glass);
position: sticky;
top: 92px;
overflow: hidden;
}
.profile-panel::before {
content: ""; position: absolute; inset: 0;
background-image: var(--grid-light);
opacity: .35; pointer-events: none;
}
.profile-panel > * { position: relative; z-index: 1; }
@media (max-width: 980px) { .profile-panel { position: static; } }
.profile-panel .panel-eyebrow {
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--teal);
}
.profile-panel h3 {
font-family: var(--ff-display);
font-style: italic;
font-size: 1.4rem;
color: var(--ivory);
margin: 6px 0 var(--s-3);
}
.profile-panel .panel-text { color: rgba(244,245,250,.75); font-size: .92rem; }
.profile-pillars {
margin-top: var(--s-5);
display: grid; gap: var(--s-3);
}
.profile-pillar {
padding: 12px 14px;
border-radius: var(--radius-m);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
display: flex; align-items: center; gap: var(--s-3);
opacity: .55;
transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
.profile-pillar.is-on {
opacity: 1;
background: rgba(45,212,191,.10);
border-color: rgba(45,212,191,.36);
}
.profile-pillar .pp-dot {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,.18);
flex: none;
transition: background .25s ease, box-shadow .25s ease;
}
.profile-pillar.is-on .pp-dot {
background: var(--teal);
box-shadow: 0 0 0 4px rgba(45,212,191,.18);
}
.profile-pillar .pp-text { display: grid; gap: 2px; }
.profile-pillar .pp-name {
font-family: var(--ff-ui); font-size: .94rem; color: var(--ivory);
}
.profile-pillar .pp-sub {
font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .08em;
color: rgba(244,245,250,.55);
text-transform: uppercase;
}
.profile-panel .panel-foot {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid rgba(255,255,255,.10);
font-family: var(--ff-mono);
font-size: .72rem; letter-spacing: .08em;
color: rgba(244,245,250,.55);
}
/* Output screen */
.profile-output {
padding: var(--s-6) var(--s-7);
border-radius: var(--radius-l);
background: #fff;
border: 1px solid rgba(57,62,102,.10);
box-shadow: var(--shadow-card);
display: grid; gap: var(--s-6);
}
@media (max-width: 600px) { .profile-output { padding: var(--s-5); } }
.profile-output[hidden] { display: none; }
.profile-output h2 {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--navy);
line-height: 1.1;
}
.profile-output h3 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.1rem;
color: var(--ink);
letter-spacing: -.01em;
}
.output-summary {
padding: var(--s-5);
border-radius: var(--radius-m);
background: rgba(45,212,191,.06);
border: 1px solid rgba(45,212,191,.20);
color: var(--ink);
font-size: .98rem;
line-height: 1.5;
}
.output-summary strong { color: var(--navy); font-weight: 600; }
.output-section {
padding-top: var(--s-5);
border-top: 1px solid rgba(57,62,102,.10);
display: grid; gap: var(--s-3);
}
.output-pillars { display: grid; gap: var(--s-3); }
.output-pillar {
padding: var(--s-4);
border-radius: var(--radius-m);
background: var(--light-soft);
border: 1px solid rgba(57,62,102,.10);
display: grid; gap: 6px;
}
.output-pillar .op-name {
font-family: var(--ff-ui); font-weight: 600; color: var(--ink);
}
.output-pillar .op-tag {
font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--coral);
}
.output-pillar .op-why { color: var(--muted); font-size: .94rem; }
.roadmap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--s-3);
}
@media (max-width: 760px) { .roadmap { grid-template-columns: 1fr; } }
.roadmap-stage {
padding: var(--s-4);
border-radius: var(--radius-m);
background: var(--light-soft);
border: 1px solid rgba(57,62,102,.10);
}
.roadmap-stage .stage-n {
font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--teal);
}
.roadmap-stage h4 {
font-family: var(--ff-ui); font-size: 1rem; margin: 4px 0 6px; color: var(--ink);
}
.roadmap-stage p { font-size: .88rem; color: var(--muted); }
.output-next {
padding: var(--s-5);
border-radius: var(--radius-m);
background: linear-gradient(160deg, var(--navy), var(--navy-deep));
color: var(--ivory);
display: grid; gap: var(--s-3);
}
.output-next h3 { color: var(--ivory); }
.output-next p { color: rgba(244,245,250,.78); }
.output-next .btn-primary { justify-self: start; }
/* =============================================================
Capabilities (rich) — image cards + orchestration band
Used at homepage Block 3 (#capabilitati).
Layout: intro full-width on top → 4-up cards → orchestration band.
============================================================= */
.capabilities-rich-intro {
margin-bottom: var(--s-7);
}
.capabilities-rich-intro p {
max-width: 70ch;
}
.capabilities-rich-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-5);
align-items: stretch;
}
@media (max-width: 600px) {
.capabilities-rich-cards { grid-template-columns: 1fr; }
}
.sol-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sol-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: rgba(45,212,191,.36);
}
.sol-card-media {
margin: 0;
background: var(--light-soft);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.sol-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sol-card-body {
padding: var(--s-5);
display: flex;
flex-direction: column;
gap: var(--s-3);
flex: 1;
}
.sol-card-body h3 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.2rem;
color: var(--ink);
letter-spacing: -.01em;
line-height: 1.25;
}
.sol-card-body p {
color: var(--muted);
font-size: .96rem;
line-height: 1.6;
flex: 1;
margin: 0;
}
.sol-card-body p strong {
color: var(--ink);
font-weight: 600;
}
.sol-card-cta {
align-self: flex-start;
color: var(--coral);
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.sol-card-cta span {
transition: transform .2s ease;
display: inline-block;
}
.sol-card:hover .sol-card-cta span { transform: translateX(3px); }
/* Orchestration band — full-width, sits below the 4-card grid.
White card on the dark section, matching the sol-card styling.
Horizontal: image LEFT ~45% / text RIGHT ~55%; stacks on mobile. */
.orch-band {
margin-top: var(--s-5);
width: 100%;
background: #fff;
color: var(--ink);
border: 1px solid rgba(57,62,102,.10);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
overflow: hidden;
display: grid;
grid-template-columns: 45fr 55fr;
align-items: stretch;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.orch-band:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
border-color: rgba(45,212,191,.36);
}
@media (max-width: 760px) {
.orch-band { grid-template-columns: 1fr; }
}
.orch-band-media {
margin: 0;
background: var(--light-soft);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.orch-band-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.orch-band-body {
padding: var(--s-6) var(--s-7);
display: flex;
flex-direction: column;
gap: var(--s-3);
justify-content: center;
}
@media (max-width: 760px) {
.orch-band-body { padding: var(--s-6); }
}
.orch-band-body h3 {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.35rem;
color: var(--ink);
letter-spacing: -.01em;
line-height: 1.25;
}
.orch-band-body p {
color: var(--muted);
font-size: .98rem;
line-height: 1.6;
margin: 0;
}
.orch-band-body p strong {
color: var(--ink);
font-weight: 600;
}
.orch-band-cta {
align-self: flex-start;
color: var(--coral);
font-family: var(--ff-mono);
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.orch-band-cta span {
transition: transform .2s ease;
display: inline-block;
}
.orch-band:hover .orch-band-cta span { transform: translateX(3px); }
/* =============================================================
Method section — Consulting & Simulation sub-blocks
(homepage Block 7 enrichment, on the dark section)
============================================================= */
.method-sub {
padding: var(--s-6);
border-radius: var(--radius-l);
background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.14);
}
/* Sub-block 1 — the visual highlight: image left, text right */
.method-sub-sim {
margin-top: var(--s-5);
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--s-6);
align-items: center;
}
@media (max-width: 880px) {
.method-sub-sim { grid-template-columns: 1fr; }
}
.method-sub-media {
margin: 0;
background: rgba(255,255,255,.08);
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-m);
border: 1px solid rgba(255,255,255,.14);
}
.method-sub-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.method-sub-body {
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.method-sub h3 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
color: var(--ivory);
line-height: 1.18;
letter-spacing: -.005em;
margin: 4px 0 0;
}
.method-sub p {
color: rgba(244,245,250,.78);
font-size: .98rem;
line-height: 1.6;
margin: 0;
}
.method-sub-benefits {
margin-top: var(--s-3);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3) var(--s-4);
padding: 0;
list-style: none;
}
@media (max-width: 540px) {
.method-sub-benefits { grid-template-columns: 1fr; }
}
.method-sub-benefits li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .92rem;
color: rgba(244,245,250,.85);
line-height: 1.4;
}
.method-sub-benefits .benefit-icon {
width: 22px;
height: 22px;
flex: none;
border-radius: 6px;
background: rgba(45,212,191,.16);
color: var(--teal);
display: grid;
place-items: center;
}
.method-sub-benefits .benefit-icon svg {
width: 12px;
height: 12px;
}
/* Sub-block 2 — smaller text-only card */
.method-sub-scan {
margin-top: var(--s-4);
padding: var(--s-5) var(--s-6);
}
.method-sub-scan h3 {
font-size: clamp(1.15rem, 1.9vw, 1.4rem);
}
.method-sub-scan p {
max-width: 65ch;
}
/* Small eyebrow heading that introduces the existing 5-step row */
.method-steps-eyebrow {
margin: var(--s-8) 0 var(--s-5);
}
/* =============================================================
Capabilities section — editorial intro + "why" bridge
Centered text-only block. Assumes .section.light background
so navy text and light continuous grid read correctly.
============================================================= */
.cap-hero {
max-width: none;
text-align: left;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
/* Eyebrow with thin coral side rules */
.cap-hero-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-3);
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral);
}
.cap-hero-eyebrow::before,
.cap-hero-eyebrow::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: currentColor;
opacity: .55;
}
/* Two-line title: Jost line 1, Cormorant italic line 2 with coral accent */
.cap-hero-title {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.cap-hero-line1 {
font-family: var(--ff-ui);
font-weight: 500;
font-size: clamp(1.35rem, 2.4vw, 1.8rem);
color: var(--navy);
line-height: 1.25;
letter-spacing: -.005em;
}
.cap-hero-line2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 500;
font-size: clamp(2.2rem, 5vw, 3.6rem);
color: var(--navy);
line-height: 1.05;
letter-spacing: -.01em;
}
.cap-hero-accent {
color: var(--coral);
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
.cap-hero-lead {
font-family: var(--ff-ui);
font-size: var(--fs-lead);
line-height: 1.65;
color: var(--muted);
margin: var(--s-3) 0 0;
max-width: none;
}
.cap-hero-lead strong {
color: var(--navy);
font-weight: 600;
}
/* Bridge: centered "why it matters" block below the hero */
.cap-bridge {
max-width: 640px;
margin: var(--s-8) auto var(--s-7);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-3);
}
.cap-bridge-bar {
width: 40px;
height: 3px;
border-radius: 2px;
background: var(--coral);
}
.cap-bridge-eyebrow {
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral);
}
.cap-bridge-text {
font-family: var(--ff-ui);
font-size: 1.05rem;
line-height: 1.7;
color: var(--ink);
margin: 0;
}
.cap-bridge-text strong {
color: var(--navy);
font-weight: 600;
}
/* =============================================================
Consultanță & Simulare — editorial header + two pillar rows
Sits at the top of Block 7 (#metoda, dark section).
============================================================= */
.cs-head {
max-width: none;
margin: 0 0 clamp(50px, 7vw, 80px);
text-align: left;
}
.cs-eyebrow {
font-family: var(--ff-mono);
font-size: .74rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--coral);
display: inline-flex;
align-items: center;
gap: .7em;
margin-bottom: 22px;
}
.cs-eyebrow::before,
.cs-eyebrow::after {
content: "";
display: block;
width: 26px;
height: 1px;
background: currentColor;
opacity: .55;
}
.cs-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(2.1rem, 4.6vw, 3.5rem);
line-height: 1.08;
letter-spacing: -.01em;
color: #fff;
margin: 0;
}
.cs-lead {
margin: 22px 0 0;
max-width: none;
color: rgba(255,255,255,.62);
font-size: clamp(1.02rem, 1.4vw, 1.16rem);
line-height: 1.6;
}
/* Pillar rows: image + text, alternating sides */
/* Cei doi pilari (Simulare 3D + Scanare 3D) sunt pe același rând,
fiecare într-o coloană a grilei. Colapsează la 1 col pe mobil. */
.cs-pillars-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 4vw, 60px);
align-items: start;
}
@media (max-width: 880px) {
.cs-pillars-grid { grid-template-columns: 1fr; gap: 40px; }
}
.cs-pillar {
/* Fiecare pilar e simplu block care umple coloana lui. */
}
/* Visual placeholder — styled panel that holds regardless of img presence.
The real ![]()
is layered on top with object-fit:cover. If the src is
missing/fails, inline onerror removes the img and the styled panel shows. */
.cs-visual {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(120% 120% at 30% 0%, rgba(45,212,191,.16), transparent 55%),
linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.12);
margin: 0;
}
.cs-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}
/* Content side */
.cs-content .cs-k {
font-family: var(--ff-mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 14px;
}
.cs-content h3 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
line-height: 1.12;
color: #fff;
margin: 0 0 16px;
}
.cs-content p {
color: rgba(255,255,255,.6);
font-size: 1.02rem;
line-height: 1.6;
margin: 0 0 26px;
max-width: 52ch;
}
/* Chip grid — 2 × 2 outcome chips with teal check icons */
.cs-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
}
@media (max-width: 520px) {
.cs-chips { grid-template-columns: 1fr; }
}
.cs-chip {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: .94rem;
color: rgba(255,255,255,.9);
line-height: 1.4;
}
.cs-tick {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 7px;
background: rgba(45,212,191,.16);
display: grid;
place-items: center;
margin-top: 1px;
color: var(--teal);
}
.cs-tick svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Thin divider between pillars */
.cs-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
margin: clamp(20px, 3vw, 40px) 0;
}
/* =============================================================
Site footer — slim dark strip
============================================================= */
.site-footer {
padding-top: var(--s-6);
padding-bottom: var(--s-6);
}
.site-footer-row {
display: flex;
gap: var(--s-4);
flex-wrap: wrap;
align-items: center;
font-size: .84rem;
color: rgba(244,245,250,.6);
}
.site-footer-row nav {
display: flex;
gap: var(--s-4);
flex-wrap: wrap;
}
.site-footer-row nav a { color: rgba(244,245,250,.7); }
.site-footer-row nav a:hover { color: var(--coral); }
.site-footer-copy { margin-left: auto; }
@media (max-width: 640px) {
.site-footer-copy { margin-left: 0; width: 100%; }
}
/* =============================================================
Solution page — shared components (prefix .sp-)
For site/solutii/*.html pages that follow the
solution-page mockup pattern.
============================================================= */
/* Eyebrow: mono, coral, single leading rule */
.sp-eyebrow {
font-family: var(--ff-mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral);
display: inline-flex;
align-items: center;
gap: .7em;
margin-bottom: 18px;
}
.sp-eyebrow::before {
content: "";
display: block;
width: 26px;
height: 1px;
background: currentColor;
}
.section.dark .sp-eyebrow { color: #ff5c7d; }
.sp-eyebrow-center { justify-content: center; }
/* H2 — Cormorant italic; navy on light, white on dark */
.sp-h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
line-height: 1.08;
color: var(--navy);
letter-spacing: -.005em;
margin: 0;
}
.section.dark .sp-h2 { color: #fff; }
/* Body paragraph */
.sp-body {
color: var(--muted);
max-width: 60ch;
margin-top: 16px;
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.65;
}
.section.dark .sp-body { color: rgba(255,255,255,.62); }
/* Hero */
.sp-hero { padding-top: clamp(70px, 9vw, 120px); }
.sp-hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(30px, 4vw, 56px);
align-items: center;
}
@media (max-width: 880px) {
.sp-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}
.sp-hero-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(2.4rem, 5.4vw, 4rem);
line-height: 1.05;
letter-spacing: -.01em;
color: #fff;
margin: 0;
}
.sp-hero-q {
font-family: var(--ff-display);
font-style: italic;
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
color: rgba(255,255,255,.82);
margin: 18px 0 6px;
}
/* Small in-title clarifier (e.g. "(end-of-line)") — non-italic Jost, muted */
.sp-hero-note {
font-family: var(--ff-ui);
font-style: normal;
font-weight: 300;
font-size: .55em;
color: rgba(255,255,255,.55);
letter-spacing: .02em;
}
/* Inline mono tag (e.g. "AGV / LGV") — pops out of a muted paragraph
without breaking the tonal register. Slightly whiter on dark, ink on light. */
.sp-mono-tag {
font-family: var(--ff-mono);
font-weight: 500;
font-size: .92em;
letter-spacing: .06em;
color: rgba(255,255,255,.92);
white-space: nowrap;
}
.section.light .sp-mono-tag { color: var(--ink); }
/* =============================================================
Despre — editorial page classes.
Used by /despre.html for the narrow-column story rhythm.
============================================================= */
/* .despre-narrow: full container width, exact ca hero-ul.
Inclusiv paragrafele body — override la .sp-body max-width care altfel
ar constrânge la 60ch și ar lăsa gap pe dreapta. Aici prioritizăm
uniformitatea alinierii peste lizibilitatea maximă. */
.despre-narrow {
max-width: none;
}
.despre-narrow .sp-body {
max-width: none;
}
/* Coral italic accent inside sp-h2 (already Cormorant italic) */
.despre-accent {
color: var(--coral);
}
/* Visually-accented pullquote-ish paragraph inside a dark section:
coral bar on the left, slightly bigger font, sits below the two
preceding sp-body paragraphs. */
.despre-pullquote {
margin-top: 28px;
padding-left: 22px;
border-left: 3px solid var(--coral);
color: rgba(255,255,255,.86);
font-family: var(--ff-ui);
font-weight: 400;
font-size: 1.12rem;
line-height: 1.6;
}
/* Discrete horizontal reference notes — mono, muted, coral bullet.
Used under the Parteneri section body. */
.despre-refs {
margin-top: 32px;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
max-width: 820px;
}
.despre-refs li {
font-family: var(--ff-mono);
font-size: .84rem;
letter-spacing: .04em;
color: var(--muted);
line-height: 1.55;
}
.despre-refs li::before {
content: "· ";
color: var(--coral);
font-weight: 500;
margin-right: 2px;
}
/* =============================================================
Cursor glow — desktop-only spotlight over the grid.
TWO fixed overlays that share the same radial mask (driven by
--mx / --my on :root, updated in JS on mousemove). Each overlay
is visible on the section colour it's designed for:
- .cursor-glow : teal grid + mix-blend-mode:screen
→ lights up dark navy sections
- .cursor-glow-alt : coral grid + mix-blend-mode:multiply
→ tints the light sections in brand coral
screen only adds brightness (invisible on already-light bg);
multiply only darkens (invisible on already-dark bg). Together
they cover both, and both are visible in the same cursor window.
Hidden on touch / small screens / prefers-reduced-motion.
============================================================= */
:root {
--mx: -1000px;
--my: -1000px;
}
.cursor-glow,
.cursor-glow-alt {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
background-attachment: fixed;
-webkit-mask-image:
radial-gradient(circle 190px at var(--mx) var(--my),
rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
mask-image:
radial-gradient(circle 190px at var(--mx) var(--my),
rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
will-change: mask-image, -webkit-mask-image;
}
/* Layer 1 — teal grid, screen mode: shines on the dark sections */
.cursor-glow {
background-image:
repeating-linear-gradient(0deg, rgba(45,212,191,.75) 0, rgba(45,212,191,.75) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(90deg, rgba(45,212,191,.75) 0, rgba(45,212,191,.75) 1px, transparent 1px, transparent 28px);
mix-blend-mode: screen;
}
/* Layer 2 — coral grid, multiply mode: tints the light sections */
.cursor-glow-alt {
background-image:
repeating-linear-gradient(0deg, rgba(247,55,96,.55) 0, rgba(247,55,96,.55) 1px, transparent 1px, transparent 28px),
repeating-linear-gradient(90deg, rgba(247,55,96,.55) 0, rgba(247,55,96,.55) 1px, transparent 1px, transparent 28px);
mix-blend-mode: multiply;
}
.cursor-glow.is-visible,
.cursor-glow-alt.is-visible { opacity: 1; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
.cursor-glow,
.cursor-glow-alt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cursor-glow,
.cursor-glow-alt { display: none; }
}
.sp-cta-row {
margin-top: 30px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* Visual figure — styled placeholder that holds if ![]()
is missing.
img on top with object-fit:cover; onerror="this.remove()" reveals bg. */
.sp-visual {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(120% 120% at 30% 0%, rgba(45,212,191,.14), transparent 55%),
linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
margin: 0;
}
.sp-visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}
.sp-visual-light {
aspect-ratio: 16 / 9;
border-color: rgba(57,62,102,.14);
background:
radial-gradient(120% 120% at 30% 0%, rgba(57,62,102,.10), transparent 55%),
#e9ebf4;
}
/* Task list — 2-col with teal check icons on light */
.sp-tasks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 34px;
margin-top: 34px;
max-width: 900px;
}
@media (max-width: 640px) { .sp-tasks { grid-template-columns: 1fr; } }
.sp-task {
display: flex;
gap: 13px;
align-items: flex-start;
font-size: 1.02rem;
color: var(--ink);
line-height: 1.5;
}
.sp-tick {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 7px;
background: rgba(45,212,191,.16);
display: grid;
place-items: center;
margin-top: 1px;
color: #12a594;
}
.sp-tick svg {
width: 13px;
height: 13px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Sub-block divider on light sections */
.sp-divider {
height: 1px;
background: rgba(57,62,102,.12);
margin: clamp(44px, 5vw, 66px) 0;
}
/* Storage-type white cards — 4-col */
.sp-stypes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 30px;
}
@media (max-width: 900px) { .sp-stypes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-stypes { grid-template-columns: 1fr; } }
.sp-stype {
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: 14px;
padding: 20px 20px 22px;
box-shadow: 0 12px 30px -26px rgba(33,36,61,.5);
}
.sp-stype b {
display: block;
font-family: var(--ff-ui);
font-weight: 500;
color: var(--navy);
margin-bottom: 7px;
font-size: 1rem;
}
.sp-stype span {
color: var(--muted);
font-size: .88rem;
line-height: 1.5;
}
/* Benefit cards on dark — 3-col numbered */
.sp-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 44px;
}
@media (max-width: 820px) { .sp-cards { grid-template-columns: 1fr; } }
.sp-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
padding: 30px;
}
.sp-card-n {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .14em;
color: #ff5c7d;
margin-bottom: 14px;
}
.sp-card h3 {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.15rem;
color: #fff;
margin: 0 0 10px;
letter-spacing: -.005em;
}
.sp-card p {
color: rgba(255,255,255,.58);
font-size: .96rem;
line-height: 1.65;
margin: 0;
}
/* Split row: image + text */
.sp-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 4vw, 56px);
align-items: center;
}
@media (max-width: 880px) {
.sp-split { grid-template-columns: 1fr; gap: 28px; }
}
/* Advantages list — 2-col with pink diamond bullets */
.sp-adv {
list-style: none;
padding: 0;
margin: 40px 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 34px;
max-width: 900px;
}
@media (max-width: 640px) { .sp-adv { grid-template-columns: 1fr; } }
.sp-adv li {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--ink);
font-size: .98rem;
line-height: 1.5;
}
.sp-adv li::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--coral);
margin-top: 8px;
transform: rotate(45deg);
}
.section.dark .sp-adv li { color: rgba(255,255,255,.85); }
/* Mono coral link (e.g., "Vezi cum orchestrăm tot fluxul →") */
.sp-link {
font-family: var(--ff-mono);
font-size: .8rem;
letter-spacing: .08em;
color: var(--coral);
text-decoration: none;
margin-top: 22px;
display: inline-block;
}
.sp-link:hover { text-decoration: underline; }
/* Final CTA — centered layout */
.sp-final { text-align: center; }
.sp-final .sp-body { margin: 16px auto 0; }
.sp-final .btn { margin-top: 28px; }
.sp-final .sp-eyebrow { justify-content: center; }
/* Two-tech duo (white cards side-by-side on light) */
.sp-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 34px;
}
@media (max-width: 760px) { .sp-duo { grid-template-columns: 1fr; } }
.sp-tech {
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: 16px;
padding: 30px;
box-shadow: 0 14px 34px -28px rgba(33,36,61,.5);
}
.sp-tech-k {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .12em;
color: var(--coral);
margin-bottom: 12px;
text-transform: uppercase;
}
.sp-tech h3 {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.15rem;
color: var(--navy);
margin: 0 0 10px;
letter-spacing: -.005em;
}
.sp-tech p {
color: var(--muted);
font-size: .98rem;
line-height: 1.65;
margin: 0;
}
/* Depth-option chips row (mono pill chips with navy border) */
.sp-depths {
margin-top: 26px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sp-depths span {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .08em;
color: var(--navy);
border: 1px solid rgba(57,62,102,.22);
border-radius: 999px;
padding: 7px 15px;
}
/* 4-col variant of .sp-cards with slightly tighter card sizing */
.sp-cards-4 {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 900px) { .sp-cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sp-cards-4 { grid-template-columns: 1fr; } }
.sp-cards-4 .sp-card { padding: 26px; }
.sp-cards-4 .sp-card h3 { font-size: 1.05rem; }
.sp-cards-4 .sp-card p { font-size: .93rem; }
/* 2-col variant of .sp-cards (for dark-section duos with mono kicker) */
.sp-cards-2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px) { .sp-cards-2 { grid-template-columns: 1fr; } }
/* Light-section variant of .sp-cards — 3-col white cards with dark text */
.sp-cards-light .sp-card {
background: #fff;
border-color: rgba(57,62,102,.10);
box-shadow: 0 14px 34px -28px rgba(33,36,61,.5);
}
.sp-cards-light .sp-card-n { color: var(--coral); }
.sp-cards-light .sp-card h3 { color: var(--navy); }
.sp-cards-light .sp-card p { color: var(--muted); }
/* Pain-points grid — 2-col on light with numbered coral badges */
.sp-pains {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 30px;
margin-top: 30px;
max-width: 900px;
}
@media (max-width: 640px) { .sp-pains { grid-template-columns: 1fr; } }
.sp-pain {
display: flex;
gap: 14px;
align-items: flex-start;
}
.sp-pain-num {
flex-shrink: 0;
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .14em;
color: var(--coral);
border: 1px solid rgba(247,55,96,.35);
border-radius: 6px;
padding: 4px 8px;
margin-top: 2px;
}
.sp-pain p {
color: var(--ink);
font-size: 1rem;
line-height: 1.55;
margin: 0;
}
/* Safety split: left column = heading/body, right column = numbered
list of siguranță layers. Used on dark section. */
.sp-safety {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 4vw, 56px);
align-items: center;
}
@media (max-width: 880px) {
.sp-safety { grid-template-columns: 1fr; gap: 28px; }
}
.sp-layers {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
gap: 16px;
}
.sp-layers li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.sp-ln {
flex-shrink: 0;
font-family: var(--ff-mono);
font-size: .7rem;
color: var(--teal);
border: 1px solid rgba(45,212,191,.35);
border-radius: 6px;
padding: 4px 8px;
margin-top: 2px;
letter-spacing: .08em;
}
.sp-layers b {
color: #fff;
font-weight: 500;
display: block;
margin-bottom: 2px;
}
.sp-layers span {
color: rgba(255,255,255,.6);
font-size: .95rem;
line-height: 1.55;
}
/* Tech-row: image + text side-by-side, alternating flip.
Used on light sections (see picking-automat). Rows separated
by a subtle border-top so the group reads as a list. */
.sp-techrow {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(28px, 4vw, 54px);
align-items: center;
padding: clamp(30px, 4vw, 46px) 0;
border-top: 1px solid rgba(57,62,102,.12);
}
.sp-techrow:first-of-type { border-top: none; }
.sp-techrow.flip .sp-tvisual { order: 2; }
@media (max-width: 860px) {
.sp-techrow { grid-template-columns: 1fr; gap: 22px; }
.sp-techrow.flip .sp-tvisual { order: 0; }
}
/* Tech-row visual: light styled placeholder with img on top */
.sp-tvisual {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(57,62,102,.14);
background:
radial-gradient(120% 120% at 30% 0%, rgba(57,62,102,.10), transparent 55%),
#e9ebf4;
margin: 0;
}
.sp-tvisual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}
/* Tech-row content: teal mono kicker, italic Cormorant H3, muted body */
.sp-tcontent {
display: flex;
flex-direction: column;
}
.sp-tcontent-k {
font-family: var(--ff-mono);
font-size: .7rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #12a594;
margin-bottom: 12px;
}
.sp-tcontent h3 {
color: var(--navy);
font-size: 1.35rem;
margin: 0 0 12px;
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
letter-spacing: -.005em;
line-height: 1.15;
}
.sp-tcontent p {
color: var(--muted);
font-size: 1rem;
margin: 0 0 18px;
line-height: 1.65;
}
/* Mono pill chips (used under .sp-tcontent) */
.sp-chips {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.sp-chips span {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: .06em;
color: var(--navy);
border: 1px solid rgba(57,62,102,.22);
border-radius: 999px;
padding: 6px 13px;
}
/* Bridge box on dark section: framed info paragraph + inline link */
.sp-bridge {
margin-top: 30px;
padding: 22px 26px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 14px;
background: rgba(255,255,255,.04);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.sp-bridge p {
color: rgba(255,255,255,.72);
font-size: .98rem;
margin: 0;
max-width: 60ch;
}
.sp-bridge-link {
margin-top: 0 !important;
white-space: nowrap;
}
/* Tech trio (4-up now): white cards with image thumb on top,
body below. Used on dark sections (cards stand out).
Reflows: 4 → 2 at ≤1100px → 1 at ≤640px. */
.sp-trio {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 44px;
}
@media (max-width: 1100px) { .sp-trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .sp-trio { grid-template-columns: 1fr; } }
.sp-trio-card {
background: #fff;
border: 1px solid rgba(57,62,102,.10);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 14px 34px -28px rgba(33,36,61,.5);
display: flex;
flex-direction: column;
}
.sp-trio-media {
margin: 0;
aspect-ratio: 16 / 9;
background:
radial-gradient(120% 120% at 30% 0%, rgba(57,62,102,.10), transparent 55%),
#e9ebf4;
position: relative;
overflow: hidden;
}
.sp-trio-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: transparent;
}
.sp-trio-body {
padding: 26px 28px 30px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.sp-trio-k {
font-family: var(--ff-mono);
font-size: .7rem;
letter-spacing: .14em;
color: var(--coral);
text-transform: uppercase;
margin: 0;
}
.sp-trio-body h3 {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.15rem;
color: var(--navy);
margin: 0;
letter-spacing: -.005em;
line-height: 1.25;
}
.sp-trio-body p {
color: var(--muted);
font-size: .96rem;
line-height: 1.65;
margin: 0;
flex: 1;
}
/* =============================================================
Homepage hero — blueprint → 3D (Three.js canvas background)
Full-viewport hero with canvas layered behind a gradient veil
and the copy overlaid via z-index. Mobile hides the canvas
entirely (matched to the mockup's isMobile detection).
============================================================= */
.section.hero-3d {
position: relative;
min-height: 100vh;
padding: 0;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
background: transparent;
}
.hero-veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(33,36,61,.9) 0%, rgba(33,36,61,.6) 32%, rgba(33,36,61,.06) 60%, rgba(33,36,61,.3) 100%),
linear-gradient(180deg, rgba(33,36,61,.55), transparent 24%, transparent 70%, rgba(33,36,61,.85));
}
.hero-wrap {
position: relative;
z-index: 2;
width: 100%;
}
.hero-in {
max-width: 620px;
padding: clamp(90px, 12vh, 140px) 0 clamp(120px, 16vh, 170px);
}
.hero-eyebrow-3d {
font-family: var(--ff-mono);
font-size: .72rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: #ff5c7d;
display: inline-flex;
align-items: center;
gap: .7em;
margin-bottom: 22px;
}
.hero-eyebrow-3d::before {
content: "";
display: block;
width: 26px;
height: 1px;
background: currentColor;
}
.hero-title-3d {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(2.6rem, 6vw, 4.3rem);
line-height: 1.04;
color: #fff;
margin: 0;
letter-spacing: -.005em;
}
.hero-sub-3d {
margin-top: 20px;
color: rgba(255,255,255,.62);
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
max-width: 52ch;
line-height: 1.65;
}
.hero-ctas-3d {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-phase {
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 26px;
text-align: center;
pointer-events: none;
font-family: var(--ff-mono);
font-size: .66rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin: 0;
}
.hero-phase b {
color: var(--teal);
font-weight: 500;
}
@media (max-width: 640px) {
.hero-phase { display: none; }
}
/* =============================================================
Mobile bottom bar — floating liquid-glass, 4 slots, no FAB.
Visible only ≤1024px. Replaces the older .bottom-nav pill.
============================================================= */
@media (min-width: 1025px) {
.mobile-bar,
.mbar-backdrop,
.mbar-sheet { display: none !important; }
}
/* Body gets extra bottom padding when the bar is visible so it
doesn't overlap the last section / footer. Respects iOS safe area. */
@media (max-width: 1024px) {
body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
.mobile-bar {
position: fixed;
left: 7px;
right: 7px;
bottom: calc(7px + env(safe-area-inset-bottom, 0px));
z-index: 90;
display: flex;
gap: 6px;
padding: 8px;
border-radius: 20px;
background: rgba(57, 62, 102, .60);
-webkit-backdrop-filter: blur(24px) saturate(1.2);
backdrop-filter: blur(24px) saturate(1.2);
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 12px 40px -10px rgba(20, 24, 44, .45);
font-family: var(--ff-ui);
}
.mbar-slot {
flex: 1;
min-height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 4px;
border-radius: 14px;
background: transparent;
border: 0;
color: rgba(255, 255, 255, .72);
font-family: var(--ff-ui);
font-weight: 500;
font-size: .72rem;
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .1s ease;
-webkit-tap-highlight-color: transparent;
}
.mbar-slot:hover,
.mbar-slot:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .06);
outline: 0;
}
.mbar-slot:active { transform: scale(.96); }
/* Active-page indicator — coral pill. NEVER applied to the Home slot
(Acasă stays neutral even on the homepage, per spec: "doar pe home sa nu fie"). */
.mbar-slot.active {
background: var(--coral);
color: #fff;
}
.mbar-slot.active:hover,
.mbar-slot.active:focus-visible {
background: var(--coral);
color: #fff;
filter: brightness(1.08);
}
.mbar-slot svg {
width: 22px;
height: 22px;
display: block;
}
.mbar-slot span {
line-height: 1;
}
/* Contact used to be a permanent coral CTA — dropped so it stays
neutral like the other slots. Coral is now reserved strictly for
the current-page indicator (.mbar-slot.active). */
/* Shared backdrop for both sheets */
.mbar-backdrop {
position: fixed;
inset: 0;
z-index: 130;
background: rgba(20, 24, 44, .55);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
body.mbar-open .mbar-backdrop {
opacity: 1;
pointer-events: auto;
}
/* Bottom sheet — floating dark-glass card that sits ABOVE the bar,
not a full-width white sheet. Modeled on the Glass Gardens contact
modal but tinted for the LogiPath navy palette. */
.mbar-sheet {
position: fixed;
left: 7px;
right: 7px;
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
margin: 0 auto;
max-width: 480px;
z-index: 140;
background: rgba(30, 34, 62, .82);
-webkit-backdrop-filter: blur(32px) saturate(180%);
backdrop-filter: blur(32px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
padding: 20px;
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .22s ease;
box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
display: flex;
flex-direction: column;
gap: 10px;
max-height: 72vh;
overflow-y: auto;
}
.mbar-sheet.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Header row: title left + X close right */
.mbar-sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.mbar-sheet-title {
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255, 255, 255, .95);
font-weight: 500;
}
.mbar-sheet-close {
background: none;
border: 0;
color: rgba(255, 255, 255, .9);
font-size: 14px;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
transition: background .15s ease, color .15s ease;
font-family: var(--ff-ui);
}
.mbar-sheet-close:hover,
.mbar-sheet-close:focus-visible {
background: rgba(255, 255, 255, .10);
color: #fff;
outline: 0;
}
/* Legacy handle no longer used (kept hidden if any older HTML still has it) */
.mbar-sheet-handle { display: none; }
/* Item = dark-glass button on the modal surface */
.mbar-sheet-item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
text-decoration: none;
color: #fff;
transition: background .18s ease, border-color .18s ease;
}
.mbar-sheet-item:hover,
.mbar-sheet-item:focus-visible {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .20);
outline: 0;
}
.mbar-sheet-item-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
color: #fff;
}
.mbar-sheet-item-icon svg {
width: 22px;
height: 22px;
color: #fff;
}
.mbar-sheet-item-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.mbar-sheet-item-title {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1rem;
color: #fff;
letter-spacing: .01em;
}
.mbar-sheet-item-sub {
font-family: var(--ff-ui);
font-size: .84rem;
color: rgba(255, 255, 255, .72);
line-height: 1.35;
}
/* WhatsApp — green accent on hover */
.mbar-sheet-item.mbar-whatsapp:hover,
.mbar-sheet-item.mbar-whatsapp:focus-visible {
background: rgba(37, 211, 102, .12);
border-color: rgba(37, 211, 102, .28);
}
body.mbar-open { overflow: hidden; }
/* =============================================================
Configurator chooser — 3-card entry (/configurator.html).
============================================================= */
.chooser-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
margin-top: var(--s-6);
}
@media (max-width: 1024px) {
.chooser-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
.chooser-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 28px;
background: #fff;
border: 1px solid rgba(57, 62, 102, .10);
border-radius: 20px;
text-decoration: none;
color: var(--navy);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
overflow: hidden;
}
.chooser-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px -30px rgba(20, 24, 44, .35);
border-color: rgba(247, 55, 96, .35);
}
.chooser-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 20px;
background: linear-gradient(180deg, rgba(247, 55, 96, 0) 0%, rgba(247, 55, 96, .04) 100%);
opacity: 0;
transition: opacity .18s ease;
pointer-events: none;
}
.chooser-card:hover::after { opacity: 1; }
.chooser-card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(57, 62, 102, .07);
color: var(--navy);
margin-bottom: 4px;
}
.chooser-card-icon svg { width: 30px; height: 30px; }
.chooser-card-tag {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral);
font-weight: 500;
}
.chooser-card-title {
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.35rem;
color: var(--navy);
line-height: 1.2;
margin: 0;
letter-spacing: -.01em;
}
.chooser-card-desc {
font-family: var(--ff-ui);
font-size: .95rem;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
.chooser-card-list {
list-style: none;
padding: 0;
margin: 6px 0 auto;
display: grid;
gap: 8px;
}
.chooser-card-list li {
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .04em;
color: var(--navy);
padding-left: 16px;
position: relative;
line-height: 1.4;
}
.chooser-card-list li::before {
content: "·";
position: absolute;
left: 4px;
color: var(--coral);
font-weight: 600;
}
.chooser-card-cta {
font-family: var(--ff-ui);
font-weight: 500;
font-size: .95rem;
color: var(--coral);
margin-top: 10px;
padding-top: 16px;
border-top: 1px solid rgba(57, 62, 102, .10);
display: flex;
align-items: center;
gap: 6px;
}
/* Alt variant for the "unsure" quiz card — visually softer */
.chooser-card-alt {
background: linear-gradient(180deg, #fbfbfd 0%, #f2f3f8 100%);
border-color: rgba(57, 62, 102, .14);
}
.chooser-card-alt .chooser-card-icon {
background: rgba(45, 212, 191, .12);
color: #0f766e;
}
.chooser-microcopy {
margin-top: var(--s-6);
text-align: center;
font-family: var(--ff-ui);
font-size: .88rem;
color: var(--muted);
max-width: 62ch;
margin-left: auto;
margin-right: auto;
}
.chooser-link {
color: var(--coral);
text-decoration: none;
font-weight: 500;
}
.chooser-link:hover { text-decoration: underline; }
/* =============================================================
Brief picking (/brief-picking.html) — Exotec-style form wizard.
Simple label + explanation + input rhythm, 7 pages, progress bar.
============================================================= */
.bp-back-to-chooser {
font-family: var(--ff-ui);
font-size: .88rem;
color: var(--muted);
text-decoration: none;
transition: color .15s ease;
}
.bp-back-to-chooser:hover { color: var(--coral); }
.bp-form {
background: #fff;
border: 1px solid rgba(57, 62, 102, .10);
border-radius: 20px;
padding: clamp(24px, 4vw, 40px);
box-shadow: 0 24px 60px -30px rgba(20, 24, 44, .15);
}
.bp-progress {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 1px solid rgba(57, 62, 102, .10);
font-family: var(--ff-mono);
font-size: .75rem;
letter-spacing: .08em;
color: var(--muted);
}
.bp-progress-bar {
flex: 1;
height: 4px;
background: rgba(57, 62, 102, .10);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.bp-progress-fill {
display: block;
height: 100%;
background: var(--coral);
border-radius: 2px;
width: 14%;
transition: width .28s ease;
}
.bp-section-label {
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral);
font-weight: 500;
padding: 0 0 20px;
}
.bp-page[hidden] { display: none; }
.bp-q {
padding: 18px 0;
border-top: 1px solid rgba(57, 62, 102, .06);
}
.bp-q:first-of-type { border-top: 0; padding-top: 0; }
.bp-q-title {
display: block;
font-family: var(--ff-ui);
font-weight: 600;
font-size: 1.02rem;
color: var(--navy);
line-height: 1.35;
margin-bottom: 8px;
}
.bp-q-n {
color: var(--coral);
font-family: var(--ff-mono);
font-weight: 500;
font-size: .95em;
margin-right: 4px;
}
.bp-q-help {
font-family: var(--ff-ui);
font-style: italic;
font-size: .88rem;
color: var(--muted);
line-height: 1.55;
margin-bottom: 12px;
}
.bp-q-help b {
font-style: normal;
font-weight: 600;
color: var(--navy);
}
.bp-input {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(57, 62, 102, .20);
border-radius: 10px;
background: #fff;
font-family: var(--ff-ui);
font-size: .96rem;
color: var(--navy);
transition: border-color .15s ease, box-shadow .15s ease;
}
.bp-input:focus {
outline: 0;
border-color: var(--coral);
box-shadow: 0 0 0 3px rgba(247, 55, 96, .12);
}
.bp-input::placeholder { color: rgba(57, 62, 102, .38); }
.bp-input:disabled { background: rgba(57, 62, 102, .04); color: var(--muted); }
.bp-textarea { resize: vertical; min-height: 100px; }
.bp-input-inline {
margin-top: 8px;
margin-left: 30px;
max-width: calc(100% - 30px);
}
.bp-radio-list {
display: grid;
gap: 8px;
}
.bp-radio {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid rgba(57, 62, 102, .14);
border-radius: 10px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
font-family: var(--ff-ui);
font-size: .95rem;
color: var(--navy);
}
.bp-radio:hover { border-color: rgba(247, 55, 96, .35); background: rgba(247, 55, 96, .03); }
.bp-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid rgba(57, 62, 102, .35);
border-radius: 50%;
flex-shrink: 0;
cursor: pointer;
position: relative;
transition: border-color .15s ease;
}
.bp-radio input[type="radio"]:checked {
border-color: var(--coral);
background: var(--coral);
box-shadow: inset 0 0 0 3px #fff;
}
.bp-radio-with-input {
flex-wrap: wrap;
}
.bp-radio-with-input .bp-input-inline {
flex-basis: 100%;
}
.bp-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--ff-ui);
font-size: .92rem;
color: var(--navy);
line-height: 1.5;
cursor: pointer;
}
.bp-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin-top: 2px;
border: 2px solid rgba(57, 62, 102, .35);
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
position: relative;
transition: all .15s ease;
}
.bp-checkbox input[type="checkbox"]:checked {
background: var(--coral);
border-color: var(--coral);
}
.bp-checkbox input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 0;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bp-intro {
font-family: var(--ff-ui);
color: var(--muted);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(57, 62, 102, .06);
}
.bp-controls {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(57, 62, 102, .10);
}
.bp-controls .btn-primary { margin-left: auto; }
.bp-microcopy {
margin-top: 16px;
font-family: var(--ff-ui);
font-size: .82rem;
color: var(--muted);
text-align: center;
}
/* Success state */
.bp-success {
text-align: center;
padding: 40px 20px;
}
.bp-success-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: rgba(45, 212, 191, .18);
color: #0f766e;
display: grid;
place-items: center;
}
.bp-success-icon svg { width: 32px; height: 32px; }
.bp-success-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: 1.75rem;
color: var(--navy);
margin: 0 0 12px;
}
.bp-success-body {
font-family: var(--ff-ui);
font-size: 1rem;
color: var(--muted);
line-height: 1.6;
max-width: 480px;
margin: 0 auto;
}
.bp-reset {
color: var(--muted) !important;
border-color: rgba(57, 62, 102, .15) !important;
background: transparent !important;
}
.bp-reset:hover { color: var(--coral) !important; border-color: rgba(247, 55, 96, .35) !important; }
/* =============================================================
Date proiect (/date-proiect.html) — widget-specific classes.
Reuses .bp-* form skeleton, adds preset chips, toggles, repeat rows,
upload tabs, chip multi-select, TBD marker, suffix labels.
============================================================= */
/* TBD — "de verificat" per question */
.dp-tbd {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .06em;
color: var(--muted);
cursor: pointer;
transition: background .15s ease, color .15s ease;
user-select: none;
}
.dp-tbd:hover { background: rgba(57, 62, 102, .05); }
.dp-tbd input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid rgba(57, 62, 102, .25);
border-radius: 4px;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: all .15s ease;
}
.dp-tbd input[type="checkbox"]:checked {
background: var(--coral);
border-color: var(--coral);
}
.dp-tbd input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: 0;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.dp-tbd.checked {
color: var(--coral);
background: rgba(247, 55, 96, .08);
}
/* Inline field with suffix unit */
.dp-field-with-suffix {
position: relative;
}
.dp-field-with-suffix .bp-input { padding-right: 60px; }
.dp-field-with-suffix .dp-suffix {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-family: var(--ff-mono);
font-size: .74rem;
color: var(--muted);
pointer-events: none;
letter-spacing: .02em;
}
/* Row of inline fields (auto-fit) */
.dp-inline-fields {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.dp-triple {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px) {
.dp-triple { grid-template-columns: 1fr; }
}
/* Preset chips (pallet types, schedules, temperatures) */
.dp-preset-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.dp-preset-chip {
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .04em;
padding: 7px 13px;
border: 1px solid rgba(57, 62, 102, .18);
border-radius: 999px;
cursor: pointer;
background: transparent;
color: var(--navy);
transition: all .15s ease;
}
.dp-preset-chip:hover {
border-color: rgba(247, 55, 96, .40);
color: var(--coral);
background: rgba(247, 55, 96, .04);
}
.dp-preset-chip.selected {
border-color: var(--coral);
color: #fff;
background: var(--coral);
}
/* Multi-select chips (Q12 storage criteria) */
.dp-chips-multi {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dp-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid rgba(57, 62, 102, .18);
border-radius: 999px;
cursor: pointer;
font-family: var(--ff-ui);
font-size: .88rem;
color: var(--navy);
transition: all .15s ease;
user-select: none;
}
.dp-chip:hover { border-color: rgba(247, 55, 96, .40); }
.dp-chip input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border: 1.5px solid rgba(57, 62, 102, .30);
border-radius: 3px;
cursor: pointer;
position: relative;
transition: all .15s ease;
}
.dp-chip input[type="checkbox"]:checked {
background: var(--coral);
border-color: var(--coral);
}
.dp-chip input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 3px;
top: -1px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.dp-chip:has(input:checked) {
border-color: var(--coral);
background: rgba(247, 55, 96, .06);
color: var(--coral);
}
/* Repeat rows (Q6 pallet types, Q14 production lines) */
.dp-repeat {
display: grid;
gap: 8px;
margin-bottom: 8px;
}
.dp-repeat-row {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 32px;
gap: 8px;
align-items: center;
}
@media (max-width: 640px) {
.dp-repeat-row { grid-template-columns: 1fr 1fr 32px; }
.dp-repeat-row > *:first-child { grid-column: 1 / -1; }
}
.dp-repeat-remove {
width: 32px;
height: 32px;
border-radius: 8px;
background: transparent;
border: 1px solid rgba(57, 62, 102, .18);
color: var(--muted);
cursor: pointer;
font-size: 14px;
transition: all .15s ease;
}
.dp-repeat-remove:hover {
border-color: var(--coral);
color: var(--coral);
background: rgba(247, 55, 96, .06);
}
.dp-repeat-add {
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .04em;
color: var(--coral);
border: 1px dashed rgba(247, 55, 96, .30);
border-radius: 10px;
padding: 10px 14px;
background: transparent;
cursor: pointer;
transition: all .15s ease;
}
.dp-repeat-add:hover {
background: rgba(247, 55, 96, .06);
border-style: solid;
}
/* Upload tabs (Q1 AutoCAD) */
.dp-upload-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid rgba(57, 62, 102, .10);
margin-bottom: 12px;
}
.dp-upload-tab {
padding: 8px 14px;
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .06em;
color: var(--muted);
background: transparent;
border: 0;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s ease, border-color .15s ease;
}
.dp-upload-tab:hover { color: var(--navy); }
.dp-upload-tab.active {
color: var(--coral);
border-bottom-color: var(--coral);
}
.dp-upload-panel { display: none; }
.dp-upload-panel.active { display: block; }
/* =============================================================
Liquid glass panel treatment — light surfaces only.
Problem: the interactive coral cursor grid on light sections
bleeds through solid white cards, showing pink lines through
form panels and card interiors. Solution: turn the LARGE
containers into semi-opaque frosted-glass surfaces — the grid
below softens into a diffuse blur rather than sharp lines,
and the hover glow reads as a discrete light patch through
the material (arguably more elegant than blocking it).
Applied ONLY to large containers on light sections. Small
elements (inputs, chips, buttons, mono badges) stay on solid
backgrounds so text remains crisp and scroll stays smooth.
Dark section glass (mobile-bar, mbar-sheet, cursor-glow overlay)
is unchanged — it already uses this pattern.
============================================================= */
/* Cardurile care primesc fundal alb solid PLUS lift z-index deasupra
cursor-glow (z:1). Grid-ul rămâne vizibil DOAR pe fundalul secțiunii
dintre carduri; nu mai bleed-uiește prin interiorul lor. */
.bp-form,
.chooser-card,
.sp-cards-light .sp-card,
.sp-stype,
.sp-tech,
.config-form-card,
.calc-main .card,
.calc-main .sim,
.calc-main .gate-card {
position: relative;
z-index: 2;
background: #fff;
}
/* Cardurile din calculator care au fundal navy propriu — le urcăm doar
z-index-ul, fără să-i alb-uim (păstrăm navy solid). */
.calc-main .result-hero,
.calc-main .hidden-costs {
position: relative;
z-index: 2;
}
/* Dropdown-ul „Soluții" din header — trebuie să rămână ABSOLUTE (definit
sus la linia ~356), nu relative. Aici doar boost la z-index ca să stea
deasupra cursor-glow (z:1) fără să-l scoatem din poziționare, plus
fundal alb solid ca grid-ul să nu bleed-uiască prin el. */
.dropdown-menu {
z-index: 50;
background: #fff;
}
/* Alt chooser card — păstrează gradientul subtil care-l distinge de celelalte. */
.chooser-card-alt {
background: linear-gradient(180deg, #fbfbfd 0%, #f2f3f8 100%);
}
/* Cards & media containers care AU DEJA fundal stilizat propriu (gradient,
navy tint, sau light-gray). Nu le rescriem fundalul — doar le urcăm peste
cursor-glow, ca grid-ul să nu curgă prin ele. */
.sol-card,
.sol-card-media,
.sp-trio-card,
.sp-visual,
.sp-visual-light,
.sp-tvisual {
position: relative;
z-index: 2;
}
/* Inputs, textareas, selects, chips and buttons INSIDE glass panels
stay opaque #fff so text stays perfectly legible and paint stays fast. */
.bp-form .bp-input,
.bp-form .bp-textarea,
.bp-form select {
background: #fff;
}
.bp-form .bp-input:focus {
/* keep focus ring readable on top of glass */
background: #fff;
}
/* =============================================================
Mobile responsive polish (≤880px):
- hero content nu se lipește de margini
- wizard-urile nu ies din ecran
- mobile bar (jos, ≤1024px) primește clearance suficient
- footer se simplifică la doar © 2026 LogiPath
============================================================= */
/* Root guard-rails: nu se genera scroll orizontal accidental.
IMPORTANT: `overflow: clip` în loc de `overflow-x: hidden` — clip nu
creează un scroll container, deci NU sparge `position: sticky` pe header.
Suport: Chrome 90+, Firefox 81+, Safari 16+ (macOS 13+). Fallback la
overflow-x hidden pentru browsere vechi. */
html, body {
overflow-x: hidden; /* fallback pentru browsere vechi */
overflow-x: clip; /* modern — nu sparge sticky */
max-width: 100vw;
}
/* Bump body clearance for the floating mobile-bar (was 84px) */
@media (max-width: 1024px) {
body { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
/* Mobile hero + container padding — asigură respiro față de margini */
@media (max-width: 880px) {
.container {
padding-left: clamp(20px, 5vw, 32px);
padding-right: clamp(20px, 5vw, 32px);
}
.sp-hero-grid {
grid-template-columns: 1fr;
gap: var(--s-5);
}
.sp-hero-title,
.hero-title { font-size: clamp(2rem, 8vw, 3rem); }
/* Hero CTA button — full-width on mobile.
Se aplică pe TOATE hero-urile: .sp-cta-row (solutii + despre + contact),
.hero-ctas-3d (homepage 3D hero), .cta-row (chooser + alte pagini). */
.sp-cta-row,
.hero-ctas-3d,
.cta-row {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.sp-cta-row .btn,
.hero-ctas-3d .btn,
.cta-row .btn {
width: 100%;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
}
/* Wizard responsive: cards + inputs nu ies din ecran, chips wrap */
@media (max-width: 640px) {
.bp-form {
padding: clamp(18px, 5vw, 28px);
max-width: 100%;
box-sizing: border-box;
}
.bp-input,
.bp-textarea,
select.bp-input {
width: 100%;
box-sizing: border-box;
max-width: 100%;
}
.dp-inline-fields { grid-template-columns: 1fr 1fr; }
.dp-triple { grid-template-columns: 1fr; }
.dp-preset-chips,
.dp-chips-multi {
flex-wrap: wrap;
}
/* Configurator wizard (nehotarati.html) — choice cards single-col */
.config-form-card { padding: clamp(18px, 5vw, 28px) !important; }
.choice-list { grid-template-columns: 1fr !important; }
.config-progress {
flex-wrap: wrap;
gap: 8px;
}
/* Repeat rows collapse to single column on tight screens */
.dp-repeat-row {
grid-template-columns: 1fr;
gap: 6px;
}
.dp-repeat-row > *:not(:last-child) { grid-column: 1 / -1; }
.dp-repeat-remove {
justify-self: end;
grid-column: 1 / -1;
}
.bp-controls {
flex-wrap: wrap;
gap: 8px;
}
.bp-controls .btn { flex: 1; min-width: 130px; }
}
/* Chooser cards single-column on mobile (already handled ≤1024, keep) */
/* Simplified mobile footer: hide everything except copyright core */
@media (max-width: 880px) {
.site-footer-row nav,
.site-footer-row .brand {
display: none;
}
.site-footer-row {
justify-content: center;
text-align: center;
padding: var(--s-4) 0;
}
.site-footer-copy .footer-extra {
display: none;
}
.site-footer-copy {
font-size: .8rem;
letter-spacing: .04em;
}
}
/* =============================================================
FAQ section — folosit pe cele 4 pagini de soluție, înainte de CTA final.
`` native pentru expand/collapse, zero JS.
============================================================= */
.sp-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 32px;
}
.sp-faq-item {
border: 1px solid rgba(57, 62, 102, .10);
border-radius: 14px;
padding: 20px 24px;
background: rgba(255, 255, 255, .5);
transition: border-color .18s ease, background .18s ease;
}
.sp-faq-item[open] {
border-color: rgba(247, 55, 96, .25);
background: rgba(255, 255, 255, .8);
}
.section.dark .sp-faq-item {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .10);
}
.section.dark .sp-faq-item[open] {
background: rgba(255, 255, 255, .07);
border-color: rgba(247, 55, 96, .35);
}
.sp-faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.02rem;
color: var(--navy);
line-height: 1.4;
}
.section.dark .sp-faq-item summary { color: #fff; }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary::after {
content: "";
width: 12px;
height: 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .2s ease;
flex-shrink: 0;
opacity: .55;
}
.sp-faq-item[open] summary::after {
transform: rotate(-135deg);
opacity: 1;
}
.sp-faq-item p {
margin-top: 16px;
font-family: var(--ff-ui);
font-size: .96rem;
color: var(--muted);
line-height: 1.65;
max-width: 78ch;
}
.section.dark .sp-faq-item p { color: rgba(255, 255, 255, .70); }
/* =============================================================
BLOG / RESURSE — cards, article typography, tabele, blockquote,
related articles, badge „În curând".
Design system consistent cu restul site-ului.
============================================================= */
/* Grid de carduri — folosit pe /resurse.html și pe secțiunea homepage */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 32px);
margin-top: clamp(24px, 4vw, 40px);
}
@media (max-width: 1024px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.blog-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Card — clickabil, hover translateY, glass background */
.blog-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(57, 62, 102, .10);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--navy);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
position: relative;
z-index: 2;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -20px rgba(20, 24, 44, .25);
border-color: rgba(247, 55, 96, .3);
}
.blog-card.is-soon {
cursor: default;
opacity: .82;
}
.blog-card.is-soon:hover {
transform: none;
box-shadow: none;
border-color: rgba(57, 62, 102, .10);
}
.blog-card-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background:
radial-gradient(120% 120% at 30% 0%, rgba(57,62,102,.08), transparent 55%),
#e9ebf4;
}
.blog-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1; /* acoperă pseudo-elementul data-label când imaginea reală se încarcă */
}
.blog-card-media[data-label]::before {
content: attr(data-label);
z-index: 0; /* rămâne sub imagine, vizibil doar când ![]()
lipsește sau eșuează */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .14em;
color: rgba(57, 62, 102, .40);
text-transform: uppercase;
text-align: center;
padding: 0 20px;
}
.blog-card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
flex: 1;
gap: 10px;
}
.blog-card-category {
font-family: var(--ff-mono);
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--coral);
font-weight: 500;
}
.blog-card-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: 1.4rem;
line-height: 1.2;
color: var(--navy);
margin: 0;
letter-spacing: -.005em;
}
.blog-card-excerpt {
font-family: var(--ff-ui);
font-weight: 300;
font-size: .95rem;
color: var(--muted);
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-meta {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(57, 62, 102, .06);
font-family: var(--ff-mono);
font-size: .72rem;
letter-spacing: .06em;
color: var(--muted);
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
}
.blog-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card-meta span + span::before {
content: "·";
margin-right: 10px;
color: rgba(57, 62, 102, .35);
}
.blog-card-soon-badge {
font-family: var(--ff-mono);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid rgba(57, 62, 102, .18);
border-radius: 999px;
padding: 3px 10px;
align-self: flex-start;
}
/* ============================================================
Article body typography — lisibility-first
============================================================ */
.article-body {
max-width: 720px;
margin: 0 auto;
font-family: var(--ff-ui);
font-weight: 300;
font-size: 1.1rem;
line-height: 1.75;
color: var(--ink);
}
.article-body > * + * { margin-top: 24px; }
.article-body p {
margin: 0;
}
.article-body strong {
color: var(--navy);
font-weight: 600;
}
.article-body em {
font-style: italic;
}
.article-body a {
color: var(--coral);
text-decoration: none;
border-bottom: 1px solid rgba(247, 55, 96, .35);
transition: border-color .15s ease;
}
.article-body a:hover { border-bottom-color: var(--coral); }
.article-body h2 {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.2;
color: var(--navy);
letter-spacing: -.005em;
margin-top: 48px !important;
margin-bottom: 8px;
}
.article-body h3 {
font-family: var(--ff-ui);
font-weight: 500;
font-size: 1.3rem;
color: var(--navy);
margin-top: 32px !important;
margin-bottom: 4px;
}
/* Bullet lists — coral dot ca .adv */
.article-body ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.article-body ul li {
position: relative;
padding-left: 22px;
line-height: 1.7;
}
.article-body ul li::before {
content: "";
position: absolute;
left: 0;
top: .7em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--coral);
}
.article-body ol {
padding-left: 24px;
margin: 0;
display: grid;
gap: 12px;
}
.article-body ol li::marker { color: var(--coral); font-weight: 600; }
/* Blockquote — coral vertical bar, italic */
.article-body blockquote {
margin: 32px 0;
padding: 8px 0 8px 24px;
border-left: 3px solid var(--coral);
font-style: italic;
color: var(--navy);
font-size: 1.15rem;
line-height: 1.6;
}
/* Tabele — navy header + rânduri alternate. Responsive cu overflow-x */
.article-body .table-wrap {
overflow-x: auto;
margin: 24px 0;
border-radius: 12px;
border: 1px solid rgba(57, 62, 102, .10);
}
.article-body table {
width: 100%;
border-collapse: collapse;
font-family: var(--ff-ui);
font-size: .95rem;
min-width: 480px;
}
.article-body thead {
background: var(--navy);
color: #fff;
}
.article-body th {
padding: 12px 16px;
text-align: left;
font-weight: 500;
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.article-body td {
padding: 12px 16px;
border-top: 1px solid rgba(57, 62, 102, .08);
color: var(--ink);
}
.article-body tbody tr:nth-child(even) { background: var(--bg); }
/* Article header (hero) — dark section cu eyebrow, H1, subtitle, meta */
.article-hero-eyebrow {
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral);
font-weight: 500;
}
.article-hero-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(2.2rem, 5vw, 3.6rem);
line-height: 1.1;
color: #fff;
letter-spacing: -.01em;
margin: 16px 0 12px;
max-width: 22ch;
}
.article-hero-subtitle {
font-family: var(--ff-ui);
font-weight: 300;
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.5;
color: rgba(255, 255, 255, .78);
margin: 0 0 20px;
max-width: 62ch;
}
.article-hero-meta {
font-family: var(--ff-mono);
font-size: .78rem;
letter-spacing: .1em;
color: rgba(255, 255, 255, .55);
display: flex;
gap: 12px;
align-items: center;
}
.article-hero-meta span::before {
content: "·";
margin-right: 12px;
color: rgba(255, 255, 255, .30);
}
.article-hero-meta span:first-child::before { content: ""; margin: 0; }
/* Hero image sub hero — full-width */
.article-hero-image {
margin: -40px auto 0;
max-width: 1120px;
padding: 0 clamp(20px, 5vw, 32px);
position: relative;
z-index: 2;
}
.article-hero-image figure {
border-radius: 20px;
overflow: hidden;
aspect-ratio: 16 / 9;
background:
radial-gradient(120% 120% at 30% 0%, rgba(57,62,102,.10), transparent 55%),
#e9ebf4;
margin: 0;
position: relative;
}
.article-hero-image figure[data-label]::before {
content: attr(data-label);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--ff-mono);
font-size: .82rem;
letter-spacing: .16em;
color: rgba(57, 62, 102, .40);
text-transform: uppercase;
z-index: 0; /* rămâne sub imagine, vizibil doar când ![]()
lipsește */
}
.article-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1; /* acoperă pseudo-elementul data-label */
}
@media (max-width: 640px) {
.article-hero-image { margin-top: -20px; }
.article-hero-image figure { aspect-ratio: 16 / 9; }
}
/* Related articles la finalul articolului */
.related-articles-wrap {
border-top: 1px solid rgba(57, 62, 102, .10);
padding-top: clamp(32px, 5vw, 48px);
margin-top: clamp(48px, 6vw, 64px);
}
.related-articles-label {
font-family: var(--ff-mono);
font-size: .74rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--coral);
font-weight: 500;
margin-bottom: 12px;
}
.related-articles-title {
font-family: var(--ff-display);
font-style: italic;
font-weight: 600;
font-size: clamp(1.6rem, 2.5vw, 2rem);
color: var(--navy);
margin: 0 0 24px;
}
/* Butonul "vezi toate" pe secțiunea homepage — link mono coral */
.blog-see-more {
font-family: var(--ff-mono);
font-size: .82rem;
letter-spacing: .14em;
color: var(--coral);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: clamp(24px, 4vw, 32px);
border-bottom: 1px solid rgba(247, 55, 96, .3);
padding-bottom: 2px;
transition: border-color .15s ease;
}
.blog-see-more:hover { border-color: var(--coral); }
/* Compact hero pentru /resurse.html */
.section.dark.resurse-hero { padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px); }
/* ============== TL;DR pe paginile de soluții ============== */
.sp-tldr-wrap {
max-width: 820px;
margin: 0 auto;
background: #fff;
border: 1px solid rgba(57, 62, 102, .10);
border-left: 3px solid var(--pink, #F73760);
border-radius: 0 12px 12px 0;
padding: 22px 26px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.sp-tldr-label {
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pink, #F73760);
font-weight: 500;
white-space: nowrap;
padding-top: 3px;
flex-shrink: 0;
}
.sp-tldr-body {
font-family: var(--ff-ui);
font-weight: 300;
font-size: 1.02rem;
line-height: 1.65;
color: var(--ink);
margin: 0;
}
.sp-tldr-body strong { color: var(--navy); font-weight: 500; }
.section.light.sp-tldr-section { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(20px, 3vw, 32px); }
@media (max-width: 640px) {
.sp-tldr-wrap { flex-direction: column; gap: 8px; padding: 20px 22px; }
.sp-tldr-body { font-size: 0.98rem; }
}
/* ============================================================
BREADCRUMBS — navigație discretă, sticky sub header cu fundal
propriu ca să nu se amestece cu textul de pe pagina de dedesubt
============================================================ */
.breadcrumbs {
font-family: var(--ff-mono);
font-size: 0.72rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
padding: 12px 0;
position: sticky;
top: 72px; /* fix sub header sticky (72px desktop) */
z-index: 40; /* sub header (z:100) dar peste conținut și cursor-glow */
background: rgba(244, 245, 250, 0.94); /* var(--bg) semi-opac */
-webkit-backdrop-filter: saturate(1.4) blur(10px);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid rgba(57, 62, 102, .08);
}
@media (max-width: 880px) {
.breadcrumbs { top: 64px; padding: 10px 0; } /* header mobil = 64px */
}
.breadcrumbs .container {
display: flex;
align-items: center;
justify-content: center; /* CENTRAT pe pagină */
flex-wrap: wrap;
gap: 2px 6px;
}
.breadcrumbs a {
color: var(--muted);
text-decoration: none;
transition: color .15s ease;
}
.breadcrumbs a:hover { color: var(--coral); }
.breadcrumbs .sep {
color: rgba(122, 127, 158, .5);
margin: 0 4px;
font-family: inherit;
}
.breadcrumbs .current {
color: var(--navy);
font-weight: 500;
max-width: 60ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) {
.breadcrumbs { font-size: 0.68rem; }
.breadcrumbs .current { max-width: 24ch; }
}
/* Link „← Înapoi la articole" la finalul articolelor */
.back-to-resurse {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 32px;
font-family: var(--ff-mono);
font-size: 0.78rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color .15s ease, transform .15s ease;
}
.back-to-resurse:hover {
color: var(--coral);
transform: translateX(-3px);
}
/* =============================================================
Homepage hero — automated warehouse animation (1-minute loop)
Desktop: the scene sits to the right of the copy.
Phone: the scene goes under the copy, smaller.
============================================================= */
.hero-3d .hero-canvas { left: 47%; width: 53%; }
.hero-3d .hero-veil {
background:
linear-gradient(90deg, rgba(33,36,61,1) 0%, rgba(33,36,61,.85) 40%, rgba(33,36,61,0) 50%),
linear-gradient(180deg, rgba(33,36,61,.4), transparent 18%, transparent 82%, rgba(33,36,61,.6));
}
.hero-phase .dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--teal, #2DD4BF); box-shadow: 0 0 10px var(--teal, #2DD4BF);
margin-right: .7em; vertical-align: 1px;
}
@media (max-width: 760px) {
.section.hero-3d { flex-direction: column; align-items: stretch; min-height: 0; }
.hero-3d .hero-canvas { position: relative; left: 0; width: 100%; height: 62vw; order: 2; }
.hero-3d .hero-veil { display: none; }
.hero-in { padding: 90px 0 10px; }
.hero-phase { position: relative; bottom: auto; order: 3; padding: 6px 16px 26px; display: block !important; }
}
/* Hero shortcuts: straight to a solution or the calculator, visible without scrolling */
.hero-paths { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 26px; }
.hero-paths a {
font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.78); text-decoration: none;
padding: 7px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
transition: border-color .2s, color .2s, background .2s;
}
.hero-paths a:hover, .hero-paths a:focus-visible { color: #fff; border-color: var(--teal, #2DD4BF); background: rgba(45,212,191,.08); }
.hero-paths a.hero-paths-tool { color: var(--teal, #2DD4BF); border-color: rgba(45,212,191,.45); }
/* Homepage — "Pe industrie": links to the sector landing pages */
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--s-6, 40px); }
.industry-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border: 1px solid #E3E5F0; border-radius: 14px; background: #fff; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.industry-card:hover, .industry-card:focus-visible { border-color: var(--coral, #F73760); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(33,36,61,.08); }
.industry-k { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral, #F73760); }
.industry-t { font-size: 1.05rem; line-height: 1.4; color: #21243D; font-weight: 500; }
@media (max-width: 960px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industry-grid { grid-template-columns: 1fr; } }
/* Links inside solution cards (sector pages) read as links */
.sp-card p a { color: var(--coral, #F73760); text-decoration: none; white-space: nowrap; }
.sp-card p a:hover { text-decoration: underline; }
/* Consent line under the site forms (links to the privacy policy) */
.form-consent { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-consent a { color: inherit; text-decoration: underline; }
.site-footer-copy a { color: inherit; text-decoration: underline; }