/* Generisano iz src/assets/css/NN-*.css, ne menjati ručno. */
/* 00-fonts.css */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/assets/fonts/manrope-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* 01-tokens.css */
:root {
--orange-50: #fff6f1;
--orange-100: #ffe9df;
--orange-200: #fecebb;
--orange-300: #fea88f;
--orange-400: #ff8a5c;
--orange-500: #e75224;
--orange-600: #cc3300;
--orange-700: #b32d00;
--orange-800: #8a2200;
--orange-900: #521000;
--green-50: #f1f8f0;
--green-100: #e2f0e1;
--green-200: #c5e5c3;
--green-300: #8fd18c;
--green-400: #5fae5c;
--green-500: #3f8f3e;
--green-600: #2f7a31;
--green-700: #236425;
--green-800: #2a592d;
--green-900: #1b3f1d;
--gray-0: #ffffff;
--gray-50: #f6f6f6;
--gray-100: #eeeeee;
--gray-200: #e2e3e3;
--gray-300: #d0d1d2;
--gray-500: #8e8e8e;
--gray-700: #5c5e62;
--gray-800: #393c41;
--gray-900: #171a20;
--gray-950: #0e0f12;
--black: #171a20;
--red-600: #b42318;
--red-50: #fef1f0;
color-scheme: light;
--color-bg: var(--gray-0);
--color-surface: var(--gray-0);
--color-surface-2: var(--gray-50);
--color-surface-3: var(--gray-100);
--color-text: var(--black);
--color-text-muted: var(--gray-700);
--color-border: var(--gray-200);
--color-border-strong: var(--gray-500);
--color-primary: var(--orange-600);
--color-primary-hover: var(--orange-700);
--color-primary-active: var(--orange-800);
--color-on-primary: var(--gray-0);
--color-primary-text: var(--orange-700);
--color-primary-soft: var(--orange-50);
--color-secondary: var(--green-800);
--color-secondary-hover: var(--green-900);
--color-on-secondary: var(--gray-0);
--color-secondary-text: var(--green-800);
--color-secondary-soft: var(--green-50);
--color-success: var(--green-800);
--color-success-soft: var(--green-50);
--color-danger: var(--red-600);
--color-danger-soft: var(--red-50);
--color-focus: var(--orange-600);
--color-link: var(--color-primary-text);
--color-dc: var(--orange-600);
--color-ac: var(--green-600);
--shadow-sm: none;
--shadow-md: 0 2px 8px rgb(23 26 32 / 0.06);
--shadow-lg: 0 8px 30px rgb(23 26 32 / 0.1);
--font-sans:
'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--weight-regular: 400;
--weight-heading: 500;
--weight-bold: 600;
--text-xs: 0.8125rem;
--text-sm: 0.9375rem;
--text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
--text-lg: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
--text-xl: clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.33rem + 0.72vw, 1.875rem);
--text-3xl: clamp(1.75rem, 1.46rem + 1.3vw, 2.5rem);
--text-4xl: clamp(2.125rem, 1.6rem + 2.3vw, 3.5rem);
--text-display: clamp(2.5rem, 1.9rem + 2.8vw, 4.25rem);
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.6;
--tracking-tight: -0.01em;
--tracking-wide: 0.06em;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--section-space: clamp(var(--space-12), 6vw + 1rem, var(--space-24));
--gutter: clamp(var(--space-4), 3vw, var(--space-8));
--radius-sm: 0.25rem;
--radius-md: 0.25rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-pill: 999px;
--border-width: 1px;
--focus-ring: 3px;
--container: 76rem;
--container-narrow: 46rem;
--header-height: 3.5rem;
--tap-target: 2.75rem;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 120ms;
--duration: 220ms;
--z-header: 50;
}
.theme-dark {
color-scheme: dark;
--color-bg: var(--gray-950);
--color-surface: var(--gray-900);
--color-surface-2: #131418;
--color-surface-3: #1c1d22;
--color-text: #f2f2f4;
--color-text-muted: #a9aab2;
--color-border: var(--gray-800);
--color-border-strong: #6c6d75;
--color-primary-text: var(--orange-400);
--color-primary-soft: #2a1610;
--color-secondary: var(--green-600);
--color-secondary-hover: var(--green-700);
--color-secondary-text: var(--green-300);
--color-secondary-soft: #132516;
--color-success: var(--green-300);
--color-success-soft: #132516;
--color-danger: #ff8a7a;
--color-danger-soft: #2b1412;
--color-ac: var(--green-400);
--color-link: var(--color-primary-text);
color: var(--color-text);
background-color: var(--color-bg);
}
.theme-light {
color-scheme: light;
--color-bg: var(--gray-0);
--color-surface: var(--gray-0);
--color-surface-2: var(--gray-50);
--color-surface-3: var(--gray-100);
--color-text: var(--black);
--color-text-muted: var(--gray-700);
--color-border: var(--gray-200);
--color-border-strong: var(--gray-500);
--color-primary-text: var(--orange-700);
--color-primary-soft: var(--orange-50);
--color-secondary: var(--green-800);
--color-secondary-hover: var(--green-900);
--color-secondary-text: var(--green-800);
--color-secondary-soft: var(--green-50);
--color-success: var(--green-800);
--color-success-soft: var(--green-50);
--color-danger: var(--red-600);
--color-danger-soft: var(--red-50);
--color-ac: var(--green-600);
--color-link: var(--color-primary-text);
color: var(--color-text);
background-color: var(--color-bg);
}
/* 02-base.css */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-height) + var(--space-4));
}
body {
margin: 0;
min-height: 100svh;
display: flex;
flex-direction: column;
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
main {
flex: 1;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: var(--weight-heading);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 {
font-size: var(--text-4xl);
}
h2 {
font-size: var(--text-3xl);
}
h3 {
font-size: var(--text-xl);
line-height: var(--leading-snug);
}
h4 {
font-size: var(--text-lg);
line-height: var(--leading-snug);
}
p,
ul,
ol,
dl,
figure,
blockquote {
margin: 0;
}
p {
text-wrap: pretty;
}
strong,
b {
font-weight: var(--weight-bold);
}
img,
svg,
video,
picture {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: var(--color-link);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration-thickness: 0.14em;
}
:focus-visible {
outline: var(--focus-ring) solid var(--color-focus);
outline-offset: 2px;
}
::selection {
background: var(--orange-200);
color: var(--black);
}
hr {
height: 0;
margin: var(--space-8) 0;
border: 0;
border-top: var(--border-width) solid var(--color-border);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
table {
border-collapse: collapse;
}
.tabular {
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 03-layout.css */
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}
.section {
padding-block: var(--section-space);
}
.section--alt {
background-color: var(--color-surface-2);
}
.section--tight {
padding-block: var(--space-12);
}
.section-head {
display: grid;
gap: var(--space-3);
max-width: 44rem;
margin-bottom: var(--space-10);
}
.section-head--center {
margin-inline: auto;
text-align: center;
justify-items: center;
}
.eyebrow {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-primary-text);
}
.lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.stack > * + * {
margin-top: var(--stack-space, var(--space-4));
}
.stack--sm {
--stack-space: var(--space-2);
}
.stack--lg {
--stack-space: var(--space-8);
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-space, var(--space-3));
}
.grid {
display: grid;
gap: var(--grid-gap, var(--space-6));
grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}
.grid--2 {
--grid-min: 22rem;
}
.grid--3 {
--grid-min: 18rem;
}
.grid--4 {
--grid-min: 16rem;
}
.prose {
max-width: 68ch;
}
.prose > * + * {
margin-top: 1em;
}
.prose h2 {
margin-top: 1.6em;
font-size: var(--text-2xl);
}
.prose h3 {
margin-top: 1.4em;
}
.prose ul,
.prose ol {
padding-left: 1.4em;
}
.prose li + li {
margin-top: 0.4em;
}
.prose blockquote {
padding-left: var(--space-4);
border-left: 4px solid var(--color-primary);
font-size: var(--text-lg);
}
.prose img {
border-radius: var(--radius-lg);
}
/* 10-buttons.css */
.btn {
--btn-bg: transparent;
--btn-fg: var(--color-text);
--btn-border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 2.5rem;
padding: var(--space-2) var(--space-6);
border: 2px solid var(--btn-border);
border-radius: var(--radius-sm);
background-color: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--duration) ease,
border-color var(--duration) ease,
color var(--duration) ease;
}
.btn:hover {
text-decoration: none;
}
.btn .icon {
flex: none;
width: 1.1em;
height: 1.1em;
}
.btn--primary {
--btn-bg: var(--color-primary);
--btn-fg: var(--color-on-primary);
}
.btn--primary:hover {
--btn-bg: var(--color-primary-hover);
}
.btn--primary:active {
--btn-bg: var(--color-primary-active);
}
.btn--secondary {
--btn-bg: var(--color-secondary);
--btn-fg: var(--color-on-secondary);
}
.btn--secondary:hover {
--btn-bg: var(--color-secondary-hover);
}
.btn--outline {
--btn-bg: var(--color-surface-3);
--btn-fg: var(--color-text);
}
.btn--outline:hover {
--btn-bg: var(--color-border);
}
.btn--light {
--btn-bg: rgb(244 244 244 / 0.72);
--btn-fg: var(--gray-900);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn--light:hover {
--btn-bg: rgb(244 244 244 / 0.92);
}
.btn--ghost {
--btn-fg: var(--color-text);
padding-inline: var(--space-3);
}
.btn--ghost:hover {
--btn-bg: var(--color-surface-3);
}
.btn--sm {
min-height: 2rem;
padding: var(--space-1) var(--space-4);
font-size: var(--text-xs);
}
.btn--lg {
min-height: 2.75rem;
padding: var(--space-2) var(--space-8);
font-size: var(--text-sm);
}
.btn--wide {
min-width: min(16rem, 100%);
}
.btn--block {
display: flex;
width: 100%;
}
.btn:disabled,
.btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
}
/* 11-cards.css */
.card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-lg);
background-color: var(--color-surface);
}
.project-card,
.post-card {
background: transparent;
}
.project-card .card__media,
.post-card .card__media {
border-radius: var(--radius-lg);
}
.project-card .card__body,
.post-card .card__body {
padding: var(--space-4) 0 0;
}
.card__media img {
transition: transform 0.6s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.card:has(.card__link):hover .card__media img {
transform: scale(1.03);
}
}
.package-card {
border: var(--border-width) solid var(--color-border);
transition: border-color var(--duration) ease;
}
.package-card:hover {
border-color: var(--color-text-muted);
}
.card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--color-surface-3);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
}
.card__title {
font-size: var(--text-xl);
font-weight: var(--weight-heading);
}
.card__link {
color: inherit;
text-decoration: none;
}
.card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.card__link:focus-visible {
outline: none;
}
.card:has(.card__link:focus-visible) {
outline: var(--focus-ring) solid var(--color-focus);
outline-offset: 2px;
}
.card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.card__meta > * {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.card__meta .icon {
width: 1em;
height: 1em;
}
.card__text {
color: var(--color-text-muted);
}
.card__footer {
margin-top: auto;
padding-top: var(--space-2);
}
.card__footer a {
position: relative;
z-index: 2;
}
.package-card .card__body {
gap: var(--space-4);
}
.package-card__power {
display: flex;
align-items: baseline;
gap: var(--space-2);
font-size: var(--text-4xl);
font-weight: var(--weight-heading);
line-height: 1;
letter-spacing: -0.02em;
}
.package-card__unit {
font-size: var(--text-xl);
color: var(--color-text-muted);
}
.package-card__panels {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.package-card--featured {
border-color: var(--color-text);
}
.post-card .card__media {
aspect-ratio: 16 / 9;
}
.post-card .card__title {
font-size: var(--text-lg);
}
.price {
display: grid;
gap: var(--space-1);
}
.price__label {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.price__amount {
font-size: var(--text-2xl);
font-weight: var(--weight-heading);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.price__note {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.card__media:empty {
position: relative;
background: radial-gradient(
circle at 70% 30%,
var(--color-primary-soft),
var(--color-surface-3) 70%
);
}
.card__media:empty::after {
content: '';
position: absolute;
inset: 0;
background: url('/assets/svg/logo-mark.svg') center / auto 42% no-repeat;
opacity: 0.18;
}
.project-card .badge {
padding: 0;
background: none;
color: var(--color-text-muted);
font-weight: var(--weight-heading);
}
/* 12-forms.css */
.form {
display: grid;
gap: var(--space-5);
}
.form__row {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.field {
display: grid;
gap: var(--space-2);
align-content: start;
}
.field__label,
.fieldset__legend {
font-weight: var(--weight-bold);
font-size: var(--text-sm);
}
.field__required {
color: var(--color-primary-text);
}
.field__hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.field__error {
display: flex;
gap: var(--space-2);
align-items: center;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-danger);
}
.field__error:empty {
display: none;
}
.field__error .icon {
flex: none;
width: 1.1em;
height: 1.1em;
}
.control {
display: block;
width: 100%;
min-height: var(--tap-target);
padding: var(--space-2) var(--space-4);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-text);
font-size: max(16px, var(--text-base));
line-height: 1.4;
transition:
border-color var(--duration-fast) ease,
box-shadow var(--duration-fast) ease;
}
.control::placeholder {
color: var(--color-text-muted);
opacity: 0.8;
}
.control:hover {
border-color: var(--color-text-muted);
}
.control:focus-visible {
outline: none;
border-color: var(--color-focus);
box-shadow: 0 0 0 var(--focus-ring) color-mix(in srgb, var(--color-focus) 35%, transparent);
}
.control[aria-invalid='true'] {
border-color: var(--color-danger);
}
.control:disabled {
opacity: 0.6;
cursor: not-allowed;
}
textarea.control {
min-height: 8rem;
resize: vertical;
}
select.control {
appearance: none;
padding-right: var(--space-10);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a857f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 1.25rem;
}
input[type='file'].control {
padding: var(--space-2);
cursor: pointer;
}
input[type='file'].control::file-selector-button {
margin-right: var(--space-3);
padding: var(--space-2) var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background-color: var(--color-surface-3);
color: var(--color-text);
font-weight: var(--weight-bold);
cursor: pointer;
}
.fieldset {
display: grid;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
}
.check input {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin: 0.15em 0 0;
accent-color: var(--color-primary);
cursor: pointer;
}
.segmented {
position: relative;
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-1);
margin: 0;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface-3);
}
.segmented input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.segmented label {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-sm);
font-weight: var(--weight-heading);
font-size: var(--text-sm);
color: var(--color-text-muted);
cursor: pointer;
transition:
background-color var(--duration-fast) ease,
color var(--duration-fast) ease;
}
.segmented label:hover {
color: var(--color-text);
}
.segmented input:checked + label {
background-color: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.segmented input:focus-visible + label {
outline: var(--focus-ring) solid var(--color-focus);
outline-offset: 1px;
}
.form__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* 13-compare.css */
.compare {
overflow-x: auto;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-surface);
-webkit-overflow-scrolling: touch;
}
.compare:focus-visible {
outline: var(--focus-ring) solid var(--color-focus);
}
.compare__table {
width: 100%;
min-width: 40rem;
font-size: var(--text-sm);
}
.compare__table caption {
padding: var(--space-4) var(--space-6);
text-align: left;
font-weight: var(--weight-bold);
font-size: var(--text-lg);
}
.compare__table th,
.compare__table td {
padding: var(--space-3) var(--space-4);
border-top: var(--border-width) solid var(--color-border);
text-align: center;
vertical-align: middle;
}
.compare__table th[scope='row'],
.compare__table thead th:first-child,
.compare__table tfoot td:first-child {
position: sticky;
left: 0;
z-index: 1;
width: 34%;
text-align: left;
font-weight: var(--weight-regular);
background-color: var(--color-surface);
}
.compare__table thead th {
border-top: 0;
padding-block: var(--space-6) var(--space-4);
vertical-align: bottom;
}
.compare__tier {
display: block;
font-size: var(--text-xl);
font-weight: var(--weight-heading);
letter-spacing: var(--tracking-tight);
}
.compare__inverter {
display: block;
margin-top: var(--space-1);
font-weight: var(--weight-regular);
color: var(--color-text-muted);
}
.compare__price th,
.compare__price td {
background-color: var(--color-surface-2);
}
.compare__price th[scope='row'] {
background-color: var(--color-surface-2);
font-weight: var(--weight-bold);
}
.compare__amount {
display: block;
font-size: var(--text-xl);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.compare__vat {
display: block;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.compare__table .is-featured {
background-color: var(--color-primary-soft);
}
.compare__badge {
display: block;
margin-bottom: var(--space-2);
}
.compare__status {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
}
.compare__status .icon {
width: 1rem;
height: 1rem;
stroke-width: 3;
}
.compare__status--included {
background-color: var(--color-success-soft);
color: var(--color-success);
}
.compare__status--client {
background-color: var(--color-surface-3);
color: var(--color-text-muted);
}
.compare__table tfoot td {
padding-block: var(--space-5);
background-color: var(--color-surface);
}
.compare__table tfoot .is-featured {
background-color: var(--color-primary-soft);
}
.compare__legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.compare__legend > span {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.compare__anchor {
display: block;
scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.compare__image {
display: block;
max-width: 11rem;
margin: 0 auto var(--space-3);
}
.compare__image img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}
/* 14-header-footer.css */
.skip-link {
position: absolute;
left: var(--space-4);
top: var(--space-2);
z-index: calc(var(--z-header) + 1);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
background-color: var(--color-primary);
color: var(--color-on-primary);
font-weight: var(--weight-bold);
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
color: var(--color-text);
}
.site-header--overlay {
position: absolute;
inset: 0 0 auto;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: #fff;
}
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-2) var(--space-6);
min-height: var(--header-height);
max-width: none;
padding-inline: clamp(var(--space-4), 3vw, var(--space-10));
}
.site-logo {
display: inline-flex;
align-items: center;
justify-self: start;
color: inherit;
text-decoration: none;
}
.site-logo svg,
.site-logo img {
width: auto;
height: 2.25rem;
}
.site-logo__wordmark {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.site-menu {
display: contents;
}
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding-inline: var(--space-3);
border-radius: var(--radius-sm);
color: inherit;
font-weight: var(--weight-heading);
font-size: var(--text-sm);
text-decoration: none;
transition: background-color var(--duration) ease;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
background-color: rgb(128 128 128 / 0.14);
}
.lang-switch {
position: relative;
}
.lang-switch summary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 2rem;
padding-inline: var(--space-3);
border-radius: var(--radius-sm);
font-weight: var(--weight-heading);
font-size: var(--text-sm);
list-style: none;
cursor: pointer;
user-select: none;
transition: background-color var(--duration) ease;
}
.lang-switch summary::-webkit-details-marker {
display: none;
}
.lang-switch summary:hover,
.lang-switch[open] summary {
background-color: rgb(128 128 128 / 0.14);
}
.lang-switch summary .icon {
width: 1rem;
height: 1rem;
transition: transform var(--duration) ease;
}
.lang-switch[open] summary .icon {
transform: rotate(180deg);
}
.flag {
flex: none;
width: 21px;
height: 14px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}
.lang-switch__list {
position: absolute;
z-index: 20;
top: calc(100% + var(--space-2));
right: 0;
min-width: 11rem;
margin: 0;
padding: var(--space-2);
list-style: none;
border-radius: var(--radius-md, 8px);
background-color: var(--color-bg);
color: var(--color-text);
box-shadow:
0 10px 30px rgb(0 0 0 / 0.14),
0 0 0 1px rgb(0 0 0 / 0.06);
}
.lang-switch__list a {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--tap-target, 2.75rem);
padding-inline: var(--space-3);
border-radius: var(--radius-sm);
color: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-heading);
text-decoration: none;
}
.lang-switch__list a:hover {
background-color: rgb(128 128 128 / 0.12);
}
.lang-switch__list a[aria-current='true'] {
background-color: rgb(128 128 128 / 0.08);
}
.lang-switch__list .icon {
width: 1rem;
height: 1rem;
margin-left: auto;
}
.site-header__actions {
display: flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: var(--space-2);
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
justify-self: end;
min-height: 2rem;
padding: 0 var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: rgb(128 128 128 / 0.14);
color: inherit;
cursor: pointer;
}
.menu-toggle .icon {
width: 1.25rem;
height: 1.25rem;
}
.menu-toggle .icon--close,
.site-header.is-open .menu-toggle .icon--menu {
display: none;
}
.site-header.is-open .menu-toggle .icon--close {
display: block;
}
@media (max-width: 63.99rem) {
.site-header__inner {
grid-template-columns: 1fr auto;
}
.site-menu {
display: flex;
flex-wrap: wrap;
grid-column: 1 / -1;
gap: var(--space-2) var(--space-4);
padding-bottom: var(--space-2);
}
.js .menu-toggle {
display: inline-flex;
}
.js .site-menu {
display: none;
}
.js .site-header.is-open {
position: fixed;
inset: 0;
background-color: var(--color-bg);
color: var(--color-text);
overflow-y: auto;
}
.js .site-header.is-open .site-menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-6);
padding-block: var(--space-6) var(--space-10);
}
.js .site-header.is-open .site-nav ul {
flex-direction: column;
}
.js .site-header.is-open .site-nav a {
width: 100%;
min-height: var(--tap-target);
font-size: var(--text-lg);
}
.js .site-header.is-open .site-header__actions {
justify-content: space-between;
}
.lang-switch__list {
right: auto;
left: 0;
}
}
.site-footer {
padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
background-color: #1a1a1a;
color: rgb(255 255 255 / 0.72);
font-size: var(--text-sm);
}
.site-footer a:not(.btn) {
color: inherit;
text-decoration: none;
}
.site-footer a:not(.btn):hover {
color: #fff;
}
.site-footer__grid {
display: grid;
gap: var(--space-12) var(--space-8);
align-items: center;
}
@media (min-width: 60rem) {
.site-footer__grid {
grid-template-columns: 1fr auto 1fr;
}
.site-footer__col--end {
justify-items: end;
text-align: right;
}
}
.site-footer__col {
display: grid;
gap: var(--space-3);
align-content: center;
}
.site-footer h2 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: #fff;
}
.site-footer__brand {
display: grid;
gap: var(--space-5);
justify-items: center;
text-align: center;
color: #fff;
}
.site-footer__motto {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
font-weight: var(--weight-bold);
line-height: 1;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.site-footer__logo {
width: auto;
height: clamp(9rem, 6rem + 8vw, 13rem);
}
.site-footer__contact {
display: grid;
gap: var(--space-1);
}
.site-footer__contact a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.site-footer__contact .icon {
width: 1em;
height: 1em;
}
.site-footer__slogan {
margin-top: var(--space-3);
color: #fff;
font-weight: var(--weight-bold);
}
.site-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__social a {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--color-primary);
color: #fff;
transition:
background-color var(--duration) ease,
transform var(--duration) var(--ease-out);
}
.site-footer__social a:hover {
background-color: var(--color-primary-hover);
transform: translateY(-2px);
}
.icon--fill {
fill: currentColor;
stroke: none;
}
.icon--instagram.icon--fill {
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.site-footer__social .icon {
width: 1.15rem;
height: 1.15rem;
}
.newsletter {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
max-width: 26rem;
}
.newsletter .control {
flex: 1 1 12rem;
min-height: 2.5rem;
border-color: rgb(255 255 255 / 0.3);
background-color: rgb(255 255 255 / 0.06);
color: #fff;
}
.newsletter .control::placeholder {
color: rgb(255 255 255 / 0.55);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2) var(--space-6);
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: var(--border-width) solid rgb(255 255 255 / 0.12);
font-size: var(--text-xs);
}
.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
}
.site-footer__link {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.site-footer__link:hover {
color: #fff;
}
.consent {
position: fixed;
inset: auto auto var(--space-4) var(--space-4);
z-index: calc(var(--z-header) + 2);
display: grid;
gap: var(--space-3);
max-width: min(26rem, calc(100vw - 2 * var(--space-4)));
padding: var(--space-5);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-surface);
box-shadow: var(--shadow-lg);
color: var(--color-text);
font-size: var(--text-sm);
}
.consent__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* 15-elements.css */
.icon {
display: inline-block;
flex: none;
width: 1.25em;
height: 1.25em;
vertical-align: -0.2em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
width: fit-content;
padding: 0.2em 0.6em;
border-radius: var(--radius-sm);
background-color: var(--color-surface-3);
color: var(--color-text);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.02em;
line-height: 1.5;
white-space: nowrap;
}
.badge--primary {
background-color: var(--color-primary-soft);
color: var(--color-primary-text);
}
.badge--secondary {
background-color: var(--color-secondary-soft);
color: var(--color-secondary-text);
}
.badge--solid {
background-color: var(--color-primary);
color: var(--color-on-primary);
}
.alert {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: var(--border-width) solid currentColor;
border-radius: var(--radius-md);
}
.alert .icon {
margin-top: 0.15em;
}
.alert__body {
color: var(--color-text);
}
.alert--success {
background-color: var(--color-success-soft);
color: var(--color-success);
}
.alert--error {
background-color: var(--color-danger-soft);
color: var(--color-danger);
}
.alert--info {
background-color: var(--color-primary-soft);
color: var(--color-primary-text);
}
.more {
border-top: var(--border-width) solid var(--color-border);
}
.more > summary {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-target);
font-weight: var(--weight-bold);
color: var(--color-primary-text);
cursor: pointer;
list-style: none;
}
.more > summary::-webkit-details-marker {
display: none;
}
.more > summary .icon {
transition: transform var(--duration) var(--ease-out);
}
.more[open] > summary .icon {
transform: rotate(180deg);
}
.more__body {
padding-bottom: var(--space-4);
color: var(--color-text-muted);
}
.check-list {
display: grid;
gap: var(--space-3);
padding: 0;
list-style: none;
}
.check-list li {
display: flex;
gap: var(--space-3);
}
.check-list .icon {
margin-top: 0.1em;
color: var(--color-success);
stroke-width: 3;
}
.steps {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
padding: 0;
list-style: none;
counter-reset: step;
}
.steps > li {
display: grid;
gap: var(--space-2);
align-content: start;
counter-increment: step;
}
.steps > li::before {
content: counter(step);
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin-bottom: var(--space-2);
border-radius: 50%;
background-color: var(--color-primary);
color: var(--color-on-primary);
font-weight: var(--weight-bold);
font-size: var(--text-lg);
}
.steps h3 {
font-size: var(--text-lg);
}
.steps p {
color: var(--color-text-muted);
}
.stat {
display: grid;
gap: var(--space-1);
}
.stat__value {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
line-height: 1;
letter-spacing: var(--tracking-tight);
color: var(--color-primary-text);
}
.stat__label {
color: var(--color-text-muted);
}
/* 16-hero.css */
.hero {
position: relative;
overflow: hidden;
padding-block: clamp(var(--space-16), 10vw, var(--space-24));
background-color: var(--color-bg);
}
.hero__inner {
display: grid;
gap: var(--space-6);
max-width: 48rem;
}
.hero__title {
font-size: var(--text-display);
font-weight: var(--weight-heading);
line-height: 1.05;
letter-spacing: -0.015em;
}
.hero__title em {
font-style: normal;
color: var(--color-primary-text);
}
.hero__lead {
max-width: 38rem;
font-size: var(--text-xl);
color: var(--color-text-muted);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}
/* 17-pages.css */
.demo-banner {
position: fixed;
left: var(--space-3);
bottom: var(--space-3);
z-index: calc(var(--z-header) + 2);
max-width: min(22rem, calc(100vw - 2 * var(--space-3)));
margin: 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background-color: var(--gray-900);
color: #fff;
font-size: var(--text-xs);
box-shadow: var(--shadow-lg);
}
.page-head {
padding-block: var(--space-10) var(--space-4);
}
.page-head__text {
display: grid;
gap: var(--space-3);
max-width: 48rem;
margin-top: var(--space-6);
}
.page-head__title {
font-size: var(--text-display);
font-weight: var(--weight-heading);
letter-spacing: -0.015em;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.breadcrumbs li:not(:last-child)::after {
content: '/';
margin-left: var(--space-2);
color: var(--color-border-strong);
}
.breadcrumbs a {
color: inherit;
}
.breadcrumbs [aria-current='page'] {
color: var(--color-text);
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.pagination ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.pagination li > * {
display: inline-grid;
place-items: center;
min-width: var(--tap-target);
height: var(--tap-target);
border-radius: var(--radius-pill);
font-weight: var(--weight-bold);
text-decoration: none;
color: var(--color-text);
}
.pagination a:hover {
background-color: var(--color-surface-3);
}
.pagination [aria-current='page'] {
background-color: var(--color-primary);
color: var(--color-on-primary);
}
.prev-next {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.prev-next__link {
display: grid;
gap: var(--space-1);
padding: var(--space-5);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text);
text-decoration: none;
}
.prev-next__link:hover {
border-color: var(--color-border-strong);
background-color: var(--color-surface-2);
}
.prev-next__link--next {
text-align: right;
}
.prev-next__label {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.prev-next__title {
font-weight: var(--weight-bold);
}
.project {
display: grid;
gap: var(--space-12);
}
.project__cover img,
.post__cover img {
width: 100%;
max-height: 34rem;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-xl);
}
.project__layout {
display: grid;
gap: var(--space-10);
align-items: start;
}
@media (min-width: 56rem) {
.project__layout {
grid-template-columns: minmax(16rem, 1fr) 2fr;
}
}
.facts {
display: grid;
gap: 0;
margin: 0;
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-surface-2);
}
.facts > div {
display: flex;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-5);
}
.facts > div + div {
border-top: var(--border-width) solid var(--color-border);
}
.facts dt {
color: var(--color-text-muted);
}
.facts dd {
margin: 0;
font-weight: var(--weight-bold);
text-align: right;
}
.gallery {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
padding: 0;
list-style: none;
}
.gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.project__cta {
text-align: center;
}
.card__media picture {
display: block;
height: 100%;
}
.segment-block + .segment-block {
margin-top: var(--space-16);
}
.segment-block__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-6);
}
.segment-block__head h2 {
font-size: var(--text-2xl);
}
.tier-cards {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
padding: 0;
list-style: none;
}
.tier-card {
display: grid;
gap: var(--space-3);
align-content: start;
padding: var(--space-8);
border: var(--border-width) solid var(--color-border);
border-top: 5px solid var(--tier, var(--color-border-strong));
border-radius: var(--radius-lg);
background-color: var(--color-surface);
}
.tier-card--stiskavac {
--tier: var(--color-text-muted);
}
.tier-card--taman {
--tier: var(--color-primary);
}
.tier-card--domacin {
--tier: var(--color-secondary);
}
.tier-card h3 {
font-size: var(--text-2xl);
}
.tier-card__tagline {
font-weight: var(--weight-bold);
color: var(--color-primary-text);
}
.tier-card p:last-child {
color: var(--color-text-muted);
}
.size-facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-10);
margin-top: var(--space-4);
padding: 0;
list-style: none;
}
.size-facts li {
display: grid;
gap: 2px;
}
.size-facts strong {
font-size: var(--text-xl);
font-variant-numeric: tabular-nums;
}
.size-facts span {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.size-switch {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.size-switch a.badge {
text-decoration: none;
}
.size-switch a.badge:hover {
background-color: var(--color-primary-soft);
color: var(--color-primary-text);
}
@media (min-width: 56rem) {
.post-card--featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.3fr 1fr;
}
.post-card--featured .card__media {
aspect-ratio: auto;
min-height: 20rem;
}
.post-card--featured .card__body {
justify-content: center;
padding: var(--space-10);
}
.post-card--featured .card__title {
font-size: var(--text-3xl);
}
}
.inquiry {
display: grid;
gap: var(--space-12);
align-items: start;
}
@media (min-width: 60rem) {
.inquiry {
grid-template-columns: 1.6fr 1fr;
}
.inquiry__aside {
position: sticky;
top: calc(var(--header-height) + var(--space-6));
}
}
.inquiry__form {
padding: clamp(var(--space-6), 4vw, var(--space-10));
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow: var(--shadow-md);
}
.inquiry__status:empty {
display: none;
}
.inquiry__aside {
display: grid;
gap: var(--space-4);
padding: var(--space-8);
border-radius: var(--radius-xl);
background-color: var(--color-surface-2);
}
.inquiry__aside h2 {
font-size: var(--text-2xl);
}
.inquiry__aside h3 {
margin-top: var(--space-4);
font-size: var(--text-lg);
}
.inquiry__contact {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-text);
text-decoration: none;
}
.inquiry__contact .icon {
color: var(--color-primary-text);
}
.gallery a {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
}
.gallery a:hover img {
transform: scale(1.03);
}
.gallery img {
transition: transform var(--duration) var(--ease-out);
}
.lightbox {
width: 100vw;
max-width: 100vw;
height: 100svh;
max-height: 100svh;
margin: 0;
padding: var(--space-12) var(--space-4);
border: 0;
background: rgb(4 4 8 / 0.94);
color: #fff;
}
.lightbox[open] {
display: grid;
place-items: center;
}
.lightbox::backdrop {
background: rgb(4 4 8 / 0.8);
}
.lightbox__img {
max-width: min(100%, 90rem);
max-height: calc(100svh - 8rem);
width: auto;
height: auto;
border-radius: var(--radius-md);
}
.lightbox__count {
position: absolute;
top: var(--space-4);
left: 50%;
transform: translateX(-50%);
font-size: var(--text-sm);
}
.lightbox__btn {
position: absolute;
display: grid;
place-items: center;
width: var(--tap-target);
height: var(--tap-target);
border: 0;
border-radius: 50%;
background: rgb(255 255 255 / 0.12);
color: #fff;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
}
.lightbox__btn:hover {
background: rgb(255 255 255 / 0.24);
}
.lightbox__close {
top: var(--space-3);
right: var(--space-3);
}
.lightbox__prev,
.lightbox__next {
top: 50%;
transform: translateY(-50%);
}
.lightbox__prev {
left: var(--space-3);
}
.lightbox__next {
right: var(--space-3);
}
.not-found__code {
font-size: clamp(5rem, 3rem + 10vw, 10rem);
font-weight: var(--weight-bold);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--color-primary-text);
}
.not-found__links {
margin-top: var(--space-3);
padding: 0;
list-style: none;
}
.tier-card__image {
margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-2);
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tier-card__image {
display: grid;
place-items: center;
background-color: #fff;
}
.tier-card__image img {
width: 100%;
max-width: 20rem;
height: auto;
}
.faq__list {
display: grid;
gap: var(--space-3);
}
.faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-bg);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
display: none;
}
.faq__item summary h3 {
margin: 0;
font-size: var(--text-base);
}
.faq__item summary .icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
transition: transform var(--duration) ease;
}
.faq__item[open] summary .icon {
transform: rotate(180deg);
}
.faq__item p {
margin: 0;
padding: 0 var(--space-5) var(--space-5);
color: var(--color-text-muted);
}
/* 18-home.css */
[hidden] {
display: none !important;
}
.no-js [data-filter-controls] {
display: none;
}
.hero-video {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 100svh;
padding: calc(var(--header-height) + clamp(var(--space-12), 12vh, var(--space-24))) var(--gutter)
clamp(var(--space-10), 8vh, var(--space-16));
overflow: hidden;
background-color: var(--gray-900);
color: #fff;
text-align: center;
}
.hero-video__media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero-video__media img,
.hero-video__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-video__media video {
opacity: 0;
transition: opacity 0.8s ease;
}
.hero-video__media video.is-playing {
opacity: 1;
}
.hero-video__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgb(0 0 0 / 0.55) 0%,
rgb(0 0 0 / 0.15) 35%,
rgb(0 0 0 / 0) 60%,
rgb(0 0 0 / 0.35) 100%
);
}
.hero-video__text {
display: grid;
gap: var(--space-3);
justify-items: center;
align-content: start;
}
.hero-video h1 {
font-size: var(--text-display);
font-weight: var(--weight-heading);
line-height: 1.05;
letter-spacing: -0.015em;
text-shadow: 0 1px 24px rgb(0 0 0 / 0.25);
}
.hero-video__text p {
max-width: 38rem;
font-size: var(--text-lg);
color: rgb(255 255 255 / 0.92);
}
.hero-video__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4) var(--space-5);
}
@media (max-width: 40rem) {
.hero-video__actions .btn {
width: 100%;
}
}
.kit .section-head {
max-width: 48rem;
}
.kit__payback {
font-weight: var(--weight-bold);
}
.kit__photos {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 48rem) {
.kit__photos {
grid-template-columns: repeat(2, 1fr);
}
}
.kit__photos img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-lg);
}
.kit__package {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius-lg);
background-color: var(--color-surface-3);
aspect-ratio: 1;
color: #fff;
text-decoration: none;
}
.kit__package img {
height: 100%;
border-radius: 0;
}
.kit__package::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.6) 100%);
}
.kit__label {
position: absolute;
inset: auto var(--space-4) var(--space-4);
z-index: 1;
display: grid;
gap: var(--space-1);
text-align: left;
}
.kit__name {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
line-height: 1.15;
}
.kit__price {
font-size: var(--text-sm);
color: rgb(255 255 255 / 0.9);
}
.kit__package:not(:has(img)) {
background-color: var(--gray-800);
}
.kit__package:focus-visible {
outline: var(--focus-ring) solid var(--color-focus);
outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
.kit__package img {
transition: transform 1.2s var(--ease-out);
}
.kit__package:hover img {
transform: scale(1.05);
}
}
.kit__actions,
.split__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.kit__actions {
justify-content: center;
margin-top: var(--space-10);
}
.kit + .kit {
padding-top: 0;
}
.split__grid {
display: grid;
gap: var(--space-10) clamp(var(--space-10), 6vw, var(--space-20));
align-items: center;
}
@media (min-width: 56rem) {
.split__grid {
grid-template-columns: 1fr 1.1fr;
}
.split--reverse .split__media {
order: -1;
}
}
.split__text h2 {
font-size: var(--text-3xl);
}
.split__text p {
color: var(--color-text-muted);
}
.split__text .lead {
color: var(--color-text);
}
.split__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-lg);
}
.split__actions {
padding-top: var(--space-4);
}
.ticks {
display: grid;
gap: var(--space-3);
padding: 0;
list-style: none;
}
.ticks li {
display: flex;
gap: var(--space-3);
}
.ticks .icon {
margin-top: 0.15em;
color: var(--color-primary);
stroke-width: 2.5;
}
.reasons {
display: grid;
gap: 0;
margin: 0;
}
.reasons > div {
padding-block: var(--space-4);
border-top: var(--border-width) solid var(--color-border);
}
.reasons dt {
font-weight: var(--weight-bold);
}
.reasons dd {
margin: var(--space-1) 0 0;
color: var(--color-text-muted);
}
.offer {
background-color: var(--color-surface-2);
}
.offer .inquiry__form {
box-shadow: none;
}
.section-head-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4) var(--space-8);
margin-bottom: var(--space-10);
}
.section-head-row .section-head {
margin-bottom: 0;
}
.section-head--center .segmented {
margin-top: var(--space-4);
}
.section-more {
margin-top: var(--space-10);
text-align: center;
}
.closing__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-4);
}
.partners__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) clamp(var(--space-8), 6vw, var(--space-20));
padding: 0;
list-style: none;
}
.benefits {
padding-block: clamp(var(--space-12), 6vw, var(--space-20)) 0;
}
.benefits__list {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
margin: 0;
padding: 0;
list-style: none;
}
.benefit {
display: grid;
gap: var(--space-2);
align-content: start;
justify-items: center;
padding: clamp(var(--space-8), 3vw, var(--space-10));
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow:
0 12px 32px rgb(23 26 32 / 0.08),
0 2px 6px rgb(23 26 32 / 0.05);
text-align: center;
transition:
box-shadow var(--duration) ease,
transform var(--duration) var(--ease-out);
}
.benefit:hover {
box-shadow:
0 18px 44px rgb(23 26 32 / 0.12),
0 3px 8px rgb(23 26 32 / 0.06);
transform: translateY(-3px);
}
.emblem {
width: 5.5rem;
height: 5.5rem;
margin-bottom: var(--space-2);
overflow: visible;
}
.emblem__fill--orange {
fill: var(--color-primary);
}
.emblem__fill--green {
fill: var(--color-secondary);
}
.emblem__fill--dark {
fill: var(--gray-900);
}
.emblem__ring {
fill: none;
stroke: rgb(255 255 255 / 0.45);
stroke-width: 1.5;
stroke-dasharray: 3 3;
}
.emblem__ribbon {
fill: var(--color-primary);
}
.emblem__big,
.emblem__small {
fill: #fff;
font-family: inherit;
font-weight: 700;
}
.emblem__big {
font-size: 19px;
}
.emblem__small {
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.emblem__key {
fill: none;
stroke: #fff;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
}
.benefit__value {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.benefit h3 {
font-size: var(--text-xl);
}
.benefit p:last-child {
color: var(--color-text-muted);
}
/* 19-motion.css */
@media (prefers-reduced-motion: no-preference) {
.reveal [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.9s var(--ease-out),
transform 0.9s var(--ease-out);
transition-delay: var(--reveal-delay, 0s);
}
.reveal [data-reveal='zoom'] {
transform: none;
overflow: hidden;
border-radius: var(--radius-lg);
}
.reveal [data-reveal='zoom'] img {
transform: scale(1.12);
transition: transform 1.6s var(--ease-out);
}
.reveal [data-reveal].is-visible {
opacity: 1;
transform: none;
}
.reveal [data-reveal='zoom'].is-visible img {
transform: none;
}
.reveal :nth-child(2) > [data-reveal],
.reveal [data-reveal]:nth-child(2) {
--reveal-delay: 0.08s;
}
.reveal :nth-child(3) > [data-reveal],
.reveal [data-reveal]:nth-child(3) {
--reveal-delay: 0.16s;
}
.reveal :nth-child(4) > [data-reveal],
.reveal [data-reveal]:nth-child(4) {
--reveal-delay: 0.24s;
}
.reveal :nth-child(5) > [data-reveal],
.reveal [data-reveal]:nth-child(5),
.reveal :nth-child(6) > [data-reveal],
.reveal [data-reveal]:nth-child(6) {
--reveal-delay: 0.32s;
}
.kit__photos li,
.gallery a {
overflow: hidden;
border-radius: var(--radius-lg);
}
.kit__photos img,
.split__media img {
transition: transform 1.2s var(--ease-out);
}
.kit__photos li:hover img {
transform: scale(1.05);
}
}
/* 20-how.css */
html:has(.hw) {
scroll-snap-type: y proximity;
scroll-padding-top: var(--header-height);
}
.hw-defs {
position: absolute;
width: 0;
height: 0;
}
.hw-intro {
display: grid;
align-items: center;
min-height: calc(100svh - var(--header-height));
padding-block: var(--space-12);
text-align: center;
}
.hw-intro__inner {
display: grid;
gap: var(--space-6);
justify-items: center;
}
.hw-intro h1 {
max-width: 16ch;
font-size: var(--text-display);
font-weight: var(--weight-heading);
letter-spacing: -0.02em;
line-height: 1.05;
}
.hw-intro .lead {
max-width: 40rem;
color: var(--color-text-muted);
}
.hw-intro__chain {
width: min(100%, 56rem);
margin-top: var(--space-6);
}
.hw-scroll {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-sm);
text-decoration: none;
}
.hw-screen {
display: grid;
align-items: center;
min-height: 100svh;
padding-block: var(--space-16);
scroll-snap-align: start;
}
@media (max-width: 47.99rem) {
.hw-screen {
min-height: auto;
}
.hw-intro {
min-height: 80svh;
}
}
.hw-screen:nth-of-type(odd) {
background-color: var(--color-surface-2);
}
.hw-screen__inner {
display: grid;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 64rem) {
.hw-screen__inner {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--space-16);
padding-left: var(--space-12);
}
.hw-screen--reverse .hw-copy {
order: 2;
}
}
.hw-screen__inner--stack {
grid-template-columns: minmax(0, 1fr) !important;
justify-items: center;
}
.hw-copy {
display: grid;
gap: var(--space-4);
align-content: center;
max-width: 34rem;
}
.hw-copy--center {
justify-items: center;
max-width: 44rem;
margin-inline: auto;
text-align: center;
}
.hw-copy h2 {
font-size: var(--text-4xl);
font-weight: var(--weight-heading);
letter-spacing: -0.015em;
line-height: 1.1;
}
.hw-copy .lead {
color: var(--color-text-muted);
}
.hw-copy .eyebrow {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.hw-figure {
display: grid;
gap: var(--space-6);
justify-items: center;
}
.hw-figure--wide {
width: min(100%, 40rem);
}
.hw-art,
.hw-chain {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.hw-art {
max-width: 36rem;
}
.hw-note {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.hw-backdrop {
fill: var(--color-surface);
}
.hw-screen:nth-of-type(even) .hw-backdrop {
fill: var(--color-surface-2);
}
.hw-node {
fill: var(--color-surface-2);
}
.hw-label {
fill: var(--color-text-muted);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
.hw-device {
fill: #fff;
stroke: var(--gray-300);
stroke-width: 2;
}
.hw-house {
fill: #fff;
stroke: var(--gray-200);
stroke-width: 3;
}
.hw-panel__frame {
fill: none;
stroke: #c9ccd1;
stroke-width: 3;
}
.hw-cable,
.hw-flow {
fill: none;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
}
.hw-cable--dc {
stroke: var(--color-dc);
}
.hw-cable--ac {
stroke: var(--color-ac);
}
.hw-flow {
stroke: #fff;
stroke-opacity: 0;
stroke-width: 2;
stroke-dasharray: 2 18;
}
.hw-tag rect {
fill: #fff;
stroke-width: 2;
}
.hw-tag text {
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.hw-tag--dc rect {
stroke: var(--color-dc);
}
.hw-tag--dc text {
fill: var(--color-dc);
}
.hw-tag--ac rect {
stroke: var(--color-ac);
}
.hw-tag--ac text {
fill: var(--color-ac);
}
.hw-led {
fill: var(--green-400);
}
.hw-ray {
fill: none;
stroke: #ff8a5c;
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 8 12;
}
.hw-spark {
fill: #ffd2bf;
opacity: 0;
}
.hw-opt-box rect {
fill: #fff;
stroke: var(--gray-500);
stroke-width: 2;
}
.hw-opt-box,
.hw-shade,
.hw-string,
.hw-battery,
.hw-grid {
transition:
opacity var(--duration) ease,
transform var(--duration) var(--ease-out);
transform-box: fill-box;
transform-origin: center;
}
.hw-shade {
opacity: 0;
fill: #2b2f36;
fill-opacity: 0.55;
}
.hw-watts {
font-variant-numeric: tabular-nums;
}
.hw-v--opt,
.hw-v--bypass {
display: none;
}
.hw-controls {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
.hw-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 2.75rem;
padding: var(--space-2) var(--space-4);
border: var(--border-width) solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-heading);
cursor: pointer;
}
.hw-toggle input {
width: 1.1rem;
height: 1.1rem;
accent-color: var(--color-text);
}
.hw-meter {
display: grid;
gap: var(--space-2);
}
.hw-meter__label,
.hw-result__label {
display: flex;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--text-sm);
}
.hw-meter__track {
height: 0.5rem;
border-radius: var(--radius-pill);
background-color: var(--color-surface-3);
overflow: hidden;
}
.hw-meter__fill,
.hw-result__fill {
height: 100%;
border-radius: inherit;
background-color: var(--color-dc);
transform-origin: left;
transition: transform 0.5s var(--ease-out);
}
.hw-result__fill {
background-color: var(--color-ac);
transform: scaleX(var(--w, 0));
}
.hw-result--sym .hw-result__fill {
background-color: var(--gray-500);
}
@supports selector(:has(*)) {
.hw-screen--opt:has(#opt-without:checked) .hw-opt-box {
opacity: 0;
transform: scale(0.6);
}
.hw-screen--opt:has(#opt-shade:checked) .hw-shade {
opacity: 1;
}
.hw-screen--opt:has(#opt-shade:checked) .hw-v--full {
display: none;
}
.hw-screen--opt:has(#opt-shade:checked):has(#opt-with:checked) .hw-v--opt,
.hw-screen--opt:has(#opt-shade:checked):has(#opt-without:checked) .hw-v--bypass {
display: inline;
}
.hw-screen--opt:has(#opt-shade:checked):has(#opt-with:checked) .hw-meter__fill {
transform: scaleX(var(--opt));
}
.hw-screen--opt:has(#opt-shade:checked):has(#opt-without:checked) .hw-meter__fill {
transform: scaleX(var(--bypass));
}
.hw-screen--opt:has(#opt-shade:checked):has(#opt-without:checked) .hw-string {
opacity: 0.55;
}
.hw-inv-text {
display: none;
}
.hw-screen--inv:has(#inv-ongrid:checked) .hw-inv-text--ongrid,
.hw-screen--inv:has(#inv-offgrid:checked) .hw-inv-text--offgrid,
.hw-screen--inv:has(#inv-hybrid:checked) .hw-inv-text--hybrid {
display: block;
}
.hw-screen--inv:has(#inv-ongrid:checked) .hw-battery,
.hw-screen--inv:has(#inv-offgrid:checked) .hw-grid {
opacity: 0;
transform: translateY(12px);
}
}
.hw-inv-texts {
display: grid;
gap: var(--space-3);
min-height: 6.5rem;
}
.hw-charge {
fill: var(--green-400);
}
.hw-photo {
width: min(100%, 22rem);
margin: 0;
}
.hw-photo img {
border-radius: var(--radius-lg);
}
.hw-photo figcaption {
margin-top: var(--space-2);
color: var(--color-text-muted);
font-size: var(--text-sm);
text-align: center;
}
.hw-breaker {
fill: var(--gray-200);
}
.hw-consumer__ring {
fill: #fff;
stroke: var(--gray-200);
stroke-width: 3;
}
.hw-glyph {
fill: none;
stroke: var(--gray-700);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.hw-calc {
display: grid;
gap: var(--space-8);
width: 100%;
max-width: 34rem;
padding: clamp(var(--space-6), 4vw, var(--space-10));
border-radius: var(--radius-xl);
background-color: var(--color-surface);
box-shadow: var(--shadow-md);
}
.hw-calc__phases {
display: grid;
gap: var(--space-5);
margin: 0;
padding: 0;
border: 0;
}
.hw-calc__phases legend {
margin-bottom: var(--space-4);
font-weight: var(--weight-bold);
}
.hw-range {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-2);
align-items: center;
font-size: var(--text-sm);
}
.hw-range input[type='range'] {
grid-column: 1 / -1;
width: 100%;
accent-color: var(--color-ac);
}
.hw-range output {
font-weight: var(--weight-bold);
}
.hw-range--select .control {
grid-column: 1 / -1;
}
.hw-calc__results {
display: grid;
gap: var(--space-4);
}
.hw-result {
display: grid;
gap: var(--space-2);
}
.hw-gain {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-secondary-text);
}
.hw-timeline {
display: grid;
gap: var(--space-6);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
counter-reset: hw;
}
@media (min-width: 64rem) {
.hw-timeline {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.hw-timeline li {
position: relative;
display: grid;
gap: var(--space-2);
align-content: start;
padding-top: var(--space-8);
border-top: 3px solid var(--color-ac);
counter-increment: hw;
}
.hw-timeline li::before {
content: counter(hw);
position: absolute;
top: -0.9rem;
left: 0;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var(--color-ac);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.hw-timeline h3 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}
.hw-timeline p {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.hw-prose {
width: min(100%, 44rem);
}
.hw-screen--cta {
position: relative;
min-height: 70svh;
background-color: var(--color-surface);
text-align: center;
}
.hw-cta__media {
width: min(100% - 2 * var(--gutter), 72rem);
margin: 0 auto var(--space-12);
}
.hw-cta__media {
display: grid;
justify-items: center;
}
.hw-cta__media img {
width: auto;
max-width: 100%;
height: auto;
max-height: 80svh;
border-radius: var(--radius-lg);
}
.hw-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-4);
}
.hw-rail {
display: none;
}
@media (min-width: 64rem) {
.hw-rail {
--rail-h: min(60vh, 26rem);
position: fixed;
top: 50%;
left: clamp(var(--space-4), 2.5vw, var(--space-10));
z-index: 10;
display: block;
height: var(--rail-h);
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition:
opacity var(--duration) ease,
visibility var(--duration);
}
.no-js .hw-rail,
.hw-rail.is-shown {
opacity: 1;
visibility: visible;
}
.hw-rail__track {
position: absolute;
top: 0;
bottom: 0;
left: 7px;
width: 3px;
border-radius: 3px;
background-color: var(--gray-200);
overflow: hidden;
}
.hw-rail__fill {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
var(--color-dc) 0 calc(var(--ac-at, 0.4) * 100%),
var(--color-ac) calc(var(--ac-at, 0.4) * 100%) 100%
);
clip-path: inset(0 0 calc((1 - var(--progress, 0)) * 100%) 0);
}
.hw-rail ol {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.hw-rail a {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-heading);
text-decoration: none;
}
.hw-rail__dot {
width: 17px;
height: 17px;
border: 3px solid var(--gray-300);
border-radius: 50%;
background-color: var(--color-bg);
transition:
border-color var(--duration) ease,
background-color var(--duration) ease;
}
.hw-rail a[aria-current] .hw-rail__dot,
.hw-rail a.is-passed .hw-rail__dot {
border-color: var(--color-ac);
background-color: var(--color-ac);
}
.hw-rail li:nth-child(-n + 2) a[aria-current] .hw-rail__dot,
.hw-rail li:nth-child(-n + 2) a.is-passed .hw-rail__dot {
border-color: var(--color-dc);
background-color: var(--color-dc);
}
.hw-rail__label {
opacity: 0;
transform: translateX(-4px);
transition:
opacity var(--duration) ease,
transform var(--duration) var(--ease-out);
white-space: nowrap;
}
.hw-rail a:hover .hw-rail__label,
.hw-rail a:focus-visible .hw-rail__label {
opacity: 1;
transform: none;
color: var(--color-text);
}
}
@media (prefers-reduced-motion: no-preference) {
.hw-flow {
stroke-opacity: 0.9;
animation: hw-flow 1.4s linear infinite;
}
.hw-ray {
animation: hw-ray 1.2s linear infinite;
}
.hw-sun-glow {
animation: hw-pulse 4s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.hw-spark {
animation: hw-spark 2.4s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.45s);
}
.hw-charge {
animation: hw-charge 3.2s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.4s);
}
.hw-consumer__ring {
animation: hw-consumer 4.8s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.6s);
}
.hw-scroll .icon {
animation: hw-bob 2s ease-in-out infinite;
}
}
@keyframes hw-flow {
to {
stroke-dashoffset: -40;
}
}
@keyframes hw-ray {
to {
stroke-dashoffset: -40;
}
}
@keyframes hw-pulse {
50% {
transform: scale(1.12);
opacity: 0.7;
}
}
@keyframes hw-spark {
0%,
100% {
opacity: 0;
}
40% {
opacity: 1;
}
}
@keyframes hw-charge {
0%,
100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
@keyframes hw-consumer {
0%,
100% {
stroke: var(--gray-200);
}
30%,
60% {
stroke: var(--color-ac);
}
}
@keyframes hw-bob {
50% {
transform: translateY(4px);
}
}
/* 90-utilities.css */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.text-center {
text-align: center;
}
.text-muted {
color: var(--color-text-muted);
}
.mt-0 {
margin-top: 0;
}