/* Theme V.1.5.0 Designed by Live Design https://livedesign.ro */ /*----------------------------- VARIABLES -----------------------------*/ :root { /* COLORS */ --lvd-color-text:#404040; --lvd-color-bg:#f5f5f7; /* Primary colors */ --lvd-color-primary:#3958D4; --lvd-color-primary-on:#ffffff; --lvd-color-primary-light:#DADDF0; --lvd-color-primary-light-on:#121212; --lvd-color-primary-soft:#B3C2FF; --lvd-color-primary-soft-on:#1D3CB8; --lvd-color-primary-dark:#071F85; --lvd-color-primary-dark-on:#b3c1fa; /* Secondary colors */ --lvd-color-secondary:#00d34f; --lvd-color-secondary-on:#ffffff; --lvd-color-secondary-light:#ddeaea; --lvd-color-secondary-light-on:#00290F; --lvd-color-secondary-soft:#51CF80; --lvd-color-secondary-soft-on:#017f31; --lvd-color-secondary-dark:#005E24; --lvd-color-secondary-dark-on:#D5EDDE; /* Tertiary colors */ --lvd-color-tertiary:#ba4600; --lvd-color-tertiary-on:#ffffff; /* Neutral colors */ --lvd-color-black:#0D0D0D; --lvd-color-white:#FFFFFF; --lvd-color-gray-100:#F9F9F9; --lvd-color-gray-200:#E8E8EB; --lvd-color-gray-300:#D9D9DB; --lvd-color-gray-400:#737373; --lvd-color-gray-500:#404040; /* Info colors */ --lvd-color-success:#00C44F; --lvd-color-success-100: #d4ebcf; --lvd-color-error:#EC5252; --lvd-color-warning:#FC6D43; --lvd-color-info:#2268FD; /* Semantic colors */ --lvd-cc-breadcrumbs-link:var(--lvd-color-primary); --lvd-cc-surface: var(--lvd-color-white); --lvd-cc-section-title: var(--lvd-color-black); --lvd-cc-keyword: var(--lvd-color-tertiary); --lvd-cc-title: var(--lvd-color-black); --lvd-cc-text: var(--lvd-color-text); --lvd-cc-link: var(--lvd-color-primary); --lvd-cc-link-hover: var(--lvd-color-black); --lvd-cc-list-icon: var(--lvd-color-primary); --lvd-cc-button-border: var(--lvd-color-primary); --lvd-cc-button-bg: var(--lvd-color-primary); --lvd-cc-button-text: var(--lvd-color-white); --lvd-cc-button-s-border: var(--lvd-color-secondary); --lvd-cc-button-s-bg: var(--lvd-color-secondary); --lvd-cc-button-s-text: var(--lvd-color-white); --lvd-cc-button-o-border: var(--lvd-color-black); --lvd-cc-button-o-text: var(--lvd-color-black); --lvd-cc-button-t-text: var(--lvd-color-black); --lvd-cc-badge-bg: var(--lvd-color-tertiary); --lvd-cc-badge-text: var(--lvd-color-white); --lvd-cc-button-nudge-text: var(--lvd-color-gray-400); --lvd-cc-card-border: var(--lvd-color-primary); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-tertiary); --lvd-cc-tag-border: var(--lvd-color-tertiary); /* FONTS */ --lvd-primary-font:'Montserrat', sans-serif; --lvd-secondary-font:'Roboto', sans-serif; /* Font size */ --lvd-text-d1:72px; --lvd-text-d2:64px; --lvd-text-d3:56px; --lvd-text-h1:48px; --lvd-text-h2:40px; --lvd-text-h3:32px; --lvd-text-h4:24px; --lvd-text-h5:20px; --lvd-text-body:16px; --lvd-text-s1:14px; --lvd-text-s2:11px; /* CONTAINERS */ --lvd-width-stopper:1800px; --lvd-width-fullhd:1344px; --lvd-width-widescreen:1152px; --lvd-width-desktop:960px; --lvd-width-tablet:640px; /* Spacing */ --lvd-mb-txt:16px; --lvd-gap:0px; --lvd-line-height-base:1.4; --lvd-cover-image-height:600px; /* Shadow */ --lvd-shadow-100: 0 1px 4px 0 rgb(20 20 43 / 1%), 0 3px 6px 0 rgb(51 71 255 / 1%), 0 4px 22px 0 rgb(21 19 91 / 6%); --lvd-shadow-200: 0 1px 4px 0 rgb(20 20 43 / 1%), 0 3px 6px 0 rgb(51 71 255 / 1%), 0 4px 22px 0 rgb(21 19 91 / 8%); --lvd-shadow-300: 0 2px 6px 0 rgb(20 20 43 / 1%), 0 3px 6px 0 rgb(51 71 255 / 1%), 0 4px 22px 0 rgb(21 19 91 / 6%); --lvd-shadow-400: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); --lvd-shadow-button: 0px 2px 5px 0px rgba(54, 54, 54, 0.28); --lvd-shadow-text: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Gradients */ --lvd-gradient-transparent: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 1) 100%) repeat scroll 0 0; --lvd-gradient-white: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0; --lvd-gradient-light: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(232, 232, 235, 0) 0%, rgba(232, 232, 235, 1) 100%) repeat scroll 0 0; --lvd-gradient-primary-light: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(218, 221, 240, 0) 0%, rgba(218, 221, 240, 1) 100%) repeat scroll 0 0; --lvd-gradient-primary-dark: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(7, 31, 133, 0) 0%, rgba(7, 31, 133, 1) 100%) repeat scroll 0 0; --lvd-gradient-secondary-light: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(221, 234, 234, 0) 0%, rgba(221, 234, 234, 1) 100%) repeat scroll 0 0; --lvd-gradient-secondary-dark: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(0, 94, 36, 0) 0%, rgba(0, 94, 36, 1) 100%) repeat scroll 0 0; --lvd-gradient-dark: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0; --lvd-gradient-accent: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(57, 88, 212, 0) 0%, rgba(57, 88, 212, 1) 100%) repeat scroll 0 0; /* Transitions */ --lvd-transition: color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease; /* Rounded corners */ --lvd-rounded:16px; --lvd-rounded-top:16px 16px 0 0; --lvd-rounded-right: 0 16px 16px 0; --lvd-rounded-bottom: 0 0 16px 16px; --lvd-rounded-left: 16px 0 0 16px; --lvd-rounded-md:24px; --lvd-rounded-lg:32px; } /*----------------------------- SKIP LINK -----------------------------*/ .lvd-skip-link {position:absolute; top:-100%; left:0; z-index:9999; padding:12px 24px; background:var(--lvd-color-primary); color:var(--lvd-color-white); font-weight:700; text-decoration:none; border-radius:0 0 4px 0;} .lvd-skip-link:focus {top:0; color:var(--lvd-color-white);} /*----------------------------- COMMON -----------------------------*/ body {font-family: var(--lvd-primary-font); font-size:var(--lvd-text-body); font-weight:400; color:var(--lvd-color-text); background:var(--lvd-color-bg);} a {color:var(--lvd-color-primary); padding:0; margin:0; border:0; text-decoration:none;} a:hover {color:var(--lvd-cc-link-hover); text-decoration:none;} p {margin-bottom: var(--lvd-mb-txt); line-height: var(--lvd-line-height-base); margin-block-start: 0; margin-block-end: 0;} /* Forms */ input {-webkit-border-radius:0; border-radius:0;} input[type=text], input[type=button], input[type=email], input[type=tel] {-webkit-appearance: none;} input[type=checkbox] {-webkit-appearance:checkbox !important;} input[type=text], input[type=tel], input[type=email], input[type=password], select {height:48px; line-height:48px; border-radius:4px; color:var(--lvd-color-black); border:1px solid var(--lvd-color-black); display:inline-block; box-shadow: inset 0 2px 5px -1px rgba(0,0,0,.1); transition: background ease-in-out .15s,border ease-in-out .25s,color ease-in-out .15s;} textarea {height:120px; line-height:1.5; border-radius:4px; color:var(--lvd-color-black); border:1px solid var(--lvd-color-black); display:inline-block; font-family: var(--lvd-primary-font); box-shadow: inset 0 2px 5px -1px rgba(0,0,0,.1); transition: background ease-in-out .15s,border ease-in-out .25s,color ease-in-out .15s;} /* Rounded corners */ .lvd-rounded, .lvd-rounded img {border-radius:var(--lvd-rounded);} .lvd-rounded-top, .lvd-rounded-top img {border-radius:var(--lvd-rounded-top);} .lvd-rounded-right, .lvd-rounded-right img {border-radius:var(--lvd-rounded-right);} .lvd-rounded-bottom, .lvd-rounded-bottom img {border-radius:var(--lvd-rounded-bottom);} .lvd-rounded-left, .lvd-rounded-left img {border-radius:var(--lvd-rounded-left);} .lvd-rounded-md {border-radius:var(--lvd-rounded-md);} .lvd-rounded-lg {border-radius:var(--lvd-rounded-lg);} /* Box Shadow */ .lvd-box-shadow-100 {box-shadow: var(--lvd-shadow-100);} .lvd-box-shadow-200 {box-shadow: var(--lvd-shadow-200);} .lvd-box-shadow-300 {box-shadow: var(--lvd-shadow-300);} .lvd-box-shadow-400 {box-shadow: var(--lvd-shadow-400);} /* Card — semantic class + border modifier (ACF toggle: lvd-card-border) */ .lvd-card.lvd-card-border {border:1px solid var(--lvd-cc-card-border);} /*----------------------------- COLORS -----------------------------*/ /* Body text color */ .lvd-color-text {color:var(--lvd-color-text);} /* Brand colors */ .lvd-color-primary {color:var(--lvd-color-primary);} .lvd-color-secondary {color:var(--lvd-color-secondary);} .lvd-color-tertiary {color:var(--lvd-color-tertiary);} /* Neutral colors */ .lvd-color-black {color:var(--lvd-color-black);} .lvd-color-white {color:var(--lvd-color-white);} .lvd-color-gray-100 {color:var(--lvd-color-gray-100);} .lvd-color-gray-200 {color:var(--lvd-color-gray-200);} .lvd-color-gray-300 {color:var(--lvd-color-gray-300);} .lvd-color-gray-400 {color:var(--lvd-color-gray-400);} .lvd-color-gray-500 {color:var(--lvd-color-gray-500);} /* Info colors */ .lvd-color-success {color:var(--lvd-color-success);} .lvd-color-error {color:var(--lvd-color-error);} .lvd-color-warning {color:var(--lvd-color-warning);} .lvd-color-info {color:var(--lvd-color-info);} /*----------------------------- TYPOGRAPHY -----------------------------*/ h1, h2, h3, h4, h5 {margin-bottom:var(--lvd-mb-txt); line-height:1.2;} h1 {font-size:var(--lvd-text-h1);} h2 {font-size:var(--lvd-text-h2);} h3 {font-size:var(--lvd-text-h3);} h4 {font-size:var(--lvd-text-h4);} h5 {font-size:var(--lvd-text-h5);} .lvd-text-d1 {font-size:var(--lvd-text-d1);} .lvd-text-d2 {font-size:var(--lvd-text-d2);} .lvd-text-d3 {font-size:var(--lvd-text-d3);} .lvd-text-h1 {font-size:var(--lvd-text-h1);} .lvd-text-h2 {font-size:var(--lvd-text-h2);} .lvd-text-h3 {font-size:var(--lvd-text-h3);} .lvd-text-h4 {font-size:var(--lvd-text-h4);} .lvd-text-h5 {font-size:var(--lvd-text-h5);} .lvd-text-body {font-size:var(--lvd-text-body);} .lvd-text-s2 {font-size:var(--lvd-text-s2);} .lvd-text-s1 {font-size:var(--lvd-text-s1);} /*----------------------------- LAYOUT -----------------------------*/ /* Flex gap — sets the variable (for calc() in columns) and the gap property */ .lvd-flex-gap-none {--lvd-gap: 0px; gap: 0px;} .lvd-flex-gap-xs {--lvd-gap: 4px; gap: 4px;} .lvd-flex-gap-sm {--lvd-gap: 8px; gap: 8px;} .lvd-flex-gap {--lvd-gap: 12px; gap: 12px;} .lvd-flex-gap-md {--lvd-gap: 20px; gap: 20px;} .lvd-flex-gap-lg {--lvd-gap: 40px; gap: 40px;} .lvd-flex-gap-xl {--lvd-gap: 60px; gap: 60px;} .lvd-flex-gap-2xl {--lvd-gap: 80px; gap: 80px;} .lvd-flex-gap-3xl {--lvd-gap: 100px; gap: 100px;} /* Grid gap */ .lvd-grid-gap-none {gap:0px;} .lvd-grid-gap-2xs {gap:8px;} .lvd-grid-gap-xs {gap:16px;} .lvd-grid-gap-sm {gap:24px;} .lvd-grid-gap {gap:32px;} .lvd-grid-gap-md {gap:40px;} .lvd-grid-gap-lg {gap:48px;} .lvd-grid-gap-xl {gap:56px;} .lvd-grid-gap-2xl {gap:64px;} .lvd-grid-gap-3xl {gap:72px;} /* Padding */ .lvd-pxy-none {padding:0;} .lvd-pxy-xs {padding:8px;} .lvd-pxy-sm {padding:16px;} .lvd-pxy {padding:32px;} .lvd-pxy-md {padding:48px;} .lvd-pxy-lg {padding:56px;} .lvd-pxy-xl {padding:72px;} .lvd-px-xs {padding:0 8px 0 8px;} .lvd-px-sm {padding:0 16px 0 16px;} .lvd-px {padding:0 32px 0 32px;} .lvd-px-md {padding:0 48px 0 48px;} .lvd-px-lg {padding:0 56px 0 56px;} .lvd-px-xl {padding:0 72px 0 72px;} .lvd-py-xs {padding:8px 0 8px 0;} .lvd-py-sm {padding:16px 0 16px 0;} .lvd-py {padding:32px 0 32px 0;} .lvd-py-md {padding:48px 0 48px 0;} .lvd-py-lg {padding:56px 0 56px 0;} .lvd-py-xl {padding:72px 0 72px 0;} .lvd-pt-xs {padding-top:8px;} .lvd-pt-sm {padding-top:16px;} .lvd-pt {padding-top:32px;} .lvd-pt-md {padding-top:48px;} .lvd-pt-lg {padding-top:56px;} .lvd-pt-xl {padding-top:72px;} .lvd-pb-xs {padding-bottom:8px;} .lvd-pb-sm {padding-bottom:16px;} .lvd-pb {padding-bottom:32px;} .lvd-pb-md {padding-bottom:48px;} .lvd-pb-lg {padding-bottom:56px;} .lvd-pb-xl {padding-bottom:72px;} .lvd-pl-xs {padding-left:8px;} .lvd-pl-sm {padding-left:16px;} .lvd-pl {padding-left:32px;} .lvd-pl-md {padding-left:48px;} .lvd-pl-lg {padding-left:56px;} .lvd-pl-xl {padding-left:72px;} .lvd-pr-xs {padding-right:8px;} .lvd-pr-sm {padding-right:16px;} .lvd-pr {padding-right:32px;} .lvd-pr-md {padding-right:48px;} .lvd-pr-lg {padding-right:56px;} .lvd-pr-xl {padding-right:72px;} .lvd-px-lg-py {padding:56px 32px} /*mixed*/ /* Margin Scale: xs 8 · sm 16 · (base) 24 · md 32 · lg 40 · xl 48 · big1 64 · big2 80 · big3 96 big1–big3 = component/section spacing; reduse cu 16px pe mobil (vezi media query). */ .lvd-mxy-none {margin:0;} .lvd-mxy-xs {margin:8px;} .lvd-mxy-sm {margin:16px;} .lvd-mxy {margin:24px;} .lvd-mxy-md {margin:32px;} .lvd-mxy-lg {margin:40px;} .lvd-mxy-xl {margin:48px;} .lvd-mxy-big1 {margin:64px;} .lvd-mxy-big2 {margin:80px;} .lvd-mxy-big3 {margin:96px;} .lvd-mx-none {margin-left:0; margin-right:0;} .lvd-mx-xs {margin:0 8px 0 8px;} .lvd-mx-sm {margin:0 16px 0 16px;} .lvd-mx {margin:0 24px 0 24px;} .lvd-mx-md {margin:0 32px 0 32px;} .lvd-mx-lg {margin:0 40px 0 40px;} .lvd-mx-xl {margin:0 48px 0 48px;} .lvd-mx-big1 {margin:0 64px 0 64px;} .lvd-mx-big2 {margin:0 80px 0 80px;} .lvd-mx-big3 {margin:0 96px 0 96px;} .lvd-my-none {margin-top:0; margin-bottom:0;} .lvd-my-xs {margin:8px 0 8px 0;} .lvd-my-sm {margin:16px 0 16px 0;} .lvd-my {margin:24px 0 24px 0;} .lvd-my-md {margin:32px 0 32px 0;} .lvd-my-lg {margin:40px 0 40px 0;} .lvd-my-xl {margin:48px 0 48px 0;} .lvd-my-big1 {margin:64px 0 64px 0;} .lvd-my-big2 {margin:80px 0 80px 0;} .lvd-my-big3 {margin:96px 0 96px 0;} .lvd-mt-none {margin-top:0;} .lvd-mt-xs {margin-top:8px;} .lvd-mt-sm {margin-top:16px;} .lvd-mt {margin-top:24px;} .lvd-mt-md {margin-top:32px;} .lvd-mt-lg {margin-top:40px;} .lvd-mt-xl {margin-top:48px;} .lvd-mt-big1 {margin-top:64px;} .lvd-mt-big2 {margin-top:80px;} .lvd-mt-big3 {margin-top:96px;} .lvd-mb-none {margin-bottom:0;} .lvd-mb-xs {margin-bottom:8px;} .lvd-mb-sm {margin-bottom:16px;} .lvd-mb {margin-bottom:24px;} .lvd-mb-md {margin-bottom:32px;} .lvd-mb-lg {margin-bottom:40px;} .lvd-mb-xl {margin-bottom:48px;} .lvd-mb-big1 {margin-bottom:64px;} .lvd-mb-big2 {margin-bottom:80px;} .lvd-mb-big3 {margin-bottom:96px;} .lvd-ml-none {margin-left:0;} .lvd-ml-xs {margin-left:8px;} .lvd-ml-sm {margin-left:16px;} .lvd-ml {margin-left:24px;} .lvd-ml-md {margin-left:32px;} .lvd-ml-lg {margin-left:40px;} .lvd-ml-xl {margin-left:48px;} .lvd-ml-big1 {margin-left:64px;} .lvd-ml-big2 {margin-left:80px;} .lvd-ml-big3 {margin-left:96px;} .lvd-mr-none {margin-right:0;} .lvd-mr-xs {margin-right:8px;} .lvd-mr-sm {margin-right:16px;} .lvd-mr {margin-right:24px;} .lvd-mr-md {margin-right:32px;} .lvd-mr-lg {margin-right:40px;} .lvd-mr-xl {margin-right:48px;} .lvd-mr-big1 {margin-right:64px;} .lvd-mr-big2 {margin-right:80px;} .lvd-mr-big3 {margin-right:96px;} /* Spacer */ .lvd-spacer-2xs {height:8px;} .lvd-spacer-xs {height:16px;} .lvd-spacer-sm {height:24px;} .lvd-spacer {height:32px;} .lvd-spacer-md {height:40px;} .lvd-spacer-lg {height:48px;} .lvd-spacer-xl {height:56px;} .lvd-spacer-2xl {height:64px;} .lvd-spacer-3xl {height:72px;} /*----------------------------- TABLE -----------------------------*/ .lvd-table {margin-right:auto !important; margin-left:auto !important; border-collapse: collapse; width:100%; empty-cells: show;} .lvd-table td, .lvd-table th {padding:10px 20px; border:1px solid var(--lvd-color-gray-300); } .lvd-table th {color:var(--lvd-color-black); background:var(--lvd-color-gray-100); font-weight:700; text-align: left;} .lvd-table table {border-collapse: collapse; width:100%; empty-cells: show;} /*----------------------------- BUTTONS -----------------------------*/ .lvd-button-group {display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start;} .lvd-button-group.lvd-text-center {justify-content: center;} .lvd-button-group.lvd-text-right {justify-content: flex-end;} .lvd-button {display: flex; flex-direction: column; align-items: flex-start; gap: 4px;} .lvd-button-group.lvd-text-center .lvd-button {align-items: center;} .lvd-button-group.lvd-text-right .lvd-button {align-items: flex-end;} .lvd-button-nudge {color: var(--lvd-cc-button-nudge-text); width: 0; min-width: 100%; overflow-wrap: break-word; font-size: var(--lvd-text-s2); padding: 4px 0 0 4px;} .lvd-button-primary, .lvd-button-primary-small, .lvd-button-secondary, .lvd-button-secondary-small, .lvd-button-outlined, .lvd-button-outlined-small, .lvd-button-text, .lvd-button-text-small {transition: opacity 0.3s ease;} .lvd-button-primary {background:var(--lvd-cc-button-bg); color:var(--lvd-cc-button-text); border:1px solid var(--lvd-cc-button-border); display:inline-block; height:48px; line-height:46px; font-weight:700; font-size:var(--lvd-text-body); padding:0 24px; border-radius:25px; box-shadow:var(--lvd-shadow-button);} .lvd-button-primary:hover {color:var(--lvd-cc-button-text); opacity:0.7;} .lvd-button-primary-small {background:var(--lvd-cc-button-bg); color:var(--lvd-cc-button-text); border:1px solid var(--lvd-cc-button-border); display:inline-block; height:32px; line-height:30px; font-weight:700; font-size:var(--lvd-text-s1); padding:0 16px; border-radius:16px; box-shadow:var(--lvd-shadow-button);} .lvd-button-primary-small:hover {color:var(--lvd-cc-button-text); opacity:0.7;} .lvd-button-secondary {background: var(--lvd-cc-button-s-bg); color:var(--lvd-cc-button-s-text); border:1px solid var(--lvd-cc-button-s-border); display:inline-block; height:48px; line-height:46px; font-weight:700; font-size:var(--lvd-text-body); padding:0 24px; border-radius:25px; box-shadow:var(--lvd-shadow-button);} .lvd-button-secondary:hover {color:var(--lvd-cc-button-s-text); opacity:0.7;} .lvd-button-secondary-small {background: var(--lvd-cc-button-s-bg); color:var(--lvd-cc-button-s-text); border:1px solid var(--lvd-cc-button-s-border); display:inline-block; height:32px; line-height:30px; font-weight:700; font-size:var(--lvd-text-s1); padding:0 16px; border-radius:16px; box-shadow:var(--lvd-shadow-button);} .lvd-button-secondary-small:hover {color:var(--lvd-cc-button-s-text); opacity:0.7;} .lvd-button-outlined {border:1px solid var(--lvd-cc-button-o-border); background:transparent; color:var(--lvd-cc-button-o-text); display:inline-block; height:48px; line-height:46px; font-weight:700; font-size:var(--lvd-text-body); padding:0 24px; border-radius:25px;} .lvd-button-outlined:hover {color:var(--lvd-cc-button-o-text); opacity:0.7;} .lvd-button-outlined-small {border:1px solid var(--lvd-cc-button-o-border); background:transparent; color:var(--lvd-cc-button-o-text); display:inline-block; height:32px; line-height:30px; font-weight:700; font-size:var(--lvd-text-s1); padding:0 16px; border-radius:16px;} .lvd-button-outlined-small:hover {color:var(--lvd-cc-button-o-text); opacity:0.7;} .lvd-button-text {background:transparent; color:var(--lvd-cc-button-t-text); display:inline-block; height:48px; line-height:48px; font-weight:700; font-size:var(--lvd-text-body); padding:0; border-radius:25px;} .lvd-button-text:hover {color:var(--lvd-cc-button-t-text); opacity:0.7;} .lvd-button-text-small {background:transparent; color:var(--lvd-cc-button-t-text); display:inline-block; height:32px; line-height:32px; font-weight:700; font-size:var(--lvd-text-s1); padding:0; border-radius:16px;} .lvd-button-text-small:hover {color:var(--lvd-cc-button-t-text); opacity:0.7;} .lvd-button-expander {margin-right:16px;} .lvd-button-group-self {position: relative;} .lvd-button-text-arrow {background: transparent; color: var(--lvd-cc-button-t-text); display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0; font-weight:700; text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease;} .lvd-button-text-arrow::after {content: ""; display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url('../assets/svg/bs-icons/arrow-right-short.svg'); mask-image: url('../assets/svg/bs-icons/arrow-right-short.svg'); transition: transform 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;} .lvd-button-text-arrow:hover {color: var(--lvd-cc-button-t-text); opacity: 0.7;} .lvd-button-text-arrow:hover::after {transform: translateX(5px); -webkit-mask-image: url('../assets/svg/bs-icons/arrow-right.svg'); mask-image: url('../assets/svg/bs-icons/arrow-right.svg');} .lvd-button-text-arrow-small {background: transparent; color: var(--lvd-cc-button-t-text); display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0; font-weight:700; font-size:var(--lvd-text-s1); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease;} .lvd-button-text-arrow-small::after {content: ""; display: block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url('../assets/svg/bs-icons/arrow-right-short.svg'); mask-image: url('../assets/svg/bs-icons/arrow-right-short.svg'); transition: transform 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;} .lvd-button-text-arrow-small:hover {color: var(--lvd-cc-button-t-text); opacity: 0.7;} .lvd-button-text-arrow-small:hover::after {transform: translateX(5px); -webkit-mask-image: url('../assets/svg/bs-icons/arrow-right.svg'); mask-image: url('../assets/svg/bs-icons/arrow-right.svg');} .lvd-button-text-chevron {background: transparent; color: var(--lvd-cc-button-t-text); display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0; font-weight:700; text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease;} .lvd-button-text-chevron::after {content: ""; display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url('../assets/svg/bs-icons/chevron-right.svg'); mask-image: url('../assets/svg/bs-icons/chevron-right.svg'); transition: transform 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;} .lvd-button-text-chevron:hover {color: var(--lvd-cc-button-t-text); opacity: 0.7;} .lvd-button-text-chevron:hover::after {transform: translateX(5px); -webkit-mask-image: url('../assets/svg/bs-icons/chevron-compact-right.svg'); mask-image: url('../assets/svg/bs-icons/chevron-compact-right.svg');} .lvd-button-text-chevron-small {background: transparent; color: var(--lvd-cc-button-t-text); display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0; font-weight:700; font-size:var(--lvd-text-s1); text-decoration: none; transition: color 0.3s ease, opacity 0.3s ease;} .lvd-button-text-chevron-small::after {content: ""; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url('../assets/svg/bs-icons/chevron-right.svg'); mask-image: url('../assets/svg/bs-icons/chevron-right.svg'); transition: transform 0.3s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;} .lvd-button-text-chevron-small:hover {color: var(--lvd-cc-button-t-text); opacity: 0.7;} .lvd-button-text-chevron-small:hover::after {transform: translateX(5px); -webkit-mask-image: url('../assets/svg/bs-icons/chevron-compact-right.svg'); mask-image: url('../assets/svg/bs-icons/chevron-compact-right.svg');} /*Play Button*/ .lvd-play-button {width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.4); box-shadow:0 8px 32px 0 rgba(0,0,0,0.2); position:absolute; top: calc(50% - 8px); left:50%; transform:translate(-50%, -50%) translateZ(0); display:flex; justify-content:center; align-items:center; transition:transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease; cursor:pointer; will-change:transform;} .lvd-play-button:hover {transform:translate(-50%, -50%) scale(1.1) translateZ(0); background:var(--lvd-color-white); box-shadow:0 12px 40px 0 rgba(0,0,0,0.3); border-color:transparent;} .lvd-icon-play {display:block; width:32px; height:32px; margin-left:4px; background-color:var(--lvd-color-white); -webkit-mask-image:url('../assets/svg/bs-icons/play-fill.svg'); mask-image:url('../assets/svg/bs-icons/play-fill.svg'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; transition:background-color 0.3s ease;} .lvd-play-button:hover .lvd-icon-play {background-color:var(--lvd-color-black);} /* Play button — inline SVG icon variant (lvd_display_icon) */ .lvd-play-button svg {width:30px; height:30px; margin-left:4px; fill:var(--lvd-color-white); transition:fill 0.3s ease;} .lvd-play-button:hover svg {fill:var(--lvd-color-black);} /* Play Video CTA */ .lvd-video-cta {position:absolute; top:calc(50% + 30px); left:0; right:0; display:flex; flex-direction:row; justify-content:center; align-items:center; pointer-events:none;} .lvd-video-cta span {background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--lvd-color-white); border:0; border-radius:20px; padding:6px 16px; font-weight:600; font-size:var(--lvd-text-s1); letter-spacing:0.5px; transition:opacity 0.3s ease;} .lvd-play-button:hover + .lvd-video-cta span {opacity:0.8;} /* Video cover (modal trigger) — reusable primitive for ANY component with .lvd-img. The image wrapper gets `lvd-mv-trigger` (only when a video is set) → becomes clickable and a positioning context. The `.lvd-video-actions` cluster (play + CTA) sits bottom-right over the image and RE-positions the global base `.lvd-play-button`/`.lvd-video-cta` (centered) to static, inline. Markup via PartialRenderer::lvd_videoCover(). */ .lvd-mv-trigger {position:relative; cursor:pointer;} .lvd-video-actions {position:absolute; bottom:16px; right:16px; z-index:2; display:flex; align-items:center; gap:12px;} .lvd-video-actions .lvd-video-cta {position:static; pointer-events:none;} .lvd-video-actions .lvd-play-button {position:static; top:auto; left:auto; transform:none; width:48px; height:48px;} .lvd-video-actions .lvd-play-button:hover {transform:scale(1.08);} /* Centered over the image (optional, via select) — restores the global base (large centered play + CTA below). The wrapper becomes `position:static`, so play/CTA (absolute) position against `.lvd-mv-trigger` (the image) → center. This way it ignores any per-component bottom/right offset set on `.lvd-video-actions`. */ .lvd-video-actions-center {position:static;} .lvd-video-actions-center .lvd-play-button {position:absolute; top:calc(50% - 8px); left:50%; transform:translate(-50%, -50%) translateZ(0); width:56px; height:56px;} .lvd-video-actions-center .lvd-play-button:hover {transform:translate(-50%, -50%) scale(1.1) translateZ(0);} .lvd-video-actions-center .lvd-video-cta {position:absolute; top:calc(50% + 30px); left:0; right:0;} /* Video background controls */ .lvd-video-controls {position: absolute; bottom: 24px; right: 24px; z-index: 10; display: flex; gap: 8px;} .lvd-control-btn {background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); color:var(--lvd-color-white); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease;} .lvd-control-btn:hover {background: rgba(0, 0, 0, 0.8);} .lvd-icon-control-play, .lvd-icon-control-pause, .lvd-icon-control-volume-on, .lvd-icon-control-volume-off {display: block; width: 32px; height: 32px; background-color: var(--lvd-color-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; opacity:0.5; transition:opacity 0.3s ease;} .lvd-icon-control-play {margin-left: 4px; -webkit-mask-image: url('../assets/svg/bs-icons/play-fill.svg'); mask-image: url('../assets/svg/bs-icons/play-fill.svg');} .lvd-icon-control-pause {margin-left: 0; -webkit-mask-image: url('../assets/svg/bs-icons/pause-fill.svg'); mask-image: url('../assets/svg/bs-icons/pause-fill.svg');} .lvd-icon-control-volume-on {margin-left: 0; -webkit-mask-image: url('../assets/svg/bs-icons/volume-up-fill.svg'); mask-image: url('../assets/svg/bs-icons/volume-up-fill.svg');} .lvd-icon-control-volume-off {margin-left: 0; -webkit-mask-image: url('../assets/svg/bs-icons/volume-mute-fill.svg'); mask-image: url('../assets/svg/bs-icons/volume-mute-fill.svg');} .lvd-control-btn:hover .lvd-icon-control-play, .lvd-control-btn:hover .lvd-icon-control-pause, .lvd-control-btn:hover .lvd-icon-control-volume-on, .lvd-control-btn:hover .lvd-icon-control-volume-off {background-color: var(--lvd-color-white); opacity:0.8;} /*----------------------------- APPEARENCE -----------------------------*/ /* Generic elements: keyword, title, text, text a, img, icon, button-primary, button-primary-small, button-outlined, button-small, button-text, button-text-small, li::before */ /* Theming engine — paint a surface and cascade its palette to descendants. Combine one of these with a `lvd-style-*` variant (e.g. lvd-style-white, lvd-style-accent, lvd-style-dark). The variant redefines the element's --lvd-cc-* tokens, so the keyword, title, text and buttons inside inherit the themed colors automatically. `.lvd-style-apply` and `.lvd-style-surface-apply` are functionally identical (aliases). Convention: use `lvd-style-surface-apply` on a component's main surface/card container; use `lvd-style-apply` on repeated items (e.g. cards inside a grid/list). One per element — never both. */ .lvd-style-apply {background:var(--lvd-cc-surface); color:var(--lvd-cc-text);} .lvd-style-surface-apply {background:var(--lvd-cc-surface); color:var(--lvd-cc-text);} /* Light-family appearances (transparent / white / light). These carry no dark palette of their own, so they must RESET the full --lvd-cc-* set back to the base (light) values. Custom properties inherit: without this reset, a light surface/card nested inside a dark or colored parent (e.g. an accent section) would INHERIT the parent's tokens — white text and white tags on a white card → invisible. Surface is set per-variant. */ :is(.lvd-style-apply, .lvd-style-surface-apply):is(.lvd-style-transparent, .lvd-style-white, .lvd-style-light) { --lvd-cc-breadcrumbs-link:var(--lvd-color-primary); --lvd-cc-section-title: var(--lvd-color-black); --lvd-cc-keyword: var(--lvd-color-tertiary); --lvd-cc-title: var(--lvd-color-black); --lvd-cc-text: var(--lvd-color-text); --lvd-cc-link: var(--lvd-color-primary); --lvd-cc-link-hover: var(--lvd-color-black); --lvd-cc-list-icon: var(--lvd-color-primary); --lvd-cc-button-border: var(--lvd-color-primary); --lvd-cc-button-bg: var(--lvd-color-primary); --lvd-cc-button-text: var(--lvd-color-white); --lvd-cc-button-s-border: var(--lvd-color-secondary); --lvd-cc-button-s-bg: var(--lvd-color-secondary); --lvd-cc-button-s-text: var(--lvd-color-white); --lvd-cc-button-o-border: var(--lvd-color-black); --lvd-cc-button-o-text: var(--lvd-color-black); --lvd-cc-button-t-text: var(--lvd-color-black); --lvd-cc-badge-bg: var(--lvd-color-tertiary); --lvd-cc-badge-text: var(--lvd-color-white); --lvd-cc-button-nudge-text: var(--lvd-color-gray-400); --lvd-cc-card-border: var(--lvd-color-primary); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-tertiary); --lvd-cc-tag-border: var(--lvd-color-tertiary); } /* Transparent */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-transparent { --lvd-cc-surface: transparent; } /* White */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-white { --lvd-cc-surface: var(--lvd-color-white); } /* Light */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-light { --lvd-cc-surface: var(--lvd-color-gray-200); } /* Primary Light */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-pl { --lvd-cc-surface: var(--lvd-color-primary-light); --lvd-cc-section-title: var(--lvd-color-primary-light-on); --lvd-cc-keyword: var(--lvd-color-primary-dark); --lvd-cc-title: var(--lvd-color-primary-light-on); --lvd-cc-text: var(--lvd-color-primary-light-on); --lvd-cc-button-o-border: var(--lvd-color-primary); --lvd-cc-button-o-text: var(--lvd-color-primary); --lvd-cc-button-t-text: var(--lvd-color-primary); --lvd-cc-button-nudge-text: var(--lvd-color-primary); } /* Primary Soft */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-ps { --lvd-cc-surface: var(--lvd-color-primary-soft); --lvd-cc-section-title: var(--lvd-color-primary-dark); --lvd-cc-keyword: var(--lvd-color-primary-soft-on); --lvd-cc-title: var(--lvd-color-primary-dark); --lvd-cc-text: var(--lvd-color-primary-soft-on); --lvd-cc-button-o-border: var(--lvd-color-primary); --lvd-cc-button-o-text: var(--lvd-color-primary); --lvd-cc-button-t-text: var(--lvd-color-primary); --lvd-cc-button-nudge-text: var(--lvd-color-primary); } /* Primary Dark */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-pd { --lvd-cc-surface: var(--lvd-color-primary-dark); --lvd-cc-card-border: var(--lvd-color-white); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-white); --lvd-cc-tag-border: var(--lvd-color-white); --lvd-cc-section-title: var(--lvd-color-primary-dark-on); --lvd-cc-keyword: var(--lvd-color-white); --lvd-cc-title: var(--lvd-color-primary-dark-on); --lvd-cc-text: var(--lvd-color-primary-dark-on); --lvd-cc-link: var(--lvd-color-white); --lvd-cc-link-hover: var(--lvd-color-gray-300); --lvd-cc-list-icon: var(--lvd-color-white); --lvd-cc-button-o-border: var(--lvd-color-white); --lvd-cc-button-o-text: var(--lvd-color-white); --lvd-cc-button-t-text: var(--lvd-color-white); --lvd-cc-button-nudge-text: var(--lvd-color-gray-300); } /* Secondary Light */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-sl { --lvd-cc-breadcrumbs-link:var(--lvd-color-secondary-dark); --lvd-cc-surface: var(--lvd-color-secondary-light); --lvd-cc-card-border: var(--lvd-color-secondary); --lvd-cc-section-title: var(--lvd-color-secondary-light-on); --lvd-cc-keyword: var(--lvd-color-secondary-dark); --lvd-cc-title: var(--lvd-color-secondary-light-on); --lvd-cc-text: var(--lvd-color-secondary-light-on); --lvd-cc-link: var(--lvd-color-secondary-dark); --lvd-cc-list-icon: var(--lvd-color-secondary-dark); --lvd-cc-button-o-border: var(--lvd-color-secondary); --lvd-cc-button-o-text: var(--lvd-color-secondary); --lvd-cc-button-t-text: var(--lvd-color-secondary); --lvd-cc-button-nudge-text: var(--lvd-color-secondary-dark); } /* Secondary Soft */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-ss { --lvd-cc-breadcrumbs-link:var(--lvd-color-secondary-dark); --lvd-cc-surface: var(--lvd-color-secondary-soft); --lvd-cc-card-border: var(--lvd-color-secondary); --lvd-cc-section-title: var(--lvd-color-secondary-soft-on); --lvd-cc-keyword: var(--lvd-color-secondary-soft-on); --lvd-cc-title: var(--lvd-color-secondary-soft-on); --lvd-cc-text: var(--lvd-color-secondary-dark); --lvd-cc-link: var(--lvd-color-secondary-dark); --lvd-cc-list-icon: var(--lvd-color-secondary-dark); --lvd-cc-button-o-border: var(--lvd-color-secondary-soft-on); --lvd-cc-button-o-text: var(--lvd-color-secondary-soft-on); --lvd-cc-button-t-text: var(--lvd-color-secondary-soft-on); --lvd-cc-button-nudge-text: var(--lvd-color-secondary-dark); } /* Secondary Dark */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-sd { --lvd-cc-breadcrumbs-link:var(--lvd-color-white); --lvd-cc-surface: var(--lvd-color-secondary-dark); --lvd-cc-card-border: var(--lvd-color-white); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-white); --lvd-cc-tag-border: var(--lvd-color-white); --lvd-cc-section-title: var(--lvd-color-secondary-dark-on); --lvd-cc-keyword: var(--lvd-color-secondary-dark-on); --lvd-cc-title: var(--lvd-color-secondary-dark-on); --lvd-cc-text: var(--lvd-color-secondary-dark-on); --lvd-cc-link: var(--lvd-color-white); --lvd-cc-link-hover: var(--lvd-color-gray-300); --lvd-cc-list-icon: var(--lvd-color-white); --lvd-cc-button-o-border: var(--lvd-color-secondary-dark-on); --lvd-cc-button-o-text: var(--lvd-color-secondary-dark-on); --lvd-cc-button-t-text: var(--lvd-color-secondary-dark-on); --lvd-cc-button-nudge-text: var(--lvd-color-gray-300); } /*Accent */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-accent { --lvd-cc-breadcrumbs-link:var(--lvd-color-white); --lvd-cc-surface: var(--lvd-color-primary); --lvd-cc-card-border: var(--lvd-color-white); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-white); --lvd-cc-tag-border: var(--lvd-color-white); --lvd-cc-section-title: var(--lvd-color-white); --lvd-cc-keyword: var(--lvd-color-white); --lvd-cc-title: var(--lvd-color-white); --lvd-cc-text: var(--lvd-color-white); --lvd-cc-link: var(--lvd-color-primary-soft); --lvd-cc-link-hover: var(--lvd-color-white); --lvd-cc-list-icon: var(--lvd-color-white); --lvd-cc-button-bg: var(--lvd-color-white); --lvd-cc-button-border: var(--lvd-color-white); --lvd-cc-button-text: var(--lvd-color-primary); --lvd-cc-button-o-border: var(--lvd-color-white); --lvd-cc-button-o-text: var(--lvd-color-white); --lvd-cc-button-t-text: var(--lvd-color-white); --lvd-cc-button-nudge-text: var(--lvd-color-white); } /* Dark */ :is(.lvd-style-apply, .lvd-style-surface-apply).lvd-style-dark { --lvd-cc-breadcrumbs-link:var(--lvd-color-white); --lvd-cc-surface: var(--lvd-color-black); --lvd-cc-card-border: var(--lvd-color-white); --lvd-cc-tag-bg: transparent; --lvd-cc-tag-text: var(--lvd-color-white); --lvd-cc-tag-border: var(--lvd-color-white); --lvd-cc-section-title: var(--lvd-color-white); --lvd-cc-keyword: var(--lvd-color-white); --lvd-cc-title: var(--lvd-color-white); --lvd-cc-text: var(--lvd-color-white); --lvd-cc-link: var(--lvd-color-white); --lvd-cc-link-hover: var(--lvd-color-gray-300); --lvd-cc-list-icon: var(--lvd-color-white); --lvd-cc-button-bg: var(--lvd-color-white); --lvd-cc-button-border: var(--lvd-color-white); --lvd-cc-button-text: var(--lvd-color-black); --lvd-cc-button-o-border: var(--lvd-color-white); --lvd-cc-button-o-text: var(--lvd-color-white); --lvd-cc-button-t-text: var(--lvd-color-white); --lvd-cc-button-nudge-text: var(--lvd-color-gray-300); } /* Cards off — universal modifier: removes bg/shadow/border from child cards */ /* Applied via a separate ACF checkbox (independent of the style field) — combines with any surface */ .lvd-cards-off .lvd-card { background: transparent; box-shadow: none; border: none; border-radius: 0; /* The card layer is gone → content reports to the SURFACE, not the card. `inherit` on a custom property takes the parent's computed value (the surface), cancelling the token scope introduced by the card style (e.g. lvd-style-white). Surface is NOT inherited — it is forced transparent above. */ --lvd-cc-breadcrumbs-link: inherit; --lvd-cc-section-title: inherit; --lvd-cc-keyword: inherit; --lvd-cc-title: inherit; --lvd-cc-text: inherit; --lvd-cc-link: inherit; --lvd-cc-link-hover: inherit; --lvd-cc-list-icon: inherit; --lvd-cc-button-border: inherit; --lvd-cc-button-bg: inherit; --lvd-cc-button-text: inherit; --lvd-cc-button-s-border: inherit; --lvd-cc-button-s-bg: inherit; --lvd-cc-button-s-text: inherit; --lvd-cc-button-o-border: inherit; --lvd-cc-button-o-text: inherit; --lvd-cc-button-t-text: inherit; --lvd-cc-button-nudge-text: inherit; --lvd-cc-badge-bg: inherit; --lvd-cc-badge-text: inherit; --lvd-cc-card-border: inherit; --lvd-cc-tag-bg: inherit; --lvd-cc-tag-text: inherit; --lvd-cc-tag-border: inherit; } /*----------------------------- ICONS -----------------------------*/ .lvd-icon {display:flex; justify-content: center; align-items: center;} .lvd-icon svg {display: block; margin: 0;} /*size*/ .lvd-icon-size-sm {width:48px; height:48px;} .lvd-icon-size-sm:is(.lvd-icon-style-card-primary-light,.lvd-icon-style-dot-primary-light,.lvd-icon-style-card-secondary-light,.lvd-icon-style-dot-secondary-light) svg {height:24px; width:24px;} .lvd-icon-size-sm:is(.lvd-icon-style-transparent,.lvd-icon-style-white,.lvd-icon-style-primary,.lvd-icon-style-secondary,.lvd-icon-style-tertiary) svg {height:32px; width:32px;} .lvd-icon-size-md {width:56px; height:56px;} .lvd-icon-size-md:is(.lvd-icon-style-card-primary-light,.lvd-icon-style-dot-primary-light,.lvd-icon-style-card-secondary-light,.lvd-icon-style-dot-secondary-light) svg {height:24px; width:24px;} .lvd-icon-size-md:is(.lvd-icon-style-transparent,.lvd-icon-style-white,.lvd-icon-style-primary,.lvd-icon-style-secondary,.lvd-icon-style-tertiary) svg {height:40px; width:40px;} .lvd-icon-size-lg {width:64px; height:64px;} .lvd-icon-size-lg:is(.lvd-icon-style-card-primary-light,.lvd-icon-style-dot-primary-light,.lvd-icon-style-card-secondary-light,.lvd-icon-style-dot-secondary-light) svg {height:32px; width:32px;} .lvd-icon-size-lg:is(.lvd-icon-style-transparent,.lvd-icon-style-white,.lvd-icon-style-primary,.lvd-icon-style-secondary,.lvd-icon-style-tertiary) svg {height:48px; width:48px;} /*color fill*/ .lvd-icon-style-primary svg {fill: var(--lvd-color-primary);} .lvd-icon-style-white svg {fill: var(--lvd-color-white);} .lvd-icon-style-secondary svg {fill: var(--lvd-color-secondary);} .lvd-icon-style-tertiary svg {fill: var(--lvd-color-tertiary);} /*style*/ .lvd-icon-style-card-primary-light {border-radius:var(--lvd-rounded); background:var(--lvd-color-primary-light); color:var(--lvd-color-primary);} .lvd-icon-style-dot-primary-light {border-radius:50%; background:var(--lvd-color-primary-light); color:var(--lvd-color-primary);} .lvd-icon-style-card-secondary-light {border-radius:var(--lvd-rounded); background:var(--lvd-color-secondary-light); color:var(--lvd-color-secondary);} .lvd-icon-style-dot-secondary-light {border-radius:50%; background:var(--lvd-color-secondary-light); color:var(--lvd-color-secondary);} /*----------------------------- COVER FILTERS -----------------------------*/ .lvd-filter-none-dark-text .lvd-breadcrumbs {opacity:1; color:var(--lvd-color-text);} .lvd-filter-none-dark-text .lvd-breadcrumbs a {color:var(--lvd-color-primary);} .lvd-filter-none-dark-text .lvd-title {color:var(--lvd-color-black); text-shadow: none;} .lvd-filter-none-dark-text .lvd-keyword {color:var(--lvd-color-tertiary); text-shadow: none;} .lvd-filter-none-dark-text .lvd-text {color:var(--lvd-color-text); text-shadow: none;} .lvd-filter-none::after {display:none;} .lvd-filter-light .lvd-title, .lvd-filter-medium .lvd-title, .lvd-filter-strong .lvd-title, .lvd-filter-blackout .lvd-title, .lvd-filter-overlay-dark .lvd-title, .lvd-filter-light .lvd-keyword, .lvd-filter-medium .lvd-keyword, .lvd-filter-strong .lvd-keyword, .lvd-filter-blackout .lvd-keyword, .lvd-filter-overlay-dark .lvd-keyword {text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);} .lvd-filter-light .lvd-button-outlined, .lvd-filter-medium .lvd-button-outlined, .lvd-filter-strong .lvd-button-outlined, .lvd-filter-blackout .lvd-button-outlined, .lvd-filter-overlay-dark .lvd-button-outlined, .lvd-filter-light .lvd-button-outlined-small, .lvd-filter-medium .lvd-button-outlined-small, .lvd-filter-strong .lvd-button-outlined-small, .lvd-filter-blackout .lvd-button-outlined-small, .lvd-filter-overlay-dark .lvd-button-outlined-small {color:var(--lvd-color-white); border-color:var(--lvd-color-white);} .lvd-filter-light::after, .lvd-filter-medium::after, .lvd-filter-strong::after, .lvd-filter-blackout::after, .lvd-filter-overlay-dark::after {content: ''; position: absolute; inset: 0; z-index: 2;} .lvd-filter-light::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));} .lvd-filter-medium::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));} .lvd-filter-strong::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));} .lvd-filter-blackout::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95));} .lvd-filter-overlay-dark::after {background: rgba(0, 0, 0, 0.5); mix-blend-mode: overlay;} /*----------------------------- DEFAULT FORMAT -----------------------------*/ .lvd-default p {line-height: var(--lvd-line-height-base); margin-bottom:var(--lvd-mb-txt);} .lvd-default ul {display: grid; margin:0 0 16px 0; padding-left:20px;} .lvd-default li {list-style: none; position: relative; margin-bottom: 8px; padding-left: 22px; padding-right:16px;} .lvd-default li::before {content: ""; display: block; position: absolute; left: 0; background-color: var(--lvd-cc-list-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; width: 8px; height: 8px; top: 0.38em; left: 4px; -webkit-mask-image: url('../assets/svg/bs-icons/circle-fill.svg'); mask-image: url('../assets/svg/bs-icons/circle-fill.svg');} .lvd-default.lvd-li-style-primary ul li {margin-bottom: 16px; padding-left: 30px;} .lvd-default.lvd-li-style-primary ul li::before {width: 20px; height: 20px; top: 0.1em; left: 0; -webkit-mask-image: url('../assets/svg/bs-icons/check-circle-fill.svg'); mask-image: url('../assets/svg/bs-icons/check-circle-fill.svg');} .lvd-default.lvd-li-style-secondary ul li {margin-bottom: 16px; padding-left: 32px;} .lvd-default.lvd-li-style-secondary ul li::before {width: 20px; height: 20px; top: 0.1em; left: 0; background-color: var(--lvd-color-secondary); -webkit-mask-image: url('../assets/svg/bs-icons/check-circle.svg'); mask-image: url('../assets/svg/bs-icons/check-circle.svg');} /* List columns */ .lvd-default.lvd-li-col1 ul {grid-template-columns: repeat(1, minmax(0, 1fr));} .lvd-default.lvd-li-col2 ul {grid-template-columns: repeat(2, minmax(0, 1fr));} .lvd-default.lvd-li-col3 ul {grid-template-columns: repeat(3, minmax(0, 1fr));} .lvd-default.lvd-li-col4 ul {grid-template-columns: repeat(4, minmax(0, 1fr));} /* Headings */ .lvd-default.lvd-text h2 {font-size:var(--lvd-text-h4); font-weight:700;} .lvd-default.lvd-text h3 {font-size:var(--lvd-text-h5); font-weight:700;} .lvd-default.lvd-text h4 {font-size:var(--lvd-text-body); font-weight:700;} /*----------------------------- SEMANTIC TOKENS -----------------------------*/ .lvd-component {position:relative;} .lvd-breadcrumbs {font-weight:300; font-size:var(--lvd-text-s2); font-family: var(--lvd-secondary-font);} .lvd-breadcrumbs a {color:var(--lvd-cc-breadcrumbs-link);} .lvd-section-title {font-weight:700; color:var(--lvd-cc-section-title);} .lvd-keyword {display:inline-block; margin-bottom:8px; font-weight:700; color:var(--lvd-cc-keyword); text-transform:uppercase; font-size:var(--lvd-text-body);} .lvd-badge {display:inline-block; background:var(--lvd-cc-badge-bg); color:var(--lvd-cc-badge-text); font-weight:700; padding:8px; border-radius:4px; box-shadow:var(--lvd-shadow-100);} .lvd-tags {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;} .lvd-tags.lvd-text-center {justify-content:center;} .lvd-tags.lvd-text-right {justify-content:flex-end;} .lvd-tag {display:inline-block; background:var(--lvd-cc-tag-bg); color:var(--lvd-cc-tag-text); border:1px solid var(--lvd-cc-tag-border); padding:4px 12px; border-radius:999px; font-size:var(--lvd-text-s2); font-weight:600; line-height:1.4;} .lvd-title {margin-bottom:16px; font-weight:700; color:var(--lvd-cc-title);} .lvd-highlight {} .lvd-highlight-soft {} .lvd-text a {color:var(--lvd-cc-link);} /*.lvd-text {font-weight: 400; color:var(--lvd-cc-text);} */ /*----------------------------- TRACKING -----------------------------*/ .lvd-track-item {position:relative; display:inline-block; margin-right:80px;} .lvd-track-item-text {display:inline-block;} .lvd-track-item-cta {position:absolute; display:inline-block; border-radius:4px; font-weight:400; width:115px; padding-left:20px; right:-60px; top:2px; bottom:0; background: rgba(0, 0, 0, 0) linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;} .lvd-track-item-cta.lvd-track-item-cta-hide {display:none;} /* Accent */ .lvd-style-accent .lvd-track-item-cta {background: rgba(0, 0, 0, 0) linear-gradient(90deg, rgba(57, 88, 212, 0) 0%, rgba(57, 88, 212, 1) 15%, rgba(57, 88, 212, 1) 100%) repeat scroll 0 0;} /* Dark */ /* Light */ /*----------------------------- HERO AUTHOR -----------------------------*/ .lvd-hero-author-box {gap:16px;} .lvd-hero-author-box-image {width:48px; height:48px; overflow:hidden; flex-shrink:0;} .lvd-hero-author-box-image img {border-radius:50%; width:48px; height:48px; object-fit:cover;} .lvd-hero-author-box .lvd-author-name {margin-bottom:4px;} .lvd-hero-author-box .lvd-author-name a {color:var(--lvd-cc-link);} /*----------------------------- PAGINATION -----------------------------*/ .lvd-pagination {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; padding:var(--lvd-py) 0;} .lvd-pagination .page-numbers {display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 8px; border-radius:20px; font-weight:600; font-size:var(--lvd-text-s1); color:var(--lvd-cc-text); text-decoration:none; transition:opacity 0.3s ease;} .lvd-pagination .page-numbers:hover {opacity:0.7; color:var(--lvd-cc-text);} .lvd-pagination .page-numbers.current {background:var(--lvd-cc-button-bg); color:var(--lvd-cc-button-text); pointer-events:none;} .lvd-pagination .page-numbers.dots {pointer-events:none;} .lvd-pagination .prev, .lvd-pagination .next {min-width:40px; height:40px; padding:10px; font-size:0; line-height:0;} .lvd-pagination .prev {margin-right:8px;} .lvd-pagination .next {margin-left:8px;} .lvd-pagination .prev::before {content:""; display:block; width:20px; height:20px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-image:url('../assets/svg/bs-icons/arrow-left.svg'); mask-image:url('../assets/svg/bs-icons/arrow-left.svg'); transition:transform 0.3s ease;} .lvd-pagination .prev:hover::before {transform:translateX(-5px);} .lvd-pagination .next::after {content:""; display:block; width:20px; height:20px; background-color:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; -webkit-mask-image:url('../assets/svg/bs-icons/arrow-right.svg'); mask-image:url('../assets/svg/bs-icons/arrow-right.svg'); transition:transform 0.3s ease;} .lvd-pagination .next:hover::after {transform:translateX(5px);} /*############################# MOBILE (bm-) #############################*/ @media (max-width:767px) { /*----------------------------- TYPOGRAPHY -----------------------------*/ h1, h2, h3, h4, h5 {--lvd-mb-txt:8px;} h1 {--lvd-text-h1:32px;} h2 {--lvd-text-h2:28px;} h3 {--lvd-text-h3:26px;} h4 {--lvd-text-h4:18px;} h5 {--lvd-text-h5:16px;} .lvd-text-d1 {--lvd-text-d1:44px;} .lvd-text-d2 {--lvd-text-d2:40px;} .lvd-text-d3 {--lvd-text-d3:36px;} .lvd-text-h1 {--lvd-text-h1:32px;} .lvd-text-h2 {--lvd-text-h2:28px;} .lvd-text-h3 {--lvd-text-h3:24px;} .lvd-text-h4 {--lvd-text-h4:20px;} .lvd-text-h5 {--lvd-text-h5:18px;} .lvd-text-s1 {--lvd-text-s1:13px;} .lvd-text-s2 {--lvd-text-s2:11px;} /*----------------------------- LAYOUT -----------------------------*/ /* Grid gap */ .lvd-grid-gap-2xs {gap:4px;} .lvd-grid-gap-xs {gap:8px;} .lvd-grid-gap-sm {gap:16px;} .lvd-grid-gap {gap:24px;} .lvd-grid-gap-md {gap:32px;} .lvd-grid-gap-lg {gap:40px;} .lvd-grid-gap-xl {gap:48px;} .lvd-grid-gap-2xl {gap:56px;} .lvd-grid-gap-3xl {gap:64px;} /* Padding */ .lvd-px-lg-py {padding:56px 16px} /*mixed*/ /* Margin big tiers — component/section spacing, reduse cu 16px pe mobil */ .lvd-mt-big1 {margin-top:48px;} .lvd-mt-big2 {margin-top:64px;} .lvd-mt-big3 {margin-top:80px;} .lvd-mb-big1 {margin-bottom:48px;} .lvd-mb-big2 {margin-bottom:64px;} .lvd-mb-big3 {margin-bottom:80px;} /*----------------------------- DEFAULT FORMAT -----------------------------*/ /* List columns */ .lvd-default.lvd-li-col1 ul, .lvd-default.lvd-li-col2 ul, .lvd-default.lvd-li-col3 ul, .lvd-default.lvd-li-col4 ul {grid-template-columns: repeat(1, minmax(0, 1fr));} /*----------------------------- TABLE -----------------------------*/ .lvd-table {margin-right:10px !important; margin-left:10px !important; width: calc(100% - 20px);} .lvd-table td, .lvd-table th {padding:10px 20px; border:1px solid var(--lvd-color-gray-300); } /*----------------------------- BUTTONS -----------------------------*/ .lvd-button-group-self {padding:0 16px;} /*Play Button*/ .lvd-play-button {width:48px; height:48px; top: calc(50% - 8px);} .lvd-icon-play {width:24px; height:24px;} /* Play Video CTA */ .lvd-video-cta {top:calc(50% + 30px);} .lvd-video-cta span {font-size:var(--lvd-text-s2);} /*----------------------------- ICONS -----------------------------*/ /*size*/ .lvd-icon-size-sm {width:40px; height:40px;} .lvd-icon-size-sm.lvd-icon-style-card-primary-light svg, .lvd-icon-size-sm.lvd-icon-style-dot-primary-light svg, .lvd-icon-size-sm.lvd-icon-style-card-secondary-light svg, .lvd-icon-size-sm.lvd-icon-style-dot-secondary-light svg {height:16px; width:16px;} .lvd-icon-size-sm.lvd-icon-style-transparent svg, .lvd-icon-size-sm.lvd-icon-style-white svg, .lvd-icon-size-sm.lvd-icon-style-primary svg, .lvd-icon-size-sm.lvd-icon-style-secondary svg, .lvd-icon-size-sm.lvd-icon-style-tertiary svg {height:24px; width:24px;} .lvd-icon-size-md {width:48px; height:48px;} .lvd-icon-size-md.lvd-icon-style-card-primary-light svg, .lvd-icon-size-md.lvd-icon-style-dot-primary-light svg, .lvd-icon-size-md.lvd-icon-style-card-secondary-light svg, .lvd-icon-size-md.lvd-icon-style-dot-secondary-light svg {height:24px; width:24px;} .lvd-icon-size-md.lvd-icon-style-transparent svg, .lvd-icon-size-md.lvd-icon-style-white svg, .lvd-icon-size-md.lvd-icon-style-primary svg, .lvd-icon-size-md.lvd-icon-style-secondary svg, .lvd-icon-size-md.lvd-icon-style-tertiary svg {height:32px; width:32px;} .lvd-icon-size-lg {width:56px; height:56px;} .lvd-icon-size-lg.lvd-icon-style-card-primary-light svg, .lvd-icon-size-lg.lvd-icon-style-dot-primary-light svg, .lvd-icon-size-lg.lvd-icon-style-card-secondary-light svg, .lvd-icon-size-lg.lvd-icon-style-dot-secondary-light svg {height:32px; width:32px;} .lvd-icon-size-lg.lvd-icon-style-transparent svg, .lvd-icon-size-lg.lvd-icon-style-white svg, .lvd-icon-size-lg.lvd-icon-style-primary svg, .lvd-icon-size-lg.lvd-icon-style-secondary svg, .lvd-icon-size-lg.lvd-icon-style-tertiary svg {height:40px; width:40px;} } /*############################# END MOBILE (bm-) #############################*/ /*############################# TABLET (bt-) #############################*/ @media (min-width:768px) and (max-width:1024px) { /*----------------------------- LAYOUT -----------------------------*/ /* Grid gap */ .lvd-grid-gap-xs {gap:3px;} .lvd-grid-gap-sm {gap:6px;} .lvd-grid-gap {gap:10px;} .lvd-grid-gap-md {gap:16px;} .lvd-grid-gap-lg {gap:20px;} .lvd-grid-gap-xl {gap:40px;} .lvd-grid-gap-2xl {gap:60px;} .lvd-grid-gap-3xl {gap:80px;} /*----------------------------- DEFAULT FORMAT -----------------------------*/ /* List columns */ .lvd-default.bt-lvd-li-col1 ul {grid-template-columns: repeat(1, minmax(0, 1fr));} .lvd-default.bt-lvd-li-col2 ul {grid-template-columns: repeat(2, minmax(0, 1fr));} .lvd-default.bt-lvd-li-col3 ul {grid-template-columns: repeat(3, minmax(0, 1fr));} .lvd-default.bt-lvd-li-col4 ul {grid-template-columns: repeat(4, minmax(0, 1fr));} /*----------------------------- TABLE -----------------------------*/ .lvd-table {margin-right:20px !important; margin-left:20px !important; width: calc(100% - 40px);} .lvd-table td, .lvd-table th {padding:10px 20px; border:1px solid var(--lvd-color-gray-300); } /*----------------------------- BUTTONS -----------------------------*/ .lvd-button-group-self {padding:0 20px;} } /*############################# END TABLET (bt-) #############################*/