@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans-cyrillic-v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans-greek-ext-v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) 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: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) 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: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans-cyrillic-v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans-greek-ext-v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) 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: 'Noto Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://econewbies.com/wp-content/uploads/fonts/1eaee8bd53308395f6b7ff1531326dbb/noto-sans--v42-normal-400.woff2?c=1777144481) 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;
}.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;600;700&family=Montserrat:wght@400;600;700&family=Nunito+Sans:wght@400;600;700&family=PT+Serif:wght@400;700&family=Poppins:wght@400;500;600;700&family=Quicksand:wght@400;600;700&family=Roboto:wght@400;500;600;700&display=swap");
:root {
--final-color-surface: #FFFFFF;
--final-color-surface-soft: #F6F8FC;
--final-color-surface-soft-2: #f7f9fc;
--final-color-surface-ghost: #FBFDFF;
--final-color-surface-alt-2: #EEF2F8;
--final-color-page-bg: #F4F6FB;
--final-color-page-bg-2: #f3f6f9;
--final-color-ink: #0F172A;
--final-color-ui-ink: #334155;
--final-color-text-strong: #111827;
--final-color-text-muted: #475569;
--final-color-text-dim: #64748B;
--final-color-text-card: #434649;
--final-color-ui-muted: #64748B;
--final-color-ui-dim: #888c8f;
--final-color-primary: #092687;
--final-color-primary-dark: #1E40AF;
--final-color-primary-16: rgba(37, 99, 235, 0.16);
--final-color-primary-24: rgba(37, 99, 235, 0.24);
--final-color-primary-40: rgba(37, 99, 235, 0.40);
--final-color-brand-400: #60A5FA;
--final-color-tint-2: #DBEAFE;
--final-color-secondary: #c2d7ee;
--final-color-accent: #f95b17;
--final-color-accent-08: rgba(255, 200, 2, 0.08);
--final-color-accent-09: rgba(255, 200, 2, 0.09);
--final-color-accent-18: rgba(255, 200, 2, 0.18);
--final-color-accent-32: rgba(255, 200, 2, 0.32);
--final-color-accent-45: rgba(255, 200, 2, 0.45);
--final-color-accent-50: rgba(255, 200, 2, 0.50);
--final-color-accent-64: rgba(255, 200, 2, 0.64);
--final-color-white-86: rgba(255, 255, 255, 0.86);
--final-color-white-92: rgba(255, 255, 255, 0.92);
--final-color-white-15: rgba(255, 255, 255, 0.15);
--final-color-cloud-92: rgba(248, 250, 252, 0.92);
--final-color-cloud-100: rgba(248, 250, 252, 1);
--final-color-cloud-soft-90: rgba(241, 245, 249, 0.90);
--final-color-ink-24: rgba(15, 23, 42, 0.24);
--final-color-ink-deep-08: rgba(15, 23, 42, 0.08);
--final-color-ink-deep-18: rgba(15, 23, 42, 0.18);
--final-color-tint-2-46: rgba(219, 234, 254, 0.46);
--final-color-surface-accent-ghost: #FFF3E9;
--final-color-accent-40: rgba(194, 65, 12, 0.40);
--final-color-background-icon: #6d2443;
--final-color-header-top-background: #67193a;
--final-color-tint-1: #EFF6FF;
--final-color-border-muted: #E2E8F0;
--final-border-divider: 1px solid rgba(15, 23, 42, 0.08);
--final-border-toggle: 1.5px solid rgba(37, 99, 235, 0.36);
--final-border-divider-strong: 1.5px solid rgba(15, 23, 42, 0.12);
--final-border-control-muted: 1.5px solid rgba(51, 65, 85, 0.18);
--final-hero-content-background-color: rgba(255, 255, 255, 0.9);
--svg-hero-pill-bg: #2B5AD4;
--svg-blue-600: #2563EB;
--svg-orange-500: #C2410C;
--svg-sky-300: #7DD3FC;
--final-font-heading: 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-body: 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-ui: 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-system-ui: system-ui, 'Inter', 'Inter Variable', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-montserrat: 'Montserrat', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-poppins: 'Poppins', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-roboto: 'Roboto', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
--final-font-manrope: 'Manrope', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-nunito-sans: 'Nunito Sans', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-font-quicksand: 'Quicksand', 'Inter', 'Inter Variable', system-ui, -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--final-weight-regular: 400;
--final-weight-medium: 500;
--final-weight-semibold: 600;
--final-weight-bold: 700;
--final-font-size-18px: 18px;
--final-font-size-16px: 16px;
--final-font-size-15px: 15px;
--final-font-size-14px: 14px;
--final-font-size-13px: 13px;
--final-font-size-12px: 12px;
--final-font-size-11px: 11px;
--final-font-size-10px: 10px;
--final-font-size-clamp-38px-6vw-64px: clamp(38px, 6vw, 64px);
--final-font-size-clamp-16px-2-2vw-18px: clamp(16px, 2.2vw, 18px);
--final-font-size-clamp-12px-3-4vw-13px: clamp(12px, 3.4vw, 13px);
--final-font-size-clamp-28px-7-8vw-38px: clamp(28px, 7.8vw, 38px);
--final-font-size-clamp-26px-8-6vw-32px: clamp(26px, 8.6vw, 32px);
--final-font-size-36px: 36px;
--final-font-size-28px: 28px;
--final-font-size-26px: 26px;
--final-font-size-20px: 20px;
--final-font-size-clamp-48px-8vw-72px: clamp(48px, 8vw, 72px);
--final-font-size-42px: 42px;
--final-font-size-inherit: inherit;
--final-font-size-45px: 45px;
--final-font-size-48px: 48px;
--final-font-size-24px: 24px;
--final-letter-spacing--1px: -1px;
--final-tracking-tight: -0.02em;
--final-tracking-normal: 0;
--final-tracking-slight: 0.01em;
--final-tracking-caps: 0.12em;
--final-tracking-narrow-px: 0.2px;
--final-tracking-tight-px-06: -0.6px;
--final-tracking-tight-px-05: -0.5px;
--final-tracking-tight-px-04: -0.4px;
--final-tracking-tight-px-025: -0.25px;
--final-tracking-narrow-px-01: 0.1px;
--final-tracking-01em: 0.01em;
--final-tracking-08em: 0.08em;
--final-tracking-14em: 0.14em;
--final-tracking-inherit: inherit;
--final-leading-1: 1;
--final-leading-11: 1.1;
--final-leading-12: 1.2;
--final-leading-13: 1.3;
--final-leading-14: 1.4;
--final-leading-15: 1.5;
--final-leading-16: 1.6;
--final-leading-px-36-8: 36.8px;
--final-leading-px-63-8: 63.8px;
--final-leading-inherit: inherit;
--final-gradient-hero-accent: linear-gradient(180deg, rgba(194, 65, 12, 0.72) 0%, rgba(194, 65, 12, 0.28) 100%);
--final-gradient-services-remise-media: linear-gradient(135deg, var(--final-color-surface-alt-2) 0%, var(--final-color-tint-1) 100%);
--final-gradient-card-spot: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), rgba(96, 165, 250, 0.85));
--final-gradient-card-spot-light: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.75), var(--final-color-cloud-92));
--final-gradient-background-icon: linear-gradient(135deg, rgba(96, 165, 250, 0.24) 0%, rgba(30, 58, 138, 0.24) 100%);
--final-gradient-icon-soft: linear-gradient(135deg, rgba(96, 165, 250, 0.14) 0%, rgba(37, 99, 235, 0.10) 100%);
--final-overlay-deep-45: rgba(10, 15, 31, 0.48);
--final-radius-0: 0;
--final-radius-2: 2px;
--final-radius-5: 5px;
--final-radius-6: 6px;
--final-radius-7: 7px;
--final-radius-8: 8px;
--final-radius-10: 10px;
--final-radius-12: 12px;
--final-radius-13: 13px;
--final-radius-14: 14px;
--final-radius-15: 15px;
--final-radius-16: 16px;
--final-radius-18: 18px;
--final-radius-20: 20px;
--final-radius-22: 22px;
--final-radius-24: 24px;
--final-radius-28: 28px;
--final-radius-32: 32px;
--final-radius-40: 40px;
--final-radius-100: 100px;
--final-radius-circle: 50%;
--final-radius-full: 999px;
--final-radius-mix-0-0-0-100: 0px 0px 0px 100px;
--final-radius-mix-100-0-0-0: 100px 0px 0px 0px;
--final-radius-mix-84-0-0-0: 84px 0px 0px 0px;
--final-radius-mix-8-8-40-8: 8px 8px 40px 8px;
--final-radius-mix-8-8-8-84: 8px 8px 8px 84px;
--final-radius-mix-8-84-8-8: 8px 84px 8px 8px;
--final-radius-mix-0px-0px-15-97: 0px 0px 15px 97px;
--final-radius-mix-15px-15px-15-97: 15px 15px 15px 97px;
--final-radius-mix-0-0-32-120: 0 0 32px 120px;
--final-radius-mix-0-15-15-100: 0 15px 15px 100px;
--final-radius-mix-100-0-15-15: 100px 0 15px 15px;
--final-radius-mix-10-10-84-10: 10px 10px 84px 10px;
--final-radius-mix-40-40-84-40: 40px 40px 84px 40px;
--final-radius-mix-0-0-40-40: 0px 0px 40px 40px;
--final-radius-mix-0-0-0-80: 0px 0px 0px 80px;
--final-radius-mix-0-0-20-20: 0px 0px 20px 20px;
--final-radius-mix-12-12-12-84: 12px 12px 12px 84px;
--final-radius-mix-12-84-12-12: 12px 84px 12px 12px;
--final-radius-mix-12-12-38-12: 12px 12px 38px 12px;
--final-radius-mix-12-12-64-12: 12px 12px 64px 12px;
--final-radius-mix-13-13-84-12: 13px 13px 84px 12px;
--final-radius-mix-14-15-15-85: 14px 15px 15px 85px;
--final-radius-mix-85-15-15-14: 85px 15px 15px 14px;
--final-radius-mix-16-16-40-16: 16px 16px 40px 16px;
--final-radius-mix-88-16-16-16: 88px 16px 16px 16px;
--final-radius-mix-16-16-16-88: 16px 16px 16px 88px;
--final-radius-mix-88-20-20-20: 88px 20px 20px 20px;
--final-radius-mix-20-20-20-88: 20px 20px 20px 88px;
--final-shadow-card: 0 23px 31px rgba(15, 23, 42, 0.10);
--final-shadow-hover: 0 10px 24px rgba(15, 23, 42, 0.14);
--final-shadow-soft: 0 16px 32px rgba(15, 23, 42, 0.08);
--final-shadow-raise: 0 16px 32px rgba(37, 99, 235, 0.18);
--final-shadow-cta: 0 18px 40px rgba(194, 65, 12, 0.28);
--final-shadow-banner: 0 32px 54px rgba(10, 19, 35, 0.26);
--final-shadow-flyout: -18px 0 60px rgba(15, 23, 42, 0.18);
--final-shadow-inset: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
--final-shadow-none: none;
--final-shadow-primary-12-24: 0 12px 24px var(--final-color-primary-16);
--final-shadow-primary-18-36-16: 0 18px 36px var(--final-color-primary-16);
--final-shadow-primary-10-26-24: 0 10px 26px var(--final-color-primary-24);
--final-shadow-accent-12-24-32: 0 12px 24px var(--final-color-accent-32);
--final-shadow-accent-12-24-45: 0 12px 24px var(--final-color-accent-45);
--final-shadow-accent-18-32-45: 0 18px 32px var(--final-color-accent-45);
--final-shadow-accent-24-46-45: 0 24px 46px var(--final-color-accent-45);
--final-shadow-ink-16-32-24: 0 16px 32px var(--final-color-ink-24);
--final-shadow-inkd-20-50-08: 0 20px 50px var(--final-color-ink-deep-08);
--final-shadow-inkd-30-60-08: 0 30px 60px var(--final-color-ink-deep-08);
--final-shadow-inkd-36-64-18: 0 36px 64px var(--final-color-ink-deep-18);
--announce-banner-offset: 0px;
--header-max-width: 1200px;
--header-padding-x: 32px;
--header-padding-y: 14px;
--header-background: var(--final-color-background-icon);
--header-utility-background: var(--final-color-header-top-background);
--header-bottom-background: var(--final-color-surface);
--header-border-color: var(--final-border-divider);
--header-link-color: var(--final-color-surface);
--header-link-hover-color: var(--final-color-surface);
--header-link-background: transparent;
--header-link-hover-background: var(--final-color-primary-16);
--header-link-padding-y: 10px;
--header-link-padding-x: 16px;
--header-link-radius: var(--final-radius-20);
--header-font-weight: var(--final-weight-medium);
--header-category-gap: 20px;
--header-search-size: 44px;
--header-search-background: var(--final-color-surface-soft-2);
--header-search-hover-background: var(--final-color-primary-16);
--header-search-color: var(--final-color-ink);
--site-main-background: var(--final-color-page-bg);
--feature-grid-max-width: 1200px;
--feature-grid-padding-x: 32px;
--feature-grid-padding-y: 48px;
--feature-grid-gap: 28px;
--feature-card-radius: var(--final-radius-24);
--feature-card-shadow: var(--final-shadow-soft);
--feature-card-background: var(--final-color-surface);
--feature-card-border: var(--final-border-divider);
--feature-card-title-size-wide: var(--final-font-size-28px);
--feature-card-title-size-narrow: var(--final-font-size-20px);
--feature-card-title-color: var(--final-color-text-strong);
--feature-card-meta-color: var(--final-color-text-muted);
--feature-card-category-gap: 12px;
--feature-card-media-placeholder: linear-gradient(135deg, var(--final-color-surface-alt-2) 0%, var(--final-color-tint-1) 100%);
--feature-card-content-padding: 32px;
--article-stream-gap: 20px;
--article-stream-title-size: var(--final-font-size-26px);
--article-stream-sidebar-background: var(--feature-card-background);
--article-stream-sidebar-border: var(--feature-card-border);
--article-stream-sidebar-radius: var(--feature-card-radius);
--article-stream-sidebar-heading-size: var(--final-font-size-18px);
--article-stream-sidebar-link-color: var(--feature-card-meta-color);
--article-stream-sidebar-link-hover: var(--final-color-primary);
--article-detail-layout-max-width: 1200px;
--article-detail-content-gap: 32px;
--article-detail-padding: 48px;
--article-detail-hero-height: 420px;
--article-detail-title-size: clamp(34px, 5vw, 52px);
--article-detail-meta-color: var(--final-color-text-muted);
--article-detail-body-font: 'PT Serif', Georgia, 'Times New Roman', serif;
--article-detail-body-size: var(--final-font-size-18px);
--article-detail-body-line-height: 1.68;
--article-detail-body-color: var(--final-color-text-card);
--article-detail-section-gap: 24px;
--article-detail-figure-radius: var(--feature-card-radius);
--footer-background: var(--header-background);
--footer-bottom-background: var(--header-background);
--footer-border-color: var(--header-border-color);
--footer-text-color: var(--header-link-color);
--footer-heading-color: var(--header-link-color);
--footer-link-color: var(--header-link-color);
--footer-max-width: 1200px;
--footer-padding-y: 48px;
--footer-column-gap: 48px;
--footer-row-gap: 32px;
--footer-logo-max-width: 180px;
--footer-quick-link-gap: 12px;
--footer-quick-link-padding-y: 10px;
--footer-quick-link-padding-x: 16px;
--footer-bottom-text-color: var(--header-link-color);
}
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#cgv-page,
#accessibility-page,
#confidentiality-page,
#legal-page,
#contact-page,
#about-page,
#home-page,
#article-page,
#category-page,
#author-page
{
margin: 0px;
font-family: var(--final-font-heading);
display: flex;
flex-direction: column;
align-items: center;
}
a:-webkit-any-link {
text-decoration: none;
}
.site-header {
width: 100%;
background: var(--header-background);
border-bottom: var(--header-border-color);
position: relative;
display: flex;
justify-content: center;
color: var(--header-link-color);
}
.site-header__shell {
max-width: var(--header-max-width);
width: 100%;
padding: 0 var(--header-padding-x);
display: flex;
flex-direction: column;
gap: 12px;
}
.site-header__utility {
display: none;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0px;
position: relative;
z-index: 0;
}
.site-header__utility::before {
content: "";
position: absolute;
inset: 0;
background: var(--header-utility-background);
z-index: -1;
pointer-events: none;
box-shadow: 0 0 0 100vmax var(--header-utility-background);
clip-path: inset(0 -100vmax);
}
.site-header__socials {
display: flex;
align-items: center;
flex: 0 0 auto;
color: var(--header-link-color);
}
.site-header__social {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--header-link-radius);
transition: background-color 0.2s ease, color 0.2s ease;
color: var(--header-link-color);
text-decoration: none;
}
.site-header__social svg {
display: block;
}
.site-header__social:hover,
.site-header__social:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-header__top-links {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
flex-wrap: wrap;
}
.fill-white_sd {
fill: currentColor;
}
.site-header__quick-link {
appearance: none;
border: 0;
background: var(--header-link-background);
color: var(--header-link-color);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
font-weight: var(--header-font-weight);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
padding: var(--header-link-padding-y) var(--header-link-padding-x);
border-radius: var(--header-link-radius);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
}
.site-header__quick-link:hover,
.site-header__quick-link:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-header__quick-link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.site-header__quick-link svg {
width: 20px;
height: 20px;
display: block;
}
.site-header__quick-link-label {
line-height: 1;
}
.site-header__bar-background {
grid-area: categories;
grid-column: 1 / -1;
align-self: stretch;
position: relative;
z-index: -1;
pointer-events: none;
min-height: 100%;
}
.site-header__bar-background::before {
content: "";
position: absolute;
inset: 0;
background: var(--header-utility-background);
box-shadow: 0 0 0 100vmax var(--header-utility-background);
clip-path: inset(0 -100vmax);
pointer-events: none;
}
.site-header__bar {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto auto;
grid-template-areas:
"menu brand actions"
"categories categories categories";
align-items: center;
column-gap: 16px;
row-gap: 12px;
padding: var(--header-padding-y) 0;
padding-bottom: 0px;
position: relative;
z-index: 0;
}
.site-header__menu-toggle {
grid-area: menu;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--final-radius-full);
border: 0;
background: transparent;
color: var(--header-link-color);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
padding: 0;
}
.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-header__menu-toggle svg {
width: 22px;
height: 22px;
}
.site-header__brand {
grid-area: brand;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
justify-self: center;
}
.site-header__brand-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
}
.site-header__brand svg {
max-width: 100%;
height: auto;
}
.site-header__actions {
grid-area: actions;
display: inline-flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
align-self: center;
}
.site-header__search {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--header-search-size);
height: var(--header-search-size);
border-radius: var(--final-radius-full);
border: 0;
background: transparent;
color: var(--header-link-color);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
padding: 0;
}
.site-header__search:hover,
.site-header__search:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-header__search svg {
width: 20px;
height: 20px;
}
.site-header__categories-bar {
grid-area: categories;
display: flex;
align-items: center;
gap: 12px;
border-top: var(--header-border-color);
height: 44px;
}
.site-header__categories-scroller {
display: block;
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.site-header__categories-scroller::-webkit-scrollbar {
display: none;
}
.site-header__categories {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
text-transform: lowercase;
color: var(--header-link-color);
padding-right: 16px;
white-space: nowrap;
}
.site-header__category {
color: inherit;
text-decoration: none;
font-weight: var(--final-weight-medium);
transition: color 0.2s ease;
}
.site-header__category:hover,
.site-header__category:focus {
color: var(--header-link-hover-color);
outline: none;
}
.site-header__overlay {
position: fixed;
left: 0;
right: 0;
top: var(--site-header-offset, 0px);
bottom: 0;
background: var(--header-background);
color: var(--header-link-color);
z-index: 998;
opacity: 0;
visibility: hidden;
overflow: auto;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.site-header__overlay-inner {
max-width: var(--header-max-width);
margin: 0 auto;
padding: 32px var(--header-padding-x) 48px;
min-height: 100%;
display: flex;
flex-direction: column;
gap: 32px;
overflow-y: auto;
}
.site-header__overlay-title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--final-font-size-20px);
font-weight: var(--final-weight-semibold);
color: var(--final-color-ink);
}
.site-header__overlay-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.site-header__overlay-heading {
margin: 0;
font-size: var(--final-font-size-14px);
font-family: var(--final-font-ui);
letter-spacing: var(--final-tracking-08em);
text-transform: uppercase;
color: var(--final-color-text-muted);
}
.site-header__overlay .site-header__categories {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 0;
white-space: normal;
width: 100%;
}
.site-header__overlay .site-header__top-links {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 16px;
width: 100%;
}
.site-header__overlay .site-header__quick-link {
width: 100%;
justify-content: flex-start;
}
.site-header__overlay .site-header__socials {
justify-content: flex-start;
}
body.is-menu-open {
overflow: hidden;
}
body.is-menu-open .site-header__overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (min-width: 480px) {
.site-header__menu-toggle {
width: 44px;
height: 44px;
}
.site-header__categories {
gap: 20px;
}
}
@media (min-width: 768px) {
.site-header__shell {
gap: 20px;
}
.site-header__utility {
display: flex;
}
.site-header__menu-toggle {
display: none;
}
.site-header__bar {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand brand"
"categories actions";
column-gap: 24px;
row-gap: 8px;
padding-top: 16px;
align-items: end;
}
.site-header__brand {
padding: 20px 0;
justify-self: center;
}
.site-header__actions {
align-self: end;
}
.site-header__categories-bar {
border-top: none;
}
}
@media (min-width: 1024px) {
.site-header__bar {
column-gap: 32px;
}
.site-header__brand {
padding: 24px 0;
}
.site-header__actions {
justify-content: flex-end;
}
.site-header__categories-scroller {
overflow: visible;
}
.site-header__categories {
display: flex;
flex-wrap: wrap;
gap: var(--header-category-gap);
white-space: normal;
padding-right: 0;
}
body.is-menu-open {
overflow: auto;
}
.site-header__overlay {
display: none !important;
}
}
@media (min-width: 1280px) {
.site-header__shell {
gap: 24px;
}
.site-header__categories {
gap: 24px;
}
}
@media (min-width: 1440px) {
.site-header__shell {
padding: 0 48px;
}
}
.site-main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--feature-grid-padding-y);
background: var(--site-main-background);
padding: var(--feature-grid-padding-y) 0;
}
.feature-grid {
width: 100%;
max-width: var(--feature-grid-max-width);
padding: 0 20px;
display: flex;
flex-direction: column;
gap: var(--feature-grid-gap);
}
.feature-grid__row {
display: grid;
gap: 20px;
align-items: stretch;
}
.feature-grid__row--primary,
.feature-grid__row--secondary,
.feature-grid__row--tertiary {
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.feature-grid {
padding: 0 24px;
}
.feature-grid__row {
gap: 24px;
}
.feature-grid__row--primary,
.feature-grid__row--secondary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-grid__row--tertiary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 960px) {
.feature-grid {
padding: 0 var(--feature-grid-padding-x);
}
.feature-grid__row {
gap: var(--feature-grid-gap);
}
.feature-grid__row--primary {
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}
.feature-grid__row--secondary {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
}
.feature-grid__row--tertiary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.feature-grid__row--primary {
grid-template-columns: 3fr 1fr;
}
.feature-grid__row--secondary {
grid-template-columns: 1fr 3fr;
}
}
.site-search {
display: none;
width: 100%;
background: var(--final-color-surface);
border-bottom: var(--header-border-color);
box-shadow: var(--final-shadow-soft);
position: relative;
z-index: 10;
}
.is-search-open .site-search {
display: block;
}
.site-search__inner {
max-width: var(--header-max-width);
margin: 0 auto;
padding: 18px var(--feature-grid-padding-x);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.site-search__form {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.site-search__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
border: 0;
}
.site-search__input {
flex: 1 1 auto;
min-width: 0;
height: 48px;
padding: 0 18px;
border-radius: var(--header-link-radius);
border: var(--final-border-control-muted);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-16px);
color: var(--final-color-ink);
background: var(--site-main-background);
}
.site-search__input:focus {
outline: var(--final-border-toggle);
outline-offset: 2px;
}
.site-search__submit {
height: 48px;
padding: 0 20px;
border: 0;
border-radius: var(--header-link-radius);
background: var(--final-color-primary);
color: var(--header-link-hover-color);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
font-weight: var(--final-weight-semibold);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
cursor: pointer;
transition: filter 0.2s ease;
width: 100%;
}
.site-search__submit:hover,
.site-search__submit:focus {
filter: brightness(1.05);
outline: none;
}
@media (min-width: 480px) {
.site-search__inner {
padding: 20px var(--feature-grid-padding-x);
}
.site-search__form {
gap: 16px;
}
}
@media (min-width: 768px) {
.site-search__inner {
flex-direction: row;
align-items: center;
gap: 24px;
}
.site-search__form {
flex-direction: row;
align-items: center;
gap: 12px;
}
.site-search__submit {
width: auto;
padding: 0 24px;
}
}
@media (min-width: 1024px) {
.site-search__inner {
padding: 24px var(--feature-grid-padding-x);
}
.site-search__input {
height: 52px;
}
.site-search__submit {
height: 52px;
}
}
.feature-card-link {
display: block;
color: inherit;
text-decoration: none;
height: 100%;
}
.feature-card {
display: flex;
flex-direction: column;
height: 100%;
}
.feature-card-link:focus {
outline: none;
}
.feature-card-link .feature-card {
height: 100%;
}
.feature-card {
background: var(--feature-card-background);
border: var(--feature-card-border);
border-radius: var(--feature-card-radius);
box-shadow: var(--feature-card-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--final-color-ink);
}
.feature-card__media {
width: 100%;
background: var(--feature-card-media-placeholder);
background-size: cover;
background-position: center;
}
.feature-card--wide {
flex-direction: row;
}
.feature-card--wide .feature-card__media {
flex: 1 1 50%;
min-height: 280px;
}
.feature-card--wide .feature-card__content {
flex: 1 1 50%;
padding: var(--feature-card-content-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.feature-card__title {
font-family: var(--final-font-heading);
margin: 0;
color: var(--feature-card-title-color);
}
.feature-card--wide .feature-card__title {
font-size: var(--feature-card-title-size-wide);
line-height: var(--final-leading-13);
}
.feature-card__categories {
display: flex;
gap: var(--feature-card-category-gap);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
text-transform: uppercase;
letter-spacing: var(--final-tracking-08em);
color: var(--feature-card-meta-color);
}
.feature-card__category {
display: inline-flex;
align-items: center;
gap: 6px;
}
.feature-card--narrow {
display: flex;
flex-direction: column;
}
.feature-card--narrow .feature-card__media {
aspect-ratio: 4 / 3;
}
.feature-card--narrow .feature-card__content {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
flex: 1 1 auto;
}
.feature-card--narrow .feature-card__title {
font-size: var(--feature-card-title-size-narrow);
line-height: var(--final-leading-14);
}
.feature-card--narrow .feature-card__categories {
margin-top: auto;
}
.article-stream {
width: 100%;
display: flex;
justify-content: center;
background: var(--site-main-background);
}
.article-stream__layout {
width: 100%;
max-width: var(--feature-grid-max-width);
padding: 0 20px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.article-stream__main {
display: flex;
flex-direction: column;
gap: var(--article-stream-gap);
}
.article-stream__sidebar-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.article-stream__header {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-stream__title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--article-stream-title-size);
line-height: var(--final-leading-13);
color: var(--feature-card-title-color);
}
.article-stream__description {
margin: 0;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
color: var(--final-color-text-muted);
}
.article-stream__list {
display: grid;
grid-template-columns: 1fr;
gap: var(--article-stream-gap);
}
.article-stream__footer {
display: flex;
justify-content: center;
padding-top: 8px;
}
.article-stream__load-more {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
font-weight: var(--final-weight-semibold);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
color: var(--header-link-hover-color);
background: var(--header-link-hover-background);
border-radius: var(--header-link-radius);
text-decoration: none;
transition: filter 0.2s ease;
}
.article-stream__load-more:hover,
.article-stream__load-more:focus {
filter: brightness(1.05);
outline: none;
}
.feature-card--stream {
display: flex;
flex-direction: column;
align-items: stretch;
}
.feature-card--stream .feature-card__media {
width: 100%;
max-width: none;
min-width: 100%;
min-height: 200px;
}
.feature-card--stream .feature-card__content {
flex: 1 1 auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.feature-card--stream .feature-card__title {
font-size: var(--final-font-size-24px);
line-height: var(--final-leading-13);
}
.feature-card--stream .feature-card__categories {
font-size: var(--final-font-size-12px);
letter-spacing: var(--final-tracking-01em);
}
.article-stream__sidebar {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background: var(--article-stream-sidebar-background);
border: var(--article-stream-sidebar-border);
border-radius: var(--article-stream-sidebar-radius);
box-shadow: var(--feature-card-shadow);
}
@media (min-width: 600px) {
.article-stream__layout {
padding: 0 24px;
}
}
@media (min-width: 768px) {
.feature-card--stream {
flex-direction: row;
}
.feature-card--stream .feature-card__media {
flex: 0 0 28%;
max-width: 28%;
min-width: 200px;
min-height: 180px;
}
.feature-card--stream .feature-card__content {
flex: 1 1 72%;
padding: 24px;
}
}
@media (min-width: 960px) {
.article-stream__layout {
padding: 0 var(--feature-grid-padding-x);
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: var(--feature-grid-gap);
}
.article-stream__sidebar {
padding: 28px;
}
}
@media (min-width: 1024px) {
.article-stream__layout {
grid-template-columns: 3fr 1fr;
}
}
.article-stream__sidebar-title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--article-stream-sidebar-heading-size);
text-transform: uppercase;
letter-spacing: var(--final-tracking-08em);
color: var(--feature-card-title-color);
}
.article-stream__sidebar-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.article-stream__sidebar-link {
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
color: var(--article-stream-sidebar-link-color);
text-decoration: none;
transition: color 0.2s ease;
}
.article-stream__sidebar-link:hover,
.article-stream__sidebar-link:focus {
color: var(--article-stream-sidebar-link-hover);
outline: none;
}
.article-stream__sidebar-cta {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
font-weight: var(--final-weight-semibold);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
color: var(--header-link-hover-color);
background: var(--header-link-hover-background);
border-radius: var(--header-link-radius);
text-decoration: none;
transition: filter 0.2s ease;
}
.article-stream__sidebar-cta:hover,
.article-stream__sidebar-cta:focus {
filter: brightness(1.05);
outline: none;
}
.article-stream__related {
padding: 24px;
background: var(--article-stream-sidebar-background);
border: var(--article-stream-sidebar-border);
border-radius: var(--article-stream-sidebar-radius);
box-shadow: var(--feature-card-shadow);
}
.article-stream__related-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.article-stream__related-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.article-stream__related-link {
font-family: var(--final-font-heading);
font-size: var(--final-font-size-20px);
font-weight: var(--final-weight-semibold);
color: var(--feature-card-title-color);
line-height: var(--final-leading-14);
text-decoration: none;
transition: color 0.2s ease;
}
.article-stream__related-link:hover,
.article-stream__related-link:focus {
color: var(--article-stream-sidebar-link-hover);
outline: none;
}
.article-stream__related-action {
font-family: var(--final-font-ui);
font-size: var(--final-font-size-13px);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
color: var(--article-stream-sidebar-link-color);
}
.article-detail {
width: 100%;
display: flex;
justify-content: center;
background: var(--site-main-background);
}
.article-detail__layout {
width: 100%;
max-width: var(--article-detail-layout-max-width);
padding: 0 20px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
}
.article-detail__wrapper {
display: flex;
flex-direction: column;
gap: var(--article-detail-content-gap); }
.article-detail__header {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-detail__categories {
display: flex;
gap: var(--feature-card-category-gap);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
letter-spacing: var(--final-tracking-08em);
text-transform: uppercase;
color: var(--article-detail-meta-color);
}
.article-detail__category {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.article-detail__category:hover,
.article-detail__category:focus {
color: var(--article-stream-sidebar-link-hover);
outline: none;
}
.article-detail__title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--article-detail-title-size);
line-height: var(--final-leading-13);
color: var(--feature-card-title-color);
}
.article-detail__meta {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-13px);
color: var(--article-detail-meta-color);
}
.article-detail__meta span,
.article-detail__meta time {
display: inline-flex;
align-items: center;
gap: 6px;
}
.article-detail__author {
color: inherit;
text-decoration: none;
font-weight: var(--final-weight-semibold);
transition: color 0.2s ease;
}
.article-detail__author:hover,
.article-detail__author:focus {
color: var(--article-stream-sidebar-link-hover);
outline: none;
}
.article-detail__hero {
width: 100%;
margin: 0;
border-radius: var(--feature-card-radius);
overflow: hidden;
background: var(--feature-card-media-placeholder);
}
.article-detail__hero img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.article-detail__body {
display: flex;
flex-direction: column;
gap: var(--article-detail-section-gap);
font-family: var(--article-detail-body-font);
font-size: var(--final-font-size-16px);
line-height: var(--final-leading-16);
color: var(--article-detail-body-color);
hyphens: auto;
}
.article-detail__body p {
margin: 0;
}
.article-detail__body p + p {
margin-top: 12px;
}
.article-detail__body ul,
.article-detail__body ol {
margin: 0;
padding-left: 20px;
display: grid;
gap: 12px;
}
.article-detail__body blockquote {
margin: 0;
padding: 24px 32px;
font-family: var(--final-font-heading);
font-size: var(--final-font-size-20px);
line-height: var(--final-leading-15);
color: var(--feature-card-title-color);
background: var(--final-color-surface-soft);
border-left: 4px solid var(--final-color-primary);
border-radius: var(--final-radius-12);
}
.article-detail__body figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.article-detail__body figure img {
width: 100%;
border-radius: var(--article-detail-figure-radius);
object-fit: cover;
display: block;
}
.article-detail__body figcaption {
font-size: var(--final-font-size-13px);
color: var(--article-detail-meta-color);
}
@media (min-width: 600px) {
.article-detail__layout {
padding: 0 24px;
}
.article-detail__hero img {
height: 320px;
}
}
@media (min-width: 768px) {
.article-detail__wrapper {
padding: 40px 32px;
background: var(--feature-card-background);
border: var(--feature-card-border);
border-radius: var(--feature-card-radius);
box-shadow: var(--feature-card-shadow);
}
.article-detail__hero img {
height: 360px;
}
}
@media (min-width: 960px) {
.article-detail__layout {
padding: 0 var(--feature-grid-padding-x);
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: var(--feature-grid-gap);
}
.article-detail__wrapper {
padding: var(--article-detail-padding);
}
.article-detail__hero img {
height: var(--article-detail-hero-height);
}
.article-detail__more-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-detail__body {
font-size: var(--article-detail-body-size);
line-height: var(--article-detail-body-line-height);
}
}
@media (min-width: 1024px) {
.article-detail__layout {
grid-template-columns: 3fr 1fr;
}
}
.article-detail__more {
display: flex;
flex-direction: column;
gap: var(--article-detail-section-gap);
margin-top: var(--article-detail-content-gap);
padding-top: 16px;
border-top: var(--final-border-divider);
}
.article-detail__more-header {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-detail__more-title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--article-stream-title-size);
line-height: var(--final-leading-13);
color: var(--feature-card-title-color);
}
.article-detail__more-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--article-stream-gap);
}
.article-detail__footer {
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--final-font-ui);
}
.article-detail__tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.article-detail__tag {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: var(--header-link-radius);
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
font-size: var(--final-font-size-12px);
letter-spacing: var(--final-tracking-08em);
text-transform: uppercase;
}
.article-detail__share {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: var(--final-font-size-14px);
color: var(--article-detail-meta-color);
}
.article-detail__share a {
color: var(--article-stream-sidebar-link-hover);
text-decoration: none;
font-weight: var(--final-weight-semibold);
}
.article-detail__share a:hover,
.article-detail__share a:focus {
text-decoration: underline;
outline: none;
}
.about-section {
width: 100%;
display: flex;
justify-content: center;
background: var(--site-main-background);
padding: 48px 0;
}
.about-section__layout {
width: 100%;
max-width: var(--feature-grid-max-width);
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.about-section__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 760px;
text-align: center;
}
.about-section__eyebrow {
margin: 0;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-13px);
letter-spacing: var(--final-tracking-08em);
text-transform: uppercase;
color: var(--final-color-text-muted);
}
.about-section__title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--final-font-size-28px);
line-height: var(--final-leading-12);
color: var(--feature-card-title-color);
}
.about-section__lead {
margin: 0;
max-width: 820px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-16px);
line-height: var(--final-leading-16);
color: var(--final-color-text-card);
text-align: left;
}
.about-section__body {
width: 100%;
max-width: 840px;
display: flex;
flex-direction: column;
gap: 24px;
align-items: stretch;
}
.about-section__subheading {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--final-font-size-20px);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
color: var(--feature-card-title-color);
text-align: left;
}
.about-section__paragraph {
margin: 0;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-15px);
line-height: var(--final-leading-16);
color: var(--final-color-text-card);
text-align: left;
}
.about-section__paragraph--highlight {
padding: 18px 20px;
border-radius: var(--final-radius-16);
background: var(--final-color-surface-soft);
border: 1px solid rgba(15, 23, 42, 0.06);
font-weight: var(--final-weight-semibold);
}
.about-section__paragraph--note {
font-size: var(--final-font-size-13px);
color: var(--final-color-text-muted);
}
.about-section__paragraph a,
.about-section__lead a {
color: var(--article-stream-sidebar-link-hover);
font-weight: var(--final-weight-semibold);
text-decoration: none;
}
.about-section__paragraph a:hover,
.about-section__paragraph a:focus,
.about-section__lead a:hover,
.about-section__lead a:focus {
text-decoration: underline;
outline: none;
}
@media (min-width: 600px) {
.about-section {
padding: 56px 0;
}
.about-section__layout {
padding: 0 24px;
gap: 28px;
}
.about-section__body {
gap: 28px;
}
}
@media (min-width: 768px) {
.about-section__layout {
gap: 32px;
}
.about-section__title {
font-size: var(--final-font-size-36px);
}
.about-section__body {
gap: 32px;
}
}
@media (min-width: 960px) {
.about-section {
padding: 72px 0;
}
.about-section__layout {
padding: 0 var(--feature-grid-padding-x);
}
}
@media (max-width: 1024px) {
.feature-card--wide {
flex-direction: column;
}
.feature-card--wide .feature-card__media {
min-height: 220px;
}
}
@media (max-width: 768px) {
.site-main {
padding: 32px 0;
}
.feature-card--wide .feature-card__content {
padding: 24px;
}
.feature-card--narrow .feature-card__content {
padding: 20px;
}
.feature-card__categories {
font-size: var(--final-font-size-12px);
}
}
.site-footer {
width: 100%;
background: var(--footer-background);
border-top: var(--footer-border-color);
color: var(--footer-text-color);
}
.site-footer__inner {
max-width: var(--footer-max-width);
margin: 0 auto;
padding: 40px var(--feature-grid-padding-x);
display: flex;
flex-direction: column;
gap: var(--footer-row-gap);
}
.site-footer__top {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
.site-footer__column {
display: flex;
flex-direction: column;
gap: 16px;
}
.site-footer__column--brand {
gap: 20px;
}
.site-footer__logo {
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-footer__logo svg {
max-width: var(--footer-logo-max-width);
height: auto;
}
.site-footer__socials {
display: flex;
align-items: center;
justify-content: center;
color: var(--footer-link-color);
}
.site-footer__social {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--header-link-radius);
transition: background-color 0.2s ease, color 0.2s ease;
color: var(--footer-link-color);
text-decoration: none;
}
.site-footer__social svg {
display: block;
}
.site-footer__social:hover,
.site-footer__social:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-footer__title {
margin: 0;
font-family: var(--final-font-heading);
font-size: var(--final-font-size-16px);
color: var(--footer-heading-color);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
text-transform: lowercase;
}
.site-footer__categories {
display: block;
width: 100%;
}
.site-footer__list a {
color: var(--footer-link-color);
text-decoration: none;
transition: color 0.2s ease;
}
.site-footer__list a:hover,
.site-footer__list a:focus {
color: var(--header-link-hover-color);
outline: none;
}
.site-footer__quick-links {
display: flex;
flex-direction: column;
gap: var(--footer-quick-link-gap);
align-items: flex-start;
}
.site-footer__quick-link {
appearance: none;
border: 0;
border-radius: var(--header-link-radius);
padding: var(--footer-quick-link-padding-y) var(--footer-quick-link-padding-x);
font-family: var(--final-font-ui);
font-size: var(--final-font-size-14px);
font-weight: var(--header-font-weight);
letter-spacing: var(--final-tracking-01em);
text-transform: uppercase;
background: var(--header-link-background);
color: var(--footer-link-color);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
text-align: left;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.site-footer__quick-link:hover,
.site-footer__quick-link:focus {
background: var(--header-link-hover-background);
color: var(--header-link-hover-color);
outline: none;
}
.site-footer__bottom {
background: var(--footer-bottom-background);
padding: 24px;
border-radius: var(--final-radius-24);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__legal {
margin: 0;
text-align: center;
font-family: var(--final-font-ui);
font-size: var(--final-font-size-13px);
color: var(--footer-bottom-text-color);
}
@media (min-width: 600px) {
.site-footer__inner {
padding: 48px var(--feature-grid-padding-x);
gap: 36px;
}
.site-footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.site-footer__column--brand {
grid-column: 1 / -1;
align-items: center;
text-align: center;
}
.site-footer__logo svg {
margin: 0 auto;
}
.site-footer__quick-links {
align-items: center;
}
.site-footer__quick-link {
text-align: center;
}
}
@media (min-width: 960px) {
.site-footer__inner {
padding: var(--footer-padding-y) var(--feature-grid-padding-x);
gap: var(--footer-row-gap);
}
.site-footer__top {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--footer-column-gap);
}
.site-footer__column--brand {
align-items: flex-start;
text-align: left;
}
.site-footer__quick-links {
align-items: flex-start;
}
.site-footer__quick-link {
text-align: left;
}
}