/* site palette */
html:root {
--bg: #F6F8FA;
--surface: #FFFFFF;
--surface-alt: #F4EBE5;
--text: #141F27;
--text-muted: #5A6872;
--border: #D8DFE4;
--primary: #BE550E;
--primary-hover: #9D460C;
--on-primary: #FFFFFF;
--primary-text: #AB4D0C;
--accent: #203556;
--on-accent: #FFFFFF;
--accent-text: #203556;
--dark-band: #11222E;
--on-dark: #FFFFFF;
--on-dark-muted: #B6BEC3;
--brand-btn-bg: #FFFFFF;
--brand-btn-text: #11222E;
--section-alt-bg: #F4EBE5;
--dark-band-bg: #11222E;
--brand-band-bg: #BE550E;
--hero-bg: #11222E;
}
html:root {
--bs-primary: #BE550E;
--bs-primary-rgb: 190, 85, 14;
--bs-link-color: #AB4D0C;
--bs-link-color-rgb: 171, 77, 12;
--bs-link-hover-color: #9D460C;
--mdb-primary: #BE550E;
--mdb-primary-rgb: 190, 85, 14;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover);
--bs-btn-hover-border-color: var(--primary-hover);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-active-bg: var(--primary-hover);
--bs-btn-active-border-color: var(--primary-hover);
--bs-btn-active-color: var(--on-primary);
background-color: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--primary-text);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--on-primary);
color: var(--primary-text);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: var(--on-primary);
}
.text-primary,
.link-primary {
color: var(--primary-text) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary {
color: var(--on-primary) !important;
}
/* /site palette */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Sunflower', sans-serif;
font-weight: 300;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
a:hover {
color: var(--primary-text);
}
.text-muted {
color: var(--text-muted) !important;
}
.ju-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid var(--primary);
border-radius: 2px;
padding: 0.65rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
text-decoration: none;
line-height: 1.2;
}
.ju-btn:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.ju-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background-color: transparent;
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.65rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
text-decoration: none;
line-height: 1.2;
}
.ju-btn-alt:hover {
background-color: var(--surface);
border-color: var(--text);
color: var(--text);
}
.ju-card {
background-color: var(--surface);
color: var(--text);
border: none;
border-radius: 0px;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.ju-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.12);
}
.ju-media {
aspect-ratio: 16 / 9;
flex-grow: 0;
flex-shrink: 0;
border-radius: 0px;
overflow: hidden;
background-color: var(--dark-band);
position: relative;
}
.ju-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.ju-card:hover .ju-media img {
transform: scale(1.02);
}
.ju-eyebrow {
display: inline-flex;
flex-direction: column;
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-text);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.5rem;
position: relative;
}
.ju-eyebrow::after {
content: '';
display: block;
width: 24px;
height: 1px;
background-color: var(--primary);
margin-top: 0.35rem;
}
.ju-title {
font-size: 2rem;
font-weight: 700;
color: var(--text);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0;
display: flex;
align-items: center;
gap: 1.5rem;
width: 100%;
}
.ju-title::after {
content: '';
flex-grow: 1;
height: 1px;
background-color: var(--border);
}
.ju-badge {
display: inline-block;
padding: 0.25rem 0.65rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
background-color: var(--surface-alt);
color: var(--primary-text);
border-radius: 2px;
line-height: 1.4;
}
.ju-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 2px;
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 1.25rem;
}
.ju-section {
background-color: var(--bg);
padding: 4rem 0;
}
.ju-section-alt {
background-color: var(--section-alt-bg, var(--surface-alt));
padding: 4rem 0;
}
.ju-section-dark {
background-color: var(--dark-band-bg, var(--dark-band));
color: var(--on-dark);
padding: 4rem 0;
}
.ju-section-brand {
background-color: var(--brand-band-bg, var(--primary));
color: var(--on-primary);
padding: 4rem 0;
}
.ju-section-brand .ju-btn {
background-color: var(--brand-btn-bg);
color: var(--brand-btn-text);
border-color: var(--brand-btn-bg);
}
.ju-section-brand .ju-btn:hover {
background-color: var(--surface-alt);
color: var(--brand-btn-text);
border-color: var(--surface-alt);
}
.ju-section-brand .ju-btn-alt {
border-color: var(--on-primary);
color: var(--on-primary);
}
.ju-section-brand .ju-btn-alt:hover {
background-color: var(--on-primary);
color: var(--primary);
}
.ju-section-dark,
.ju-on-dark {
color: var(--on-dark);
}
.ju-section-dark h1,
.ju-section-dark h2,
.ju-section-dark h3,
.ju-section-dark h4,
.ju-section-dark h5,
.ju-section-dark h6,
.ju-on-dark h1,
.ju-on-dark h2,
.ju-on-dark h3,
.ju-on-dark h4,
.ju-on-dark h5,
.ju-on-dark h6 {
color: var(--on-dark);
}
.ju-section-dark a,
.ju-on-dark a {
color: var(--on-dark);
}
.ju-section-dark a:hover,
.ju-on-dark a:hover {
color: var(--surface-alt);
}
.ju-section-dark .text-muted,
.ju-on-dark .text-muted {
color: var(--on-dark-muted) !important;
}
.ju-section-dark .ju-title,
.ju-on-dark .ju-title {
color: var(--on-dark);
}
.ju-section-dark .ju-title::after,
.ju-on-dark .ju-title::after {
background-color: rgba(255, 255, 255, 0.15);
}
.ju-section-dark .ju-eyebrow,
.ju-on-dark .ju-eyebrow {
color: var(--on-dark-muted);
}
.ju-section-dark .ju-eyebrow::after,
.ju-on-dark .ju-eyebrow::after {
background-color: var(--on-dark-muted);
}
.ju-section-dark .ju-btn-alt,
.ju-on-dark .ju-btn-alt {
border-color: var(--on-dark);
color: var(--on-dark);
}
.ju-section-dark .ju-btn-alt:hover,
.ju-on-dark .ju-btn-alt:hover {
background-color: var(--on-dark);
color: var(--dark-band);
}
.ju-section-dark .ju-card,
.ju-on-dark .ju-card {
background-color: var(--surface);
color: var(--text);
}
.ju-section-dark .ju-card h1,
.ju-section-dark .ju-card h2,
.ju-section-dark .ju-card h3,
.ju-section-dark .ju-card h4,
.ju-section-dark .ju-card h5,
.ju-section-dark .ju-card h6,
.ju-on-dark .ju-card h1,
.ju-on-dark .ju-card h2,
.ju-on-dark .ju-card h3,
.ju-on-dark .ju-card h4,
.ju-on-dark .ju-card h5,
.ju-on-dark .ju-card h6 {
color: var(--text);
}
.ju-section-dark .ju-card a,
.ju-on-dark .ju-card a {
color: inherit;
}
.ju-section-dark .ju-card .text-muted,
.ju-on-dark .ju-card .text-muted {
color: var(--text-muted) !important;
}
@media (max-width: 768px) {
.ju-section,
.ju-section-alt,
.ju-section-dark,
.ju-section-brand {
padding: 2.5rem 0;
}
.ju-title {
font-size: 1.5rem;
}
}
/* ===== header ===== */
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background-color: var(--surface, #ffffff);
border-bottom: 1px solid var(--border, #d8dfe4);
font-family: var(--font-family-primary, 'Sunflower', sans-serif)
}
.site-header__topline {
background-color: var(--surface-alt, #f4ebe5);
border-bottom: 1px solid var(--border, #d8dfe4);
padding: 0.4rem 0;
font-size: 0.75rem;
letter-spacing: 0.04em
}
.site-header__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--primary, #be550e);
display: inline-block
}
.site-header__edition-text {
color: var(--text-muted, #5a6872);
font-weight: 500;
line-height: 1.4
}
.site-header__date-text {
color: var(--primary-text, #ab4d0c);
font-weight: 700;
line-height: 1.4
}
.site-header__navbar {
background-color: var(--surface, #ffffff);
padding: 0.85rem 0
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0.25rem 0
}
.site-header__logo {
max-width: 44px;
max-height: 44px;
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 0
}
.site-header__brand-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--text, #141f27);
letter-spacing: -0.02em;
line-height: 1
}
.site-header__collapse {
background-color: var(--surface, #ffffff)
}
.site-header__link {
color: var(--text, #141f27);
font-size: 0.95rem;
font-weight: 500;
padding: 0.6rem 1rem !important;
transition: color 0.25s ease;
position: relative
}
.site-header__link:hover,
.site-header__link:focus {
color: var(--primary-text, #ab4d0c)
}
.site-header__cta-item {
padding-left: 0.5rem
}
.site-header__cta-btn {
font-size: 0.875rem;
padding: 0.55rem 1.25rem;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none
}
.site-header__toggler {
border: 1px solid var(--border, #d8dfe4);
border-radius: 2px;
padding: 0.45rem 0.65rem;
background-color: var(--surface, #ffffff);
color: var(--text, #141f27);
outline: none;
box-shadow: none
}
.site-header__toggler:focus {
box-shadow: none
}
.site-header__toggler-icon {
font-size: 1.4rem;
line-height: 1;
color: var(--text, #141f27)
}
@media (min-width:992px) {
.site-header__brand {
position: absolute;
left: 50%;
transform: translateX(-50%)
}
.site-header__menu-left {
display: flex;
align-items: center;
gap: 0.25rem
}
.site-header__menu-right {
display: flex;
align-items: center;
gap: 0.25rem
}
}
@media (max-width:991.98px) {
.site-header__collapse {
padding: 1rem 0;
border-top: 1px solid var(--border, #d8dfe4);
margin-top: 0.75rem
}
.site-header__link {
padding: 0.65rem 0 !important;
border-bottom: 1px solid rgba(216, 223, 228, 0.4)
}
.site-header__cta-item {
padding-left: 0;
padding-top: 1rem
}
}
/* ===== hero ===== */
.prynexo-hero-editorial {
background-color: var(--dark-band);
color: var(--on-dark);
position: relative;
overflow: hidden
}
.prynexo-hero-editorial__main-heading {
font-family: var(--font-family-headings);
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 700;
color: var(--on-dark);
line-height: 1.25;
letter-spacing: -0.015em;
overflow-wrap: anywhere
}
.prynexo-hero-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
background-color: var(--dark-band);
width: 100%;
height: 100%
}
.prynexo-hero-card--lead {
min-height: 480px
}
.prynexo-hero-card--wide {
min-height: 230px
}
.prynexo-hero-card--compact {
min-height: 230px
}
.prynexo-hero-card__media-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
overflow: hidden
}
.prynexo-hero-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s cubic-bezier(.25, 1, .5, 1)
}
.prynexo-hero-card:hover .prynexo-hero-card__img {
transform: scale(1.04)
}
.prynexo-hero-card__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(17, 34, 46, 0.15) 0%, rgba(17, 34, 46, 0.5) 40%, rgba(17, 34, 46, 0.92) 100%);
z-index: 2;
pointer-events: none;
transition: background .3s ease
}
.prynexo-hero-card:hover .prynexo-hero-card__overlay {
background: linear-gradient(180deg, rgba(17, 34, 46, 0.1) 0%, rgba(17, 34, 46, 0.4) 30%, rgba(17, 34, 46, 0.96) 100%)
}
.prynexo-hero-card__content {
position: relative;
z-index: 3;
padding: 1.5rem;
display: flex;
flex-direction: column;
pointer-events: auto
}
.prynexo-hero-card--lead .prynexo-hero-card__content {
padding: 2rem 1.75rem
}
.prynexo-hero-card__title {
font-family: var(--font-family-headings);
font-weight: 700;
margin: 0 0 .5rem 0;
line-height: 1.3;
overflow-wrap: anywhere
}
.prynexo-hero-card--lead .prynexo-hero-card__title {
font-size: clamp(1.25rem, 2vw, 1.65rem)
}
.prynexo-hero-card--wide .prynexo-hero-card__title {
font-size: clamp(1.1rem, 1.5vw, 1.3rem)
}
.prynexo-hero-card--compact .prynexo-hero-card__title {
font-size: 1.05rem
}
.prynexo-hero-card__title-link {
color: var(--on-dark);
text-decoration: none;
transition: color .2s ease
}
.prynexo-hero-card__title-link:hover {
color: var(--primary-hover);
text-decoration: none
}
.prynexo-hero-card__lead {
color: var(--on-dark-muted);
font-size: .9rem;
line-height: 1.5;
margin-bottom: .75rem;
overflow-wrap: anywhere
}
.prynexo-hero-card__meta {
color: var(--on-dark-muted);
font-size: .8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .03em
}
@media (max-width:767px) {
.prynexo-hero-card--lead {
min-height: 360px
}
.prynexo-hero-card--wide {
min-height: 260px
}
.prynexo-hero-card--compact {
min-height: 240px
}
.prynexo-hero-card__content {
padding: 1.25rem
}
.prynexo-hero-card--lead .prynexo-hero-card__content {
padding: 1.25rem
}
}
/* ===== news_grid ===== */
.news-grid-block {
padding: 4.5rem 0;
position: relative
}
.news-grid-block .news-title-row {
display: flex;
align-items: center;
width: 100%
}
.news-grid-block .news-title-row .ju-title {
font-size: 2rem;
font-weight: 700;
line-height: 1.25;
color: var(--text);
margin-right: 1.5rem;
white-space: normal;
overflow-wrap: anywhere
}
.news-grid-block .news-title-line {
flex-grow: 1;
height: 1px;
background-color: var(--border)
}
.news-grid-block .news-card {
background: transparent;
border: none;
transition: transform .3s cubic-bezier(.25, 1, .5, 1)
}
.news-grid-block .news-card:hover {
transform: translateY(-4px)
}
.news-grid-block .news-media-holder {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-color: var(--dark-band);
position: relative
}
.news-grid-block .news-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.25, 1, .5, 1)
}
.news-grid-block .news-card:hover .news-card-img {
transform: scale(1.03)
}
.news-grid-block .news-panel {
background: var(--surface);
padding: 1.5rem 1.75rem;
margin-top: -2rem;
margin-left: 1rem;
margin-right: 1rem;
position: relative;
z-index: 2;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, .07);
transition: box-shadow .3s ease
}
.news-grid-block .news-card:hover .news-panel {
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, .12)
}
.news-grid-block .news-meta {
font-size: .8rem;
color: var(--primary-text);
font-weight: 500;
text-transform: uppercase
}
.news-grid-block .news-meta-item {
display: inline-flex;
align-items: center;
color: var(--primary-text)
}
.news-grid-block .news-card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
margin-bottom: .75rem
}
.news-grid-block .news-card-link {
color: var(--text);
text-decoration: none;
transition: color .25s ease
}
.news-grid-block .news-card-link:hover {
color: var(--primary-text);
text-decoration: none
}
.news-grid-block .news-card-desc {
font-size: .95rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere
}
.news-grid-block .news-read-btn {
width: 100%;
border-radius: 2px;
font-size: .875rem;
font-weight: 500;
padding: .65rem 1.25rem
}
.news-grid-block .news-footer-action .ju-btn-alt {
border-radius: 2px;
font-weight: 500;
font-size: .9rem
}
@media(max-width:767px) {
.news-grid-block {
padding: 3rem 0
}
.news-grid-block .news-title-row .ju-title {
font-size: 1.5rem;
margin-right: .75rem
}
.news-grid-block .news-panel {
margin-top: -1.25rem;
margin-left: .5rem;
margin-right: .5rem;
padding: 1.25rem 1rem
}
.news-grid-block .news-card-title {
font-size: 1.1rem
}
}
/* ===== reviews_grid ===== */
.prynexo-reviews-grid {
position: relative;
width: 100%;
overflow-x: hidden
}
.prynexo-reviews-grid .ju-eyebrow {
position: relative;
padding-bottom: 6px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--primary-text)
}
.prynexo-reviews-grid .ju-eyebrow::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background-color: var(--primary)
}
.prynexo-reviews-grid .ju-title {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
font-size: 1.85rem
}
.prynexo-reviews-grid__hairline {
height: 1px;
background-color: var(--border)
}
.prynexo-reviews-grid__card {
display: flex;
flex-direction: column;
background: transparent;
border: none;
box-shadow: none
}
.prynexo-reviews-grid__media {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background-color: var(--dark-band)
}
.prynexo-reviews-grid__media img {
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1)
}
.prynexo-reviews-grid__card:hover .prynexo-reviews-grid__media img {
transform: scale(1.03)
}
.prynexo-reviews-grid__badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 3;
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
background-color: var(--primary);
color: var(--on-primary);
border-radius: 2px
}
.prynexo-reviews-grid__panel {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex-grow: 1;
margin-top: -2rem;
margin-left: 1rem;
margin-right: 1rem;
padding: 1.5rem 1.5rem;
background: var(--surface);
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease
}
.prynexo-reviews-grid__card:hover .prynexo-reviews-grid__panel {
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.14);
transform: translateY(-3px)
}
.prynexo-reviews-grid__meta {
font-size: 0.8rem;
color: var(--primary-text);
font-weight: 500;
line-height: 1.4
}
.prynexo-reviews-grid__meta i {
font-size: 0.9rem;
color: var(--primary)
}
.prynexo-reviews-grid__dot {
color: var(--border)
}
.prynexo-reviews-grid__title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
margin-bottom: 0.75rem;
overflow-wrap: anywhere
}
.prynexo-reviews-grid__title a {
color: var(--text);
transition: color 0.2s ease
}
.prynexo-reviews-grid__title a:hover {
color: var(--primary-text)
}
.prynexo-reviews-grid__excerpt {
color: var(--text-muted);
font-size: 0.925rem;
line-height: 1.6;
font-weight: 300;
overflow-wrap: anywhere;
flex-grow: 1
}
.prynexo-reviews-grid__action {
margin-top: auto
}
.prynexo-reviews-grid .ju-btn {
padding: 0.65rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 2px;
background: var(--primary);
color: var(--on-primary);
border: 1px solid var(--primary);
transition: all 0.25s ease;
text-decoration: none
}
.prynexo-reviews-grid .ju-btn:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary)
}
.prynexo-reviews-grid .ju-btn-alt {
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 500;
border-radius: 2px;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
transition: all 0.25s ease;
text-decoration: none
}
.prynexo-reviews-grid .ju-btn-alt:hover {
background: var(--surface);
border-color: var(--text);
color: var(--text)
}
@media (max-width:767.98px) {
.prynexo-reviews-grid .ju-title {
font-size: 1.4rem
}
.prynexo-reviews-grid__panel {
margin-top: -1.25rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
padding: 1.25rem 1rem
}
.prynexo-reviews-grid__title {
font-size: 1.1rem
}
}
/* ===== guides_grid ===== */
.guides-section {
position: relative;
}
.guides-section .guides-hairline {
height: 1px;
background-color: var(--border);
}
.guides-section .guides-desc {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
max-width: 680px;
}
.guides-section .guides-filter-bar {
border-bottom: 1px solid var(--border);
padding-bottom: 1.25rem;
}
.guides-section .js-filter-btn {
cursor: pointer;
transition: all 0.25s ease;
}
.guides-section .js-filter-btn.active {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.guides-section .guides-card {
background: var(--surface);
border-radius: 0;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.guides-section .guides-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.12);
}
.guides-section .guides-img-link {
aspect-ratio: 16 / 9;
background-color: var(--dark-band);
}
.guides-section .guides-img-link img {
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.guides-section .guides-card:hover .guides-img-link img {
transform: scale(1.03);
}
.guides-section .guides-panel {
padding: 1.5rem;
margin-top: -1.75rem;
margin-left: 0.85rem;
margin-right: 0.85rem;
margin-bottom: 0.85rem;
position: relative;
z-index: 2;
background: var(--surface);
box-shadow: 0 15px 35px -10px rgba(20, 31, 39, 0.08);
}
.guides-section .guides-meta {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 500;
}
.guides-section .guides-meta-item {
display: inline-flex;
align-items: center;
}
.guides-section .guides-meta-divider {
color: var(--border);
}
.guides-section .guides-card-title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.guides-section .guides-title-link {
color: var(--text);
text-decoration: none;
transition: color 0.2s ease;
overflow-wrap: anywhere;
}
.guides-section .guides-title-link:hover {
color: var(--primary-text);
}
.guides-section .guides-card-excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
.guides-section .guides-panel {
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 1.25rem;
box-shadow: none;
}
.guides-section .ju-title {
font-size: 1.25rem;
}
.guides-section .guides-hairline {
display: none;
}
}
/* ===== fact_checking ===== */
.fact-checking-section .ju-eyebrow {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: #BE550E;
position: relative;
display: inline-block;
padding-bottom: 0.35rem;
}
.fact-checking-section .ju-eyebrow::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 1px;
background-color: #BE550E;
}
.fact-checking-section .fact-checking-hairline {
height: 1px;
background-color: rgba(255, 255, 255, 0.15);
}
.fact-checking-section .fact-checking-desc {
color: #B6BEC3;
font-size: 0.95rem;
line-height: 1.6;
max-width: 720px;
}
.fact-checking-section .fact-filter-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #B6BEC3;
padding: 0.5rem 1rem;
font-size: 0.85rem;
border-radius: 2px;
transition: all 0.25s ease;
}
.fact-checking-section .fact-filter-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.3);
}
.fact-checking-section .fact-filter-btn.active {
background: #BE550E;
color: #FFFFFF;
border-color: #BE550E;
}
.fact-checking-section .fact-card {
background: #FFFFFF;
border-radius: 0px;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.fact-checking-section .fact-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.15);
}
.fact-checking-section .fact-badge {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 2px;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
}
.fact-checking-section .fact-badge-verified {
background-color: #E8F5E9;
color: #1B5E20;
border: 1px solid #A5D6A7;
}
.fact-checking-section .fact-badge-debunked {
background-color: #FFEBEE;
color: #B71C1C;
border: 1px solid #FFCDD2;
}
.fact-checking-section .fact-badge-partial {
background-color: #FFF8E1;
color: #B78103;
border: 1px solid #FFE082;
}
.fact-checking-section .fact-meta-date,
.fact-checking-section .fact-investigator {
font-size: 0.8rem;
color: #5A6872;
}
.fact-checking-section .fact-claim-title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.4;
color: #141F27;
overflow-wrap: anywhere;
}
.fact-checking-section .claim-tag {
font-size: 0.75rem;
padding: 0.15rem 0.45rem;
background-color: #11222E;
color: #FFFFFF;
font-weight: 700;
border-radius: 2px;
vertical-align: middle;
}
.fact-checking-section .fact-summary-text {
font-size: 0.925rem;
color: #5A6872;
line-height: 1.65;
margin-bottom: 0;
overflow-wrap: anywhere;
}
.fact-checking-section .fact-source-box {
border-color: #D8DFE4 !important;
}
.fact-checking-section .source-label {
font-size: 0.8rem;
color: #5A6872;
font-weight: 500;
}
.fact-checking-section .fact-link {
font-size: 0.85rem;
color: #AB4D0C;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.fact-checking-section .fact-link:hover {
color: #9D460C;
text-decoration: none;
}
@media (max-width: 767px) {
.fact-checking-section .fact-claim-title {
font-size: 1rem;
}
.fact-checking-section .fact-filter-btn {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
/* ===== opinions_columns ===== */
.prynexo-opinions-section {
position: relative;
overflow: hidden;
}
.prynexo-opinions-section .prynexo-kicker {
display: inline-block;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--primary-text);
text-transform: uppercase;
position: relative;
padding-bottom: 0.35rem;
}
.prynexo-opinions-section .prynexo-kicker::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background-color: var(--primary);
}
.prynexo-opinions-section .prynexo-section-title {
color: var(--text);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.prynexo-opinions-section .prynexo-hairline {
height: 1px;
background-color: var(--border);
min-width: 40px;
}
.prynexo-opinions-section .prynexo-disclaimer-banner {
background-color: var(--surface-alt);
border-left: 3px solid var(--primary);
border-radius: 2px;
}
.prynexo-opinions-section .prynexo-disclaimer-icon {
font-size: 1.25rem;
color: var(--primary);
line-height: 1;
flex-shrink: 0;
}
.prynexo-opinions-section .prynexo-disclaimer-text {
font-size: 0.875rem;
line-height: 1.5;
color: var(--text);
overflow-wrap: anywhere;
}
.prynexo-opinions-section .prynexo-opinion-card {
background-color: var(--surface);
border-radius: 0px;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
border-top: 3px solid transparent;
}
.prynexo-opinions-section .prynexo-opinion-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.12);
border-top-color: var(--primary);
}
.prynexo-opinions-section .prynexo-badge {
background-color: var(--surface-alt);
color: var(--primary-text);
font-size: 0.75rem;
font-weight: 500;
padding: 0.3rem 0.6rem;
border-radius: 2px;
letter-spacing: 0.03em;
}
.prynexo-opinions-section .prynexo-read-time {
font-size: 0.75rem;
color: var(--text-muted);
display: inline-flex;
align-items: center;
}
.prynexo-opinions-section .prynexo-card-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
overflow-wrap: anywhere;
}
.prynexo-opinions-section .prynexo-card-excerpt {
font-size: 0.9375rem;
line-height: 1.65;
font-weight: 300;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.prynexo-opinions-section .prynexo-card-quote {
background-color: var(--bg);
border-left: 2px solid var(--primary);
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 500;
color: var(--accent-text);
overflow-wrap: anywhere;
}
.prynexo-opinions-section .prynexo-quote-mark {
color: var(--primary);
font-size: 1.1rem;
vertical-align: middle;
}
.prynexo-opinions-section .prynexo-author-block {
border-color: var(--border) !important;
}
.prynexo-opinions-section .prynexo-author-avatar {
width: 44px;
height: 44px;
object-fit: cover;
flex-shrink: 0;
}
.prynexo-opinions-section .prynexo-author-name {
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
.prynexo-opinions-section .prynexo-author-role {
font-size: 0.75rem;
line-height: 1.4;
color: var(--text-muted);
display: block;
}
.prynexo-opinions-section .prynexo-pub-date {
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
@media (max-width: 767px) {
.prynexo-opinions-section .prynexo-section-title {
font-size: 1rem;
hyphens: auto;
}
.prynexo-opinions-section .prynexo-card-title {
font-size: 0.875rem;
hyphens: auto;
}
.prynexo-opinions-section .prynexo-author-name {
font-size: 0.8125rem;
}
.prynexo-opinions-section .prynexo-title-row {
flex-direction: column;
align-items: flex-start !important;
}
.prynexo-opinions-section .prynexo-hairline {
width: 100%;
margin-top: 0.5rem;
}
}
/* ===== overnight_news ===== */
.overnight-digest-section {
color: var(--text);
background-color: var(--surface-alt);
}
.overnight-digest-section .overnight-title-hairline-box {
width: 100%;
}
.overnight-digest-section .ju-eyebrow {
font-size: 0.75rem;
font-weight: 500;
color: var(--primary-text);
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.overnight-digest-section .ju-eyebrow::after {
content: '';
display: block;
width: 24px;
height: 1px;
background-color: var(--primary);
margin-top: 4px;
}
.overnight-digest-section .ju-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
line-height: 1.25;
letter-spacing: -0.01em;
}
.overnight-digest-section .overnight-hairline {
height: 1px;
background-color: var(--border);
min-width: 80px;
}
.overnight-digest-section .overnight-live-badge {
background-color: var(--surface);
color: var(--primary-text);
border: 1px solid var(--border);
border-radius: 2px;
font-size: 0.8125rem;
font-weight: 500;
}
.overnight-digest-section .overnight-lead-card {
background-color: var(--surface);
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
border: 1px solid var(--border);
border-radius: 0px;
}
.overnight-digest-section .ju-badge {
background-color: var(--primary);
color: var(--on-primary);
font-size: 0.75rem;
font-weight: 500;
padding: 0.25rem 0.6rem;
border-radius: 2px;
}
.overnight-digest-section .overnight-timestamp {
font-size: 0.8125rem;
color: var(--text-muted);
}
.overnight-digest-section .overnight-lead-text {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text);
font-weight: 300;
}
.overnight-digest-section .ju-btn {
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid var(--primary);
border-radius: 2px;
padding: 0.65rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.overnight-digest-section .ju-btn:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.overnight-digest-section .overnight-filter-btn {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.5rem 1.15rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.overnight-digest-section .overnight-filter-btn:hover {
border-color: var(--primary);
color: var(--primary-text);
}
.overnight-digest-section .overnight-filter-btn.active {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.overnight-digest-section .overnight-item-card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 0px;
box-shadow: 0 10px 30px -10px rgba(20, 31, 39, 0.05);
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.overnight-digest-section .overnight-item-card:hover {
transform: translateY(-3px);
box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.12);
border-color: var(--border);
}
.overnight-digest-section .overnight-category-tag {
font-size: 0.75rem;
font-weight: 700;
color: var(--primary-text);
letter-spacing: 0.04em;
}
.overnight-digest-section .overnight-time-pill {
font-size: 0.75rem;
color: var(--text-muted);
}
.overnight-digest-section .overnight-item-title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.35;
color: var(--text);
word-break: keep-all;
}
.overnight-digest-section .overnight-item-desc {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
font-weight: 300;
}
.overnight-digest-section .overnight-item-footer {
border-top: 1px solid var(--border);
}
.overnight-digest-section .overnight-reading-time {
font-size: 0.8125rem;
color: var(--text-muted);
}
.overnight-digest-section .overnight-inline-link {
color: var(--primary-text);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}
.overnight-digest-section .overnight-inline-link:hover {
color: var(--primary-hover);
text-decoration: underline;
}
@media (max-width: 767px) {
.overnight-digest-section .ju-title {
font-size: 1.25rem;
}
.overnight-digest-section .overnight-item-title {
font-size: 1rem;
}
.overnight-digest-section .overnight-filter-btn {
font-size: 0.8125rem;
padding: 0.4rem 0.85rem;
}
}
/* ===== report_news ===== */
.ju-report-block {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.ju-report-block .ju-report-block__kicker-wrap {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.ju-report-block .ju-report-block__kicker-line {
width: 24px;
height: 1px;
background-color: var(--primary);
margin-top: 4px;
}
.ju-report-block .ju-report-block__title-row {
width: 100%;
}
.ju-report-block .ju-report-block__hairline {
flex-grow: 1;
height: 1px;
background-color: var(--border);
}
.ju-report-block .ju-report-block__info-card {
background-color: var(--surface-alt);
display: flex;
flex-direction: column;
border: none;
}
.ju-report-block .ju-report-block__form-card {
background-color: var(--surface);
border: none;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
}
.ju-report-block .ju-report-block__info-title {
color: var(--text);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.35;
}
.ju-report-block .ju-report-block__info-desc {
color: var(--text);
font-size: 0.95rem;
line-height: 1.65;
font-weight: 300;
}
.ju-report-block .ju-report-block__guide-title {
color: var(--text);
font-size: 1.05rem;
font-weight: 700;
}
.ju-report-block .ju-report-block__guide-list li {
color: var(--text);
font-size: 0.9rem;
line-height: 1.5;
}
.ju-report-block .ju-report-block__meta-box {
background-color: var(--surface);
border: 1px solid var(--border);
}
.ju-report-block .ju-report-block__meta-heading {
color: var(--text);
font-size: 0.875rem;
}
.ju-report-block .ju-report-block__meta-text {
color: var(--text-muted);
font-size: 0.8125rem;
line-height: 1.5;
}
.ju-report-block .ju-report-block__label {
color: var(--text);
font-size: 0.875rem;
font-weight: 500;
}
.ju-report-block .ju-report-block__input,
.ju-report-block .ju-report-block__select,
.ju-report-block .ju-report-block__textarea {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.65rem 0.875rem;
font-size: 0.9375rem;
line-height: 1.5;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ju-report-block .ju-report-block__input:focus,
.ju-report-block .ju-report-block__select:focus,
.ju-report-block .ju-report-block__textarea:focus {
background-color: var(--surface);
color: var(--text);
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}
.ju-report-block .ju-report-block__input::placeholder,
.ju-report-block .ju-report-block__textarea::placeholder {
color: var(--text-muted);
opacity: 0.8;
}
.ju-report-block .ju-report-block__checkbox {
width: 1.15rem;
height: 1.15rem;
border-radius: 2px;
border: 1px solid var(--border);
background-color: var(--surface);
cursor: pointer;
}
.ju-report-block .ju-report-block__checkbox:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.ju-report-block .ju-report-block__consent-label {
color: var(--text);
font-size: 0.875rem;
line-height: 1.4;
cursor: pointer;
}
.ju-report-block .ju-report-block__privacy-link {
color: var(--primary-text);
text-decoration: underline;
font-weight: 500;
}
.ju-report-block .ju-report-block__privacy-link:hover {
color: var(--primary-hover);
}
.ju-report-block .ju-report-block__note {
color: var(--text-muted);
font-size: 0.8125rem;
}
.ju-report-block .ju-report-block__submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.ju-report-block {
padding-top: 2rem;
padding-bottom: 2rem;
}
.ju-report-block .ju-title {
font-size: 1.25rem;
}
.ju-report-block .ju-report-block__info-title {
font-size: 1.15rem;
}
.ju-report-block .ju-report-block__guide-title {
font-size: 1rem;
}
.ju-report-block .ju-report-block__info-card,
.ju-report-block .ju-report-block__form-card {
padding: 1.25rem !important;
}
}
/* ===== exchange_rates ===== */
.prynexo-exchange-block {
width: 100%;
position: relative;
}
.prynexo-exchange-block .prynexo-accent-line {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.prynexo-exchange-block .prynexo-rate-card {
border-radius: 0;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.prynexo-exchange-block .prynexo-rate-card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.prynexo-exchange-block .prynexo-flag-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--surface-alt, #F4EBE5);
border-radius: 2px;
}
.prynexo-exchange-block .prynexo-unit-text {
font-size: 0.75rem;
}
.prynexo-exchange-block .prynexo-rate-tag {
font-size: 0.75rem;
font-weight: 600;
padding: 0.35rem 0.5rem;
}
.prynexo-exchange-block .prynexo-calc-container {
border-radius: 0;
}
.prynexo-exchange-block .prynexo-calc-result {
border-radius: 2px;
font-size: 1.1rem;
color: var(--text, #141F27);
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.prynexo-exchange-block .form-select,
.prynexo-exchange-block .form-control {
border-radius: 2px;
font-size: 0.9rem;
border-color: var(--border, #D8DFE4);
color: var(--text, #141F27);
}
.prynexo-exchange-block .form-select:focus,
.prynexo-exchange-block .form-control:focus {
border-color: var(--primary, #BE550E);
box-shadow: none;
}
@media (max-width: 767.98px) {
.prynexo-exchange-block .prynexo-rate-value .fs-3 {
font-size: 1.5rem !important;
}
}
/* ===== footer ===== */
.prynexo-footer {
background-color: var(--dark-band);
color: var(--on-dark);
padding: 4rem 0 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
box-sizing: border-box;
}
.prynexo-footer .prynexo-footer__top {
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prynexo-footer .prynexo-footer__brand-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.prynexo-footer .prynexo-footer__brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--on-dark);
}
.prynexo-footer .prynexo-footer__logo {
max-width: 44px;
height: 44px;
object-fit: contain;
}
.prynexo-footer .prynexo-footer__brand-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--on-dark);
letter-spacing: -0.01em;
}
.prynexo-footer .prynexo-footer__tagline {
font-size: 0.875rem;
line-height: 1.65;
color: var(--on-dark-muted);
margin: 0;
word-break: keep-all;
}
.prynexo-footer .prynexo-footer__heading {
font-size: 0.9375rem;
font-weight: 700;
color: var(--on-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.5rem;
}
.prynexo-footer .prynexo-footer__heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background-color: var(--primary);
}
.prynexo-footer .prynexo-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.prynexo-footer .prynexo-footer__link {
color: var(--on-dark-muted);
text-decoration: none;
font-size: 0.875rem;
line-height: 1.5;
transition: color 0.25s ease, transform 0.25s ease;
display: inline-block;
word-break: break-all;
}
.prynexo-footer .prynexo-footer__link:hover,
.prynexo-footer .prynexo-footer__link:focus {
color: var(--primary);
outline: none;
}
.prynexo-footer .prynexo-footer__contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.prynexo-footer .prynexo-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--on-dark-muted);
line-height: 1.5;
}
.prynexo-footer .prynexo-footer__contact-icon {
font-size: 1.125rem;
color: var(--primary);
flex-shrink: 0;
margin-top: 0.125rem;
}
.prynexo-footer .prynexo-footer__contact-text {
color: var(--on-dark-muted);
word-break: break-all;
}
.prynexo-footer .prynexo-footer__bottom {
padding-top: 1.75rem;
}
.prynexo-footer .prynexo-footer__bottom-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.prynexo-footer .prynexo-footer__copyright {
font-size: 0.8125rem;
color: var(--on-dark-muted);
margin: 0;
}
.prynexo-footer .prynexo-footer__disclaimer {
font-size: 0.75rem;
color: var(--on-dark-muted);
margin: 0;
opacity: 0.8;
}
@media (max-width: 767px) {
.prynexo-footer {
padding: 3rem 0 1.5rem;
}
.prynexo-footer .prynexo-footer__top {
padding-bottom: 2rem;
}
.prynexo-footer .prynexo-footer__bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.prynexo-footer .prynexo-footer__heading {
margin-bottom: 0.875rem;
}
}
.prynexo-cat-hero {
background-color: var(--dark-band, #11222E);
color: var(--on-dark, #FFFFFF);
position: relative;
}
.prynexo-cat-hero__inner {
max-width: 820px;
}
.prynexo-cat-hero__title {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 700;
line-height: 1.25;
color: var(--on-dark, #FFFFFF);
margin-top: 0.5rem;
margin-bottom: 1rem;
overflow-wrap: anywhere;
}
.prynexo-cat-hero__subtitle {
font-size: 1.05rem;
line-height: 1.6;
color: var(--on-dark-muted, #B6BEC3);
margin: 0;
overflow-wrap: anywhere;
}
.prynexo-list-section {
background-color: var(--bg, #F6F8FA);
}
.prynexo-list-section__headline-row {
gap: 1.5rem;
flex-grow: 1;
}
.prynexo-list-section__hairline {
flex-grow: 1;
height: 1px;
background-color: var(--border, #D8DFE4);
min-width: 60px;
}
.prynexo-list-section__intro-wrap {
max-width: 420px;
}
.prynexo-list-section__intro {
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted, #5A6872);
overflow-wrap: anywhere;
}
.prynexo-filter-bar {
padding: 1rem;
background-color: var(--surface, #FFFFFF);
box-shadow: 0 4px 20px -5px rgba(20, 31, 39, 0.04);
}
.prynexo-filter-bar__search-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #5A6872);
font-size: 1.1rem;
pointer-events: none;
}
.prynexo-filter-bar__input {
padding-left: 2.4rem;
background-color: var(--surface-alt, #F4EBE5);
border: 1px solid var(--border, #D8DFE4);
border-radius: 2px;
color: var(--text, #141F27);
font-size: 0.875rem;
}
.prynexo-filter-bar__input::placeholder {
color: var(--text-muted, #5A6872);
opacity: 0.85;
}
.prynexo-filter-bar__input:focus {
background-color: var(--surface, #FFFFFF);
border-color: var(--primary, #BE550E);
box-shadow: none;
color: var(--text, #141F27);
}
.prynexo-filter-bar__label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-muted, #5A6872);
}
.prynexo-filter-bar__select {
background-color: var(--surface-alt, #F4EBE5);
border: 1px solid var(--border, #D8DFE4);
border-radius: 2px;
color: var(--text, #141F27);
font-size: 0.875rem;
padding: 0.45rem 2rem 0.45rem 0.85rem;
width: auto;
}
.prynexo-filter-bar__select:focus {
background-color: var(--surface, #FFFFFF);
border-color: var(--primary, #BE550E);
box-shadow: none;
color: var(--text, #141F27);
}
.prynexo-numbered-card {
background-color: var(--surface, #FFFFFF);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
}
.prynexo-numbered-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.12);
}
.prynexo-numbered-card__media-wrap {
aspect-ratio: 3 / 2;
overflow: hidden;
background-color: var(--dark-band, #11222E);
position: relative;
}
.prynexo-numbered-card__media-link {
width: 100%;
height: 100%;
}
.prynexo-numbered-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.prynexo-numbered-card:hover .prynexo-numbered-card__img {
transform: scale(1.03);
}
.prynexo-numbered-card__index {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background-color: rgba(17, 34, 46, 0.85);
color: var(--on-dark, #FFFFFF);
font-size: 0.875rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
letter-spacing: 0.05em;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 2;
}
.prynexo-numbered-card__body {
padding: 1.75rem 1.5rem 1.25rem;
}
.prynexo-numbered-card__title {
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 700;
line-height: 1.35;
margin-bottom: 0.75rem;
overflow-wrap: anywhere;
}
.prynexo-numbered-card__title-link {
color: var(--text, #141F27);
text-decoration: none;
transition: color 0.2s ease;
}
.prynexo-numbered-card__title-link:hover {
color: var(--primary-text, #AB4D0C);
}
.prynexo-numbered-card__excerpt {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted, #5A6872);
margin-bottom: 1.25rem;
overflow-wrap: anywhere;
}
.prynexo-numbered-card__footer {
border-top: 1px solid var(--border, #D8DFE4);
}
.prynexo-numbered-card__meta {
font-size: 0.75rem;
color: var(--text-muted, #5A6872);
font-weight: 500;
}
.prynexo-numbered-card__action {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: var(--surface-alt, #F4EBE5);
color: var(--primary-text, #AB4D0C);
text-decoration: none;
font-size: 1.1rem;
transition: background-color 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.prynexo-numbered-card:hover .prynexo-numbered-card__action {
background-color: var(--primary, #BE550E);
color: var(--on-primary, #FFFFFF);
}
.prynexo-empty-state__icon {
font-size: 2.5rem;
color: var(--text-muted, #5A6872);
margin-bottom: 0.5rem;
}
.prynexo-empty-state__text {
color: var(--text-muted, #5A6872);
font-size: 0.95rem;
}
.prynexo-subscribe-section {
background-color: var(--surface-alt, #F4EBE5);
}
.prynexo-subscribe-section__desc {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted, #5A6872);
}
.prynexo-subscribe-form__input {
max-width: 380px;
padding: 0.65rem 1rem;
border: 1px solid var(--border, #D8DFE4);
background-color: var(--surface, #FFFFFF);
border-radius: 2px;
font-size: 0.9rem;
color: var(--text, #141F27);
}
.prynexo-subscribe-form__input::placeholder {
color: var(--text-muted, #5A6872);
opacity: 0.85;
}
.prynexo-subscribe-form__input:focus {
border-color: var(--primary, #BE550E);
box-shadow: none;
color: var(--text, #141F27);
}
.prynexo-subscribe-form__submit-btn {
white-space: nowrap;
}
.prynexo-consent-wrap {
font-size: 0.8rem;
color: var(--text-muted, #5A6872);
}
.prynexo-consent-label {
cursor: pointer;
}
.prynexo-consent-link {
color: var(--primary-text, #AB4D0C);
text-decoration: underline;
}
.prynexo-consent-link:hover {
color: var(--primary-hover, #9D460C);
}
.prynexo-subscribe-form__msg {
font-size: 0.85rem;
padding: 0.5rem 1rem;
border-radius: 2px;
}
.prynexo-subscribe-form__msg.is-success {
background-color: #e8f5e9;
color: #2e7d32;
}
.prynexo-subscribe-form__msg.is-error {
background-color: #ffebee;
color: #c62828;
}
@media (max-width: 767.98px) {
.prynexo-cat-hero__title {
font-size: 1.5rem;
}
.prynexo-subscribe-form__input {
max-width: 100%;
}
}
/* ===== PAGE: privacy ===== */
#privacy-content.policy-content{color:var(--text);font-family:var(--font-family-primary);line-height:1.75;padding-top:1rem;padding-bottom:3rem;overflow-wrap:anywhere}#privacy-content.policy-content .policy-intro{margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}#privacy-content.policy-content .policy-meta-date{font-size:0.875rem;color:var(--primary-text);font-weight:500;margin-bottom:1rem;letter-spacing:0.02em}#privacy-content.policy-content .policy-lead{font-size:1.0625rem;line-height:1.8;color:var(--text);font-weight:300;margin-bottom:0}#privacy-content.policy-content .policy-section{margin-bottom:2.75rem}#privacy-content.policy-content h2{color:var(--text);font-size:1.375rem;font-weight:700;line-height:1.35;margin-top:0;margin-bottom:1.25rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);position:relative}#privacy-content.policy-content h2::after{content:'';position:absolute;bottom:-1px;left:0;width:36px;height:2px;background-color:var(--primary)}#privacy-content.policy-content h3{color:var(--accent-text);font-size:1.125rem;font-weight:700;line-height:1.4;margin-top:1.5rem;margin-bottom:0.75rem}#privacy-content.policy-content p{color:var(--text);font-size:0.96875rem;margin-bottom:1rem;font-weight:300}#privacy-content.policy-content ul{margin:0.5rem 0 1.25rem 1.25rem;padding-left:0;list-style-type:disc}#privacy-content.policy-content li{color:var(--text);font-size:0.96875rem;margin-bottom:0.625rem;line-height:1.7}#privacy-content.policy-content li strong{color:var(--text);font-weight:700}#privacy-content.policy-content .policy-contact-box{background-color:var(--surface-alt);padding:1.5rem 1.75rem;margin:1.5rem 0;border-left:3px solid var(--primary)}#privacy-content.policy-content .policy-contact-box h3{margin-top:0;margin-bottom:1rem;color:var(--text);font-size:1.1rem}#privacy-content.policy-content .policy-contact-box p{margin-bottom:0.5rem;font-size:0.9375rem}#privacy-content.policy-content .policy-contact-box p:last-child{margin-bottom:0}#privacy-content.policy-content a{color:var(--primary-text);text-decoration:none;transition:color 0.2s ease}#privacy-content.policy-content a:hover{color:var(--primary-hover);text-decoration:underline}#privacy-content.policy-content .policy-contact-note{font-size:0.875rem;color:var(--text-muted);margin-top:1rem}@media (max-width:767px){#privacy-content.policy-content{padding-top:0.5rem;padding-bottom:2rem}#privacy-content.policy-content h2{font-size:1rem;margin-bottom:1rem;hyphens:auto}#privacy-content.policy-content h3{font-size:0.875rem;margin-top:1.25rem;margin-bottom:0.5rem;hyphens:auto}#privacy-content.policy-content .policy-lead,#privacy-content.policy-content p,#privacy-content.policy-content li{font-size:0.875rem;line-height:1.65;hyphens:auto}#privacy-content.policy-content .policy-contact-box{padding:1.25rem 1rem}}
/* ===== PAGE: terms ===== */
#privacy-content.policy-content { width: 100%; max-width: 900px; margin: 0 auto; padding: 2.5rem 1.5rem; color: var(--text); font-family: var(--font-family-primary, 'Sunflower', sans-serif); line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; } #privacy-content .policy-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } #privacy-content .policy-kicker { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } #privacy-content .policy-main-title { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0 0 1rem 0; } #privacy-content .policy-intro { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; margin: 0; } #privacy-content .policy-section { margin-bottom: 2.25rem; } #privacy-content .policy-section h3 { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.35; margin: 0 0 0.85rem 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } #privacy-content .policy-section p { font-size: 0.95rem; font-weight: 300; color: var(--text); margin-bottom: 0.85rem; line-height: 1.7; } #privacy-content .policy-list, #privacy-content .policy-ordered-list { padding-left: 1.25rem; margin: 0.75rem 0 1rem 0; } #privacy-content .policy-list li, #privacy-content .policy-ordered-list li { font-size: 0.95rem; font-weight: 300; color: var(--text); margin-bottom: 0.5rem; line-height: 1.65; } #privacy-content .policy-list li strong { font-weight: 700; color: var(--text); } #privacy-content .policy-contact-card { background: var(--surface-alt, #F4EBE5); padding: 1.5rem; border-radius: 2px; margin-top: 2.5rem; } #privacy-content .contact-details-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; } #privacy-content .contact-detail-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; } #privacy-content .detail-label { font-weight: 700; color: var(--text); min-width: 120px; } #privacy-content .detail-value { color: var(--text-muted); } #privacy-content .policy-link { color: var(--primary-text); text-decoration: none; font-weight: 500; transition: color 0.2s ease; } #privacy-content .policy-link:hover, #privacy-content .policy-link:focus { color: var(--primary-hover, #9D460C); text-decoration: underline; } @media (max-width: 767px) { #privacy-content.policy-content { padding: 1.5rem 1rem; } #privacy-content .policy-main-title { font-size: 1.125rem; hyphens: auto; } #privacy-content .policy-section h3 { font-size: 1rem; hyphens: auto; } #privacy-content .policy-intro, #privacy-content .policy-section p, #privacy-content .policy-list li, #privacy-content .policy-ordered-list li { font-size: 0.875rem; } #privacy-content .policy-contact-card { padding: 1.25rem 1rem; } #privacy-content .detail-label { min-width: 100%; margin-bottom: 0.15rem; } }
/* ===== PAGE: disclaimer ===== */
#privacy-content.policy-content { padding: 3rem 1.5rem; color: var(--text); background: var(--surface); max-width: 960px; margin: 0 auto; line-height: 1.75; font-weight: 300; } #privacy-content .policy-header-meta { margin-bottom: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } #privacy-content .policy-update-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--primary-text); background: var(--surface-alt); padding: 0.35rem 0.85rem; border-radius: 2px; } #privacy-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-top: 2.75rem; margin-bottom: 1.25rem; line-height: 1.3; border-left: 3px solid var(--primary); padding-left: 0.85rem; } #privacy-content h2:first-of-type { margin-top: 0; } #privacy-content p { font-size: 1rem; color: var(--text); margin-bottom: 1.25rem; overflow-wrap: anywhere; } #privacy-content ul { margin-top: 0.5rem; margin-bottom: 1.5rem; padding-left: 1.25rem; list-style-type: square; } #privacy-content ul li { font-size: 1rem; color: var(--text); margin-bottom: 0.75rem; line-height: 1.65; } #privacy-content strong { font-weight: 700; color: var(--text); } #privacy-content .policy-link { color: var(--primary-text); text-decoration: none; transition: color 0.3s ease; } #privacy-content .policy-link:hover, #privacy-content .policy-link:focus { color: var(--primary-hover); text-decoration: underline; } #privacy-content .policy-contact-details { background: var(--surface-alt); padding: 1.5rem 1.75rem; border-radius: 2px; margin-top: 1.5rem; margin-bottom: 0; border: 1px solid var(--border); } @media (max-width: 767px) { #privacy-content.policy-content { padding: 2rem 1rem; } #privacy-content h2 { font-size: 1rem; margin-top: 2rem; margin-bottom: 0.85rem; padding-left: 0.65rem; } #privacy-content p, #privacy-content ul li { font-size: 0.875rem; } #privacy-content .policy-header-meta { margin-bottom: 1.75rem; } #privacy-content .policy-contact-details { padding: 1.25rem 1rem; } }
/* ===== PAGE: cookies ===== */
#privacy-content.policy-content { width: 100%; max-width: 100%; color: var(--text, #141F27); background: var(--bg, #F6F8FA); padding: 3rem 1rem; overflow-wrap: anywhere; word-break: keep-all; } #privacy-content .policy-content__inner { max-width: 960px; margin: 0 auto; background: var(--surface, #FFFFFF); padding: 3rem 2.5rem; border-radius: 0; box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07); } #privacy-content .policy-section { margin-bottom: 2.75rem; } #privacy-content .policy-section:last-child { margin-bottom: 0; } #privacy-content .policy-heading { font-size: 1.5rem; line-height: 1.35; font-weight: 700; color: var(--text, #141F27); margin-top: 0; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border, #D8DFE4); position: relative; } #privacy-content .policy-heading::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; background: var(--primary, #BE550E); } #privacy-content .policy-subheading { font-size: 1.15rem; line-height: 1.4; font-weight: 700; color: var(--primary-text, #AB4D0C); margin-top: 0; margin-bottom: 0.75rem; } #privacy-content .policy-text { font-size: 0.95rem; line-height: 1.7; font-weight: 300; color: var(--text, #141F27); margin-bottom: 1rem; } #privacy-content .policy-text:last-child { margin-bottom: 0; } #privacy-content .policy-card { background: var(--surface-alt, #F4EBE5); padding: 1.5rem; margin-bottom: 1.25rem; border-left: 3px solid var(--primary, #BE550E); } #privacy-content .policy-card:last-child { margin-bottom: 0; } #privacy-content .policy-list { list-style-type: disc; padding-left: 1.5rem; margin: 1rem 0; color: var(--text, #141F27); font-size: 0.95rem; line-height: 1.7; } #privacy-content .policy-list li { margin-bottom: 0.75rem; } #privacy-content .policy-list li strong { color: var(--text, #141F27); } #privacy-content .policy-contact-box { background: var(--surface-alt, #F4EBE5); padding: 1.5rem; margin-top: 1.25rem; border-left: 3px solid var(--accent, #203556); } #privacy-content .policy-contact-item { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.5rem; color: var(--text, #141F27); } #privacy-content .policy-contact-item:last-child { margin-bottom: 0; } #privacy-content .policy-link { color: var(--primary-text, #AB4D0C); text-decoration: underline; transition: color 0.2s ease; } #privacy-content .policy-link:hover, #privacy-content .policy-link:focus { color: var(--primary-hover, #9D460C); text-decoration: none; } @media (max-width: 767px) { #privacy-content.policy-content { padding: 1.5rem 0.75rem; } #privacy-content .policy-content__inner { padding: 1.75rem 1.25rem; } #privacy-content .policy-heading { font-size: 16px; margin-bottom: 1rem; padding-bottom: 0.5rem; } #privacy-content .policy-subheading { font-size: 14px; margin-bottom: 0.5rem; } #privacy-content .policy-text { font-size: 0.9rem; line-height: 1.6; } #privacy-content .policy-list { padding-left: 1.2rem; font-size: 0.9rem; } #privacy-content .policy-card { padding: 1rem; } #privacy-content .policy-contact-box { padding: 1rem; } }
/* ===== PAGE: about ===== */
.prynexo-about .prynexo-about__hairline, .prynexo-contact .prynexo-contact__hairline { height: 1px; background-color: var(--border); } .prynexo-about .prynexo-about__editorial-frame { width: 100%; aspect-ratio: 16/10; overflow: hidden; background-color: var(--dark-band); } .prynexo-about .prynexo-about__editorial-frame img { object-fit: cover; } .prynexo-about .prynexo-about__lead-box, .prynexo-about .prynexo-about__pillar-card, .prynexo-contact .prynexo-contact__info, .prynexo-contact .prynexo-contact__form-card { border-radius: 0px; box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07); } .prynexo-about .prynexo-about__pillar-card { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .prynexo-about .prynexo-about__pillar-card:hover { transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(20, 31, 39, 0.12); } .prynexo-contact .prynexo-contact__icon-box { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: var(--surface-alt); color: var(--primary-text); border-radius: 2px; flex-shrink: 0; } .prynexo-contact .prynexo-input { border-radius: 2px; border: 1px solid var(--border); background-color: var(--surface); color: var(--text); padding: 0.75rem 1rem; font-size: 0.9375rem; } .prynexo-contact .prynexo-input:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(190, 85, 14, 0.15); } .prynexo-contact .prynexo-input::placeholder { color: var(--text-muted); opacity: 0.8; } .prynexo-contact .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } @media (max-width: 767px) { .prynexo-about .prynexo-about__editorial-frame { aspect-ratio: 16/9; } .prynexo-about h2, .prynexo-contact h2 { font-size: 1.25rem; } }
.editorial-comment-item {
position: relative;
background-color: #FFFFFF;
border: 1px solid #D8DFE4;
border-radius: 0;
margin-bottom: 1.5rem;
box-shadow: 0 20px 40px -15px rgba(20, 31, 39, 0.07);
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.editorial-comment-card {
padding: 1.5rem 1.75rem;
}
.comment-avatar {
width: 48px;
height: 48px;
min-width: 48px;
background: linear-gradient(135deg, #203556 0%, #11222E 100%);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
border-radius: 2px;
border: 1px solid rgba(32, 53, 86, 0.2);
user-select: none;
object-fit: cover;
}
.comment-content-wrapper {
min-width: 0;
}
.comment-author {
font-size: 1rem;
font-weight: 700;
color: #141F27;
line-height: 1.3;
letter-spacing: -0.01em;
}
.comment-badge {
background-color: #F4EBE5;
color: #BE550E;
font-size: 0.6875rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 2px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.comment-date {
font-size: 0.8125rem;
color: #5A6872;
font-weight: 300;
}
.comment-text {
font-size: 0.9375rem;
line-height: 1.65;
color: #141F27;
margin-bottom: 0;
font-weight: 300;
word-break: keep-all;
}
.comment-actions {
border-top: 1px solid #F6F8FA;
padding-top: 0.75rem;
}
.comment-action-btn {
background: transparent;
border: none;
padding: 0.25rem 0.5rem;
color: #5A6872;
font-size: 0.8125rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.35rem;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s ease-in-out;
line-height: 1;
}
.comment-action-btn:hover {
color: #BE550E;
background-color: #F4EBE5;
}
.comment-action-btn i {
font-size: 0.95rem;
}
.like-count {
font-weight: 700;
color: #141F27;
}
.comment-action-btn:hover .like-count {
color: #BE550E;
}
.text-muted-subtle {
color: #B6BEC3;
}
.text-muted-subtle:hover {
color: #203556;
}
.editorial-reply-item {
position: relative;
margin-left: 3rem;
margin-top: 0.75rem;
margin-bottom: 1rem;
background-color: #F6F8FA;
border: 1px solid #D8DFE4;
border-left: 3px solid #BE550E;
border-radius: 0;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.editorial-reply-card {
padding: 1.25rem 1.5rem;
}
.reply-thread-line {
position: absolute;
left: -1.75rem;
top: 1.5rem;
width: 1.5rem;
height: 1px;
background-color: #D8DFE4;
}
.reply-avatar {
width: 40px;
height: 40px;
min-width: 40px;
background: linear-gradient(135deg, #BE550E 0%, #9D460C 100%);
color: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.02em;
border-radius: 2px;
border: 1px solid rgba(190, 85, 14, 0.3);
user-select: none;
object-fit: cover;
}
.reply-target-tag {
font-size: 0.75rem;
color: #BE550E;
background-color: #F4EBE5;
padding: 0.15rem 0.5rem;
border-radius: 2px;
font-weight: 500;
}
.editorial-reply-item .comment-text {
font-size: 0.875rem;
line-height: 1.6;
color: #141F27;
}
@media (max-width:767.98px) {
.editorial-reply-item {
margin-left: 1.25rem;
}
.reply-thread-line {
display: none;
}
}
/* ===== PAGE TEMPLATE: news-list, reviews-list, guides-list ===== */
.detail-page-body {
background-color: var(--bg, #F6F8FA);
color: var(--text, #141F27);
font-family: var(--font-family-primary, 'Sunflower', sans-serif);
}
.site-header {
position: sticky;
top: 0;
z-index: 1030;
background-color: var(--surface, #ffffff);
border-bottom: 1px solid var(--border, #d8dfe4);
font-family: var(--font-family-primary, 'Sunflower', sans-serif);
}
.site-header__topline {
background-color: var(--surface-alt, #f4ebe5);
border-bottom: 1px solid var(--border, #d8dfe4);
padding: 0.4rem 0;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
.site-header__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--primary, #be550e);
display: inline-block;
}
.site-header__edition-text {
color: var(--text-muted, #5a6872);
font-weight: 500;
line-height: 1.4;
}
.site-header__date-text {
color: var(--primary-text, #ab4d0c);
font-weight: 700;
line-height: 1.4;
}
.site-header__navbar {
background-color: var(--surface, #ffffff);
padding: 0.85rem 0;
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
padding: 0.25rem 0;
}
.site-header__logo {
max-width: 44px;
max-height: 44px;
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 0;
}
.site-header__brand-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--text, #141f27);
letter-spacing: -0.02em;
line-height: 1;
}
.site-header__collapse {
background-color: var(--surface, #ffffff);
}
.site-header__link {
color: var(--text, #141f27);
font-size: 0.95rem;
font-weight: 500;
padding: 0.6rem 1rem !important;
transition: color 0.25s ease;
position: relative;
}
.site-header__link:hover,
.site-header__link:focus {
color: var(--primary-text, #ab4d0c);
}
.site-header__cta-item {
padding-left: 0.5rem;
}
.site-header__cta-btn {
font-size: 0.875rem;
padding: 0.55rem 1.25rem;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.site-header__toggler {
border: 1px solid var(--border, #d8dfe4);
border-radius: 2px;
padding: 0.45rem 0.65rem;
background-color: var(--surface, #ffffff);
color: var(--text, #141f27);
outline: none;
box-shadow: none;
}
.site-header__toggler:focus {
box-shadow: none;
}
.site-header__toggler-icon {
font-size: 1.4rem;
line-height: 1;
color: var(--text, #141f27);
}
@media (min-width:992px) {
.site-header__brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.site-header__menu-left,
.site-header__menu-right {
display: flex;
align-items: center;
gap: 0.25rem;
}
}
@media (max-width:991.98px) {
.site-header__collapse {
padding: 1rem 0;
border-top: 1px solid var(--border, #d8dfe4);
margin-top: 0.75rem;
}
.site-header__link {
padding: 0.65rem 0 !important;
border-bottom: 1px solid rgba(216, 223, 228, 0.4);
}
.site-header__cta-item {
padding-left: 0;
padding-top: 1rem;
}
}
.detail-hero-section {
background-color: var(--dark-band, #11222E);
position: relative;
}
.detail-hero-section__content {
max-width: 860px;
}
.detail-hero-section__title {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
line-height: 1.25;
font-weight: 700;
color: var(--on-dark, #FFFFFF);
overflow-wrap: anywhere;
}
.detail-hero-section__subtitle {
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: var(--on-dark-muted, #B6BEC3);
line-height: 1.6;
overflow-wrap: anywhere;
}
.detail-hero-section__meta,
.detail-hero-section__readtime {
color: var(--on-dark-muted, #B6BEC3);
font-size: 0.85rem;
font-weight: 500;
}
.article-facts-strip {
background-color: var(--surface-alt, #F4EBE5);
border-bottom: 1px solid var(--border, #D8DFE4);
}
.article-facts-strip__item {
font-size: 0.875rem;
color: var(--text, #141F27);
}
.article-facts-strip__label {
font-weight: 700;
color: var(--primary-text, #AB4D0C);
}
.article-facts-strip__value {
font-weight: 500;
color: var(--text, #141F27);
}
.article-main-media {
border: 1px solid var(--border, #D8DFE4);
background-color: var(--surface, #FFFFFF);
padding: 0.25rem;
margin: 0;
}
.article-main-media__img {
height: auto;
max-height: 480px;
object-fit: cover;
border-radius: 0;
display: block;
}
.article-main-media__caption {
font-size: 0.8125rem;
color: var(--text-muted, #5A6872);
padding: 0.5rem 0.5rem 0.25rem;
font-weight: 500;
}
.article-body {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text, #141F27);
}
.article-body__lead {
font-size: 1.2rem;
line-height: 1.6;
font-weight: 500;
color: var(--text, #141F27);
border-left: 3px solid var(--primary, #BE550E);
padding-left: 1.25rem;
}
.article-body__heading {
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-weight: 700;
color: var(--text, #141F27);
line-height: 1.3;
overflow-wrap: anywhere;
}
.article-body__p {
margin-bottom: 1.25rem;
color: var(--text, #141F27);
overflow-wrap: anywhere;
}
.article-body__list {
list-style-type: square;
padding-left: 1.5rem;
color: var(--text, #141F27);
}
.article-body__list-item {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.article-callout-box {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #D8DFE4);
padding: 1.25rem 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
box-shadow: 0 10px 30px -10px rgba(20, 31, 39, 0.05);
}
.article-callout-box__icon {
font-size: 1.75rem;
color: var(--primary, #BE550E);
line-height: 1;
flex-shrink: 0;
}
.article-callout-box__title {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: var(--text, #141F27);
}
.article-callout-box__text {
font-size: 0.95rem;
color: var(--text-muted, #5A6872);
line-height: 1.55;
}
.article-callout-box--quote {
background-color: var(--surface-alt, #F4EBE5);
border-left: 4px solid var(--accent, #203556);
display: block;
padding: 1.5rem 2rem;
}
.article-callout-box__quote p {
font-size: 1.15rem;
font-style: italic;
color: var(--accent-text, #203556);
line-height: 1.5;
}
.article-callout-box__cite {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-muted, #5A6872);
display: block;
text-align: right;
}
.article-cta-box {
background-color: var(--surface-alt, #F4EBE5);
border-radius: 0;
}
.article-cta-box__title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text, #141F27);
}
.article-cta-box__desc {
font-size: 0.925rem;
color: var(--text-muted, #5A6872);
}
.article-cta-box__input {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #D8DFE4);
border-radius: 2px;
padding: 0.65rem 1rem;
font-size: 0.9rem;
color: var(--text, #141F27);
}
.article-cta-box__input::placeholder {
color: var(--text-muted, #5A6872);
opacity: 0.8;
}
.article-cta-box__btn {
padding: 0.65rem 1.5rem;
white-space: nowrap;
border-radius: 2px;
}
.article-cta-box__consent {
font-size: 0.8rem;
color: var(--text-muted, #5A6872);
}
.article-cta-box__policy-link {
color: var(--primary-text, #AB4D0C);
text-decoration: underline;
}
.article-cta-box__big-icon {
font-size: 4rem;
color: var(--primary, #BE550E);
opacity: 0.85;
}
.article-faq__divider {
flex-grow: 1;
height: 1px;
background-color: var(--border, #D8DFE4);
}
.article-faq .accordion-item {
background-color: var(--surface, #FFFFFF);
border-color: var(--border, #D8DFE4);
border-radius: 0 !important;
}
.article-faq .accordion-button {
font-weight: 700;
font-size: 1rem;
color: var(--text, #141F27);
background-color: var(--surface, #FFFFFF);
padding: 1rem 1.25rem;
box-shadow: none;
}
.article-faq .accordion-button:not(.collapsed) {
background-color: var(--surface-alt, #F4EBE5);
color: var(--primary-text, #AB4D0C);
}
.article-faq .accordion-body {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-muted, #5A6872);
padding: 1.25rem;
}
.article-author {
background-color: var(--surface-alt, #F4EBE5);
border: 1px solid var(--border, #D8DFE4);
}
.article-author__avatar-placeholder {
width: 72px;
height: 72px;
background-color: var(--primary, #BE550E);
color: var(--on-primary, #FFFFFF);
font-size: 2rem;
border-radius: 50%;
}
.article-author__role {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-text, #AB4D0C);
}
.article-author__name {
font-size: 1.15rem;
font-weight: 700;
color: var(--text, #141F27);
}
.article-author__bio {
font-size: 0.9rem;
color: var(--text-muted, #5A6872);
line-height: 1.5;
}
.article-related__divider {
flex-grow: 1;
height: 1px;
background-color: var(--border, #D8DFE4);
}
.article-related__card {
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #D8DFE4);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.article-related__card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 30px -10px rgba(20, 31, 39, 0.1);
}
.article-related__media {
height: 160px;
overflow: hidden;
background-color: var(--dark-band, #11222E);
}
.article-related__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.article-related__card:hover .article-related__media img {
transform: scale(1.05);
}
.article-related__title {
font-size: 0.975rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.article-related__link {
color: var(--text, #141F27);
text-decoration: none;
transition: color 0.2s ease;
}
.article-related__link:hover {
color: var(--primary-text, #AB4D0C);
}
.article-related__meta {
font-size: 0.75rem;
color: var(--text-muted, #5A6872);
font-weight: 500;
border-top: 1px solid var(--border, #D8DFE4);
}
.prynexo-footer {
background-color: var(--dark-band, #11222E);
color: var(--on-dark, #FFFFFF);
padding: 4rem 0 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
box-sizing: border-box;
}
.prynexo-footer .prynexo-footer__top {
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prynexo-footer .prynexo-footer__brand-block {
display: flex;
flex-direction: column;
gap: 1rem;
}
.prynexo-footer .prynexo-footer__brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--on-dark, #FFFFFF);
}
.prynexo-footer .prynexo-footer__logo {
max-width: 44px;
height: 44px;
object-fit: contain;
}
.prynexo-footer .prynexo-footer__brand-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--on-dark, #FFFFFF);
letter-spacing: -0.01em;
}
.prynexo-footer .prynexo-footer__tagline {
font-size: 0.875rem;
line-height: 1.65;
color: var(--on-dark-muted, #B6BEC3);
margin: 0;
word-break: keep-all;
}
.prynexo-footer .prynexo-footer__heading {
font-size: 0.9375rem;
font-weight: 700;
color: var(--on-dark, #FFFFFF);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.5rem;
}
.prynexo-footer .prynexo-footer__heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 24px;
height: 2px;
background-color: var(--primary, #BE550E);
}
.prynexo-footer .prynexo-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.prynexo-footer .prynexo-footer__link {
color: var(--on-dark-muted, #B6BEC3);
text-decoration: none;
font-size: 0.875rem;
line-height: 1.5;
transition: color 0.25s ease, transform 0.25s ease;
display: inline-block;
word-break: break-all;
}
.prynexo-footer .prynexo-footer__link:hover,
.prynexo-footer .prynexo-footer__link:focus {
color: var(--primary, #BE550E);
outline: none;
}
.prynexo-footer .prynexo-footer__contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.prynexo-footer .prynexo-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--on-dark-muted, #B6BEC3);
line-height: 1.5;
}
.prynexo-footer .prynexo-footer__contact-icon {
font-size: 1.125rem;
color: var(--primary, #BE550E);
flex-shrink: 0;
margin-top: 0.125rem;
}
.prynexo-footer .prynexo-footer__contact-text {
color: var(--on-dark-muted, #B6BEC3);
word-break: break-all;
}
.prynexo-footer .prynexo-footer__bottom {
padding-top: 1.75rem;
}
.prynexo-footer .prynexo-footer__bottom-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.prynexo-footer .prynexo-footer__copyright {
font-size: 0.8125rem;
color: var(--on-dark-muted, #B6BEC3);
margin: 0;
}
.prynexo-footer .prynexo-footer__disclaimer {
font-size: 0.75rem;
color: var(--on-dark-muted, #B6BEC3);
margin: 0;
opacity: 0.8;
}
@media (max-width: 767px) {
.prynexo-footer {
padding: 3rem 0 1.5rem;
}
.prynexo-footer .prynexo-footer__top {
padding-bottom: 2rem;
}
.prynexo-footer .prynexo-footer__bottom-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.prynexo-footer .prynexo-footer__heading {
margin-bottom: 0.875rem;
}
.article-facts-strip__container {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.article-cta-box {
padding: 1.5rem !important;
}
}
/* mobile-text-guard */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
overflow-wrap: anywhere;
}
a, button, .btn {
overflow-wrap: anywhere;
white-space: normal;
}
img, video, iframe {
max-width: 100%;
}
}