/* =========================================================================
Serene Aesthetics — Dr. Strevinas
Theme styles: design tokens, base, components, animations
Συμπληρώνει το Tailwind (Play CDN) που φορτώνεται στο header.php.
========================================================================= */
/* -----------------------------------------------------------------------
Design tokens (HSL) — αντιστοιχούν στο src/index.css του original.
----------------------------------------------------------------------- */
:root {
--background: 0 0% 4%;
--foreground: 0 0% 96%;
--card: 0 0% 6%;
--card-foreground: 0 0% 96%;
--popover: 0 0% 4%;
--popover-foreground: 0 0% 96%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 4%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 92%;
--muted: 0 0% 8%;
--muted-foreground: 0 0% 60%;
--accent: 0 0% 12%;
--accent-foreground: 0 0% 96%;
--destructive: 0 50% 40%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14%;
--input: 0 0% 14%;
--ring: 0 0% 80%;
--radius: 0.125rem;
/* Luxury tokens */
--ink: 0 0% 4%;
--bone: 0 0% 92%;
--silver: 0 0% 70%;
--whisper: 0 0% 45%;
--gradient-fade: linear-gradient(180deg, hsl(0 0% 4% / 0) 0%, hsl(0 0% 4%) 100%);
--gradient-vignette: radial-gradient(ellipse at center, transparent 40%, hsl(0 0% 0% / 0.7) 100%);
--shadow-soft: 0 30px 80px -20px hsl(0 0% 0% / 0.6);
--ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
--ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
}
/* -----------------------------------------------------------------------
Base
----------------------------------------------------------------------- */
* {
border-color: hsl(var(--border));
}
html {
scroll-behavior: smooth;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Inter', sans-serif;
font-weight: 300;
letter-spacing: 0.01em;
margin: 0;
font-size: 1rem;
line-height: 1.6;
}
@media (min-width: 1280px) {
body {
font-size: 1.0625rem;
}
}
input,
textarea,
select,
button {
font-size: 1rem;
font-family: inherit;
}
::selection {
background: hsl(0 0% 100% / 0.15);
color: hsl(var(--foreground));
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: hsl(0 0% 4%); }
::-webkit-scrollbar-thumb { background: hsl(0 0% 18%); }
img {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; }
/* WordPress admin bar fix στο fixed header */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .site-header { top: 46px; }
}
/* -----------------------------------------------------------------------
Custom component classes (αντιστοιχούν στο @layer components του original)
----------------------------------------------------------------------- */
.font-serif-display {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
letter-spacing: -0.02em;
}
.text-eyebrow {
text-transform: uppercase;
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.4em;
color: hsl(var(--muted-foreground));
font-weight: 400;
}
.clinic-open-badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: hsl(142 45% 28%);
background: hsl(142 40% 92%);
border: 1px solid hsl(142 35% 78%);
line-height: 1.4;
}
.clinic-office-phone,
.clinic-office-address {
color: inherit;
text-decoration: none;
}
.grain::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow-soft {
box-shadow: 0 0 120px -20px hsl(0 0% 100% / 0.08);
}
.reveal {
visibility: hidden;
opacity: 0;
transform: translateY(24px);
transition: opacity 1.2s var(--ease-silk), transform 1.2s var(--ease-silk);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.hairline {
height: 1px;
width: 100%;
background: hsl(var(--border));
}
/* -----------------------------------------------------------------------
Hero overlays — εγγυημένη απόδοση χωρίς εξάρτηση από Tailwind CDN
Αντιστοιχεί στα Tailwind classes:
bg-gradient-to-r from-background via-background/70 to-background/20
bg-gradient-to-t from-background via-transparent to-background/40
----------------------------------------------------------------------- */
.hero-overlay-x {
background-image: linear-gradient(
to right,
hsl(var(--background)) 0%,
hsl(var(--background) / 0.7) 50%,
hsl(var(--background) / 0.2) 100%
);
}
.hero-overlay-y {
background-image: linear-gradient(
to top,
hsl(var(--background)) 0%,
transparent 50%,
hsl(var(--background) / 0.4) 100%
);
}
/* -----------------------------------------------------------------------
Hero — Brand variant (STREVINAS / PLASTIC SURGERY / THESSALONIKI)
Κεντραρισμένα κουτιά κειμένου με ημιδιαφανές σκούρο φόντο πάνω σε
fullscreen εικόνα. Αντιστοιχεί στο layout του reference site.
----------------------------------------------------------------------- */
.hero-brand {
background: hsl(var(--background));
}
.hero-brand-slides {
z-index: 0;
}
.hero-brand-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s var(--ease-silk);
will-change: opacity;
}
.hero-brand-slide.is-active {
opacity: 1;
z-index: 1;
}
.hero-brand-slide__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-brand-vignette {
z-index: 2;
background-image:
linear-gradient(
to bottom,
hsl(0 0% 0% / 0.35) 0%,
hsl(0 0% 0% / 0.15) 35%,
hsl(0 0% 0% / 0.35) 70%,
hsl(var(--background)) 100%
),
radial-gradient(
ellipse at center,
transparent 35%,
hsl(0 0% 0% / 0.55) 100%
);
}
.hero-brand-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
width: fit-content;
max-width: calc(100vw - 3rem);
margin: 0 auto;
}
.hero-brand-row {
margin: 0;
display: block;
background: transparent;
color: hsl(var(--foreground));
text-align: center;
line-height: 1;
text-shadow: 0 2px 24px hsl(0 0% 0% / 0.55);
}
.hero-brand-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: clamp(2.25rem, 8vw, 5.8rem);
padding: 0.05em 0;
}
.hero-brand-sub {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: clamp(1.125rem, 4vw, 3rem);
padding: 0.1em 0;
}
.hero-brand-loc {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.5rem 0;
}
.hero-brand-line {
display: block;
flex: 1 1 0;
min-width: 0;
height: 1px;
background: hsl(var(--foreground) / 0.85);
}
.hero-brand-loc-text {
display: inline-block;
flex: 0 0 auto;
font-size: clamp(0.625rem, 1vw, 1.3rem);
letter-spacing: 0.4em;
text-transform: uppercase;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.hero-brand-scroll {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
flex-direction: column;
text-decoration: none;
opacity: 0.75;
transition: opacity 0.5s var(--ease-silk);
}
.hero-brand-scroll:hover { opacity: 1; }
.hero-brand-scroll .text-eyebrow { writing-mode: vertical-rl; transform: rotate(180deg); }
/* -----------------------------------------------------------------------
Animations (αντιστοιχούν στο tailwind.config.ts)
----------------------------------------------------------------------- */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ken-burns {
from { transform: scale(1.05); }
to { transform: scale(1.15); }
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.animate-fade-in { animation: fade-in 1.6s ease-out both; }
.animate-fade-up { animation: fade-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-ken-burns{ animation: ken-burns 18s ease-out infinite alternate; }
.animate-marquee { animation: marquee 40s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.hero-brand-slide {
transition: none;
}
.hero-brand-slide:not(.is-active) {
display: none;
}
}
/* -----------------------------------------------------------------------
Before / After slider
----------------------------------------------------------------------- */
.ba-slider {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
cursor: ew-resize;
user-select: none;
background: hsl(var(--muted));
}
.ba-slider .ba-after,
.ba-slider .ba-before {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1);
}
.ba-slider .ba-before-wrap {
position: absolute;
inset: 0;
overflow: hidden;
width: 50%;
}
.ba-slider .ba-before {
width: 200%;
}
.ba-slider .ba-handle {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: hsl(var(--foreground));
left: 50%;
pointer-events: none;
}
.ba-slider .ba-handle::after {
content: '‹ ›';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border: 1px solid hsl(var(--foreground));
border-radius: 9999px;
background: hsl(var(--background) / 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
letter-spacing: 0.2em;
}
.ba-slider .ba-label {
position: absolute;
top: 1rem;
font-size: 0.75rem;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.4em;
color: hsl(var(--foreground) / 0.8);
}
.ba-slider .ba-label.left { left: 1rem; }
.ba-slider .ba-label.right { right: 1rem; }
/* -----------------------------------------------------------------------
Desktop nav — animated dropdowns with multi-level support
Hover/focus opens .sub-menu under the parent . Nested sub-menus open
to the right side. Powered purely by CSS for desktop (>=1024px).
----------------------------------------------------------------------- */
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2.5rem;
}
.site-nav__list li {
position: relative;
margin: 0;
}
.site-nav__list a,
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
color: inherit;
padding: 0.5rem 0;
transition: color 0.5s var(--ease-silk);
}
.site-nav__link-text {
display: inline-block;
font-size: 0.75rem;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.25em;
/* Idle: near-white for legibility on the dark header.
* Hover/active state below ramps to pure white. */
color: hsl(0 0% 92%);
transition: color 0.5s var(--ease-silk);
}
.site-nav__list a:hover .site-nav__link-text,
.site-nav__list a:focus-visible .site-nav__link-text,
.site-nav__list .menu-item-has-children:hover > a > .site-nav__link-text,
.site-nav__list .menu-item-has-children:focus-within > a > .site-nav__link-text,
.site-nav__list .current-menu-item > a > .site-nav__link-text,
.site-nav__list .current-menu-ancestor > a > .site-nav__link-text {
color: hsl(0 0% 100%);
}
.site-nav__list a:focus-visible {
outline: none;
}
/* Chevron indicator for items with a sub-menu */
.site-nav__list .menu-item-has-children > a::after {
content: '';
width: 5px;
height: 5px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk);
margin-left: 0.15rem;
display: inline-block;
color: hsl(var(--muted-foreground));
}
.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translate(-1px, -1px);
color: hsl(var(--foreground));
}
/* Sub-menus: absolute panel under the parent */
.site-nav__list .sub-menu {
list-style: none;
margin: 0;
padding: 0.5rem 0;
position: absolute;
top: 100%;
left: 50%;
min-width: 240px;
max-width: 360px;
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
box-shadow: 0 30px 80px -25px hsl(0 0% 0% / 0.7);
display: flex;
flex-direction: column;
gap: 0;
transform: translate(-50%, -8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.4s var(--ease-silk),
transform 0.5s var(--ease-silk),
visibility 0s linear 0.4s;
z-index: 60;
}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition-delay: 0s;
}
/* Nested sub-menus open to the right */
.site-nav__list .sub-menu .sub-menu {
top: -0.5rem;
left: 100%;
transform: translate(-8px, 0);
}
.site-nav__list .sub-menu .menu-item-has-children:hover > .sub-menu,
.site-nav__list .sub-menu .menu-item-has-children:focus-within > .sub-menu {
transform: translate(0, 0);
}
/* Sub-menu item styling */
.site-nav__list .sub-menu li {
margin: 0;
position: relative;
}
.site-nav__list .sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 1.25rem;
width: 100%;
}
.site-nav__list .sub-menu .site-nav__link-text {
font-size: 0.7rem;
letter-spacing: 0.22em;
white-space: normal;
display: inline-block;
flex: 1 1 auto;
min-width: 0;
}
.site-nav__list .sub-menu a:hover {
background: hsl(var(--accent));
}
/* Right-pointing chevron for nested parents — sits on the same row as the
* link text via the flex layout above. */
.site-nav__list .sub-menu .menu-item-has-children > a::after {
margin-left: 0;
flex: 0 0 auto;
transform: rotate(-45deg) translate(0, -1px);
}
.site-nav__list .sub-menu .menu-item-has-children:hover > a::after,
.site-nav__list .sub-menu .menu-item-has-children:focus-within > a::after {
transform: rotate(135deg) translate(0, -1px);
}
/* Hover bridge: tiny invisible strip removes the visual gap between trigger
* and sub-menu so the hover state isn't lost when crossing it. */
.site-nav__list .menu-item-has-children > .sub-menu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
}
.site-nav__list .sub-menu .menu-item-has-children > .sub-menu::before {
left: -10px;
right: auto;
top: 0;
bottom: 0;
width: 10px;
height: auto;
}
/* -----------------------------------------------------------------------
Mega menu — auto-detected via :has(): when an L1 item has L2 children
that themselves have L3 children, the L1's sub-menu becomes a wide grid
panel anchored to the header inner container (.site-header__inner).
The L2 items render as column headers with their L3 children listed
below as a flat, always-visible list.
Opt-out: add .no-mega CSS class to the L1 menu item in WP admin to
force a regular cascading dropdown for that item even though the
structure would otherwise trigger mega rendering.
----------------------------------------------------------------------- */
/* The L1 trigger goes static so the panel is positioned relative to the
* nearest positioned ancestor (.site-header__inner) instead of the trigger
* . This lets the panel span the full inner container width. */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) {
position: static;
}
/* Hover bridge on the trigger anchor itself: because the panel is anchored
* to .site-header__inner (top: 100% = bottom of the 80px header), there is
* a ~24px gap between the visible bottom of the anchor and the top of the
* panel. Without bridging this gap, moving the cursor diagonally toward
* the panel makes the user lose the trigger's :hover state mid-flight and
* the panel starts closing (pointer-events: none kicks in immediately).
* The ::before below is an invisible extension of the anchor's hit area
* that fills the gap, keeping the trigger li hovered while the cursor
* crosses it. */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > a {
position: relative;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > a::before {
content: '';
position: absolute;
left: -0.5rem;
right: -0.5rem;
top: 100%;
height: 28px;
}
/* The mega panel itself — centered to .site-header__inner, fixed-ish width */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu {
top: 100%;
left: 50%;
right: auto;
width: min(960px, calc(100vw - 4rem));
min-width: 0;
max-width: none;
transform: translate(-50%, -12px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem 2rem;
padding: 2rem 2.25rem 2.25rem;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children):hover > .sub-menu,
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children):focus-within > .sub-menu {
transform: translate(-50%, 0);
}
/* Hover bridge for mega panel — connects the L1 trigger to the wide panel */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu::before {
left: 0;
right: 0;
top: -12px;
height: 12px;
}
/* Each L2 becomes a column */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li {
position: static;
margin: 0;
}
/* L2 link = column header (e.g. ΠΡΟΣΩΠΟ, ΣΤΗΘΟΣ, ΣΩΜΑ, ΕΠΑΝΟΡΘΩΤΙΚΕΣ) */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > a {
display: block;
padding: 0 0 0.7rem;
margin-bottom: 0.65rem;
width: 100%;
border-bottom: 1px solid hsl(var(--border));
background: transparent;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > a:hover {
background: transparent;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > a > .site-nav__link-text {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--foreground));
white-space: normal;
display: inline-block;
}
/* No chevron on column headers (L3 list is always visible inside the panel) */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > a::after {
display: none;
}
/* Opt-out: L2 items with .mega-no-header (added in WP admin under
* "CSS Classes (optional)") render no column header — only their L3 list.
* Use this for placeholder/grouping-only L2 items that have no real page.
* Selector mirrors the column-header depth so it wins on specificity. */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li.mega-no-header > a {
display: none;
}
/* L3 sub-menu inside mega = vertical list, no animation, no own hover.
* Visibility/opacity inherit from the L1 mega panel, so when the panel
* is closed the entire subtree is properly hidden from screen-readers
* and the accessibility tree. */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu {
position: static;
display: flex;
flex-direction: column;
gap: 0.05rem;
padding: 0;
margin: 0;
background: transparent;
border: none;
box-shadow: none;
min-width: 0;
max-width: none;
width: 100%;
opacity: 1;
visibility: inherit;
pointer-events: inherit;
transform: none;
transition: none;
}
/* Disable the hover bridge for nested mega sub-menus */
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu::before {
content: none;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li {
position: static;
margin: 0;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a {
display: block;
padding: 0.4rem 0;
background: transparent;
justify-content: flex-start;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a:hover,
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a:focus-visible {
background: transparent;
outline: none;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a::after {
display: none;
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a > .site-nav__link-text {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: hsl(var(--muted-foreground));
white-space: normal;
display: inline-block;
transition: color 0.4s var(--ease-silk);
}
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a:hover > .site-nav__link-text,
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu > li > .sub-menu > li > a:focus-visible > .site-nav__link-text {
color: hsl(var(--foreground));
}
/* On smaller desktop widths, drop to 2 columns gracefully */
@media (max-width: 1199px) {
.site-nav__list > .menu-item-has-children:not(.no-mega):has(> .sub-menu > .menu-item-has-children) > .sub-menu {
width: min(720px, calc(100vw - 3rem));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1.75rem;
padding: 1.75rem 2rem;
}
}
/* -----------------------------------------------------------------------
Mobile nav — off-canvas sidebar, toggled by JS via data-open
----------------------------------------------------------------------- */
.site-mobile-nav {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.6s;
}
.site-mobile-nav[data-open="true"] {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.site-mobile-nav__backdrop {
position: absolute;
inset: 0;
background: hsl(var(--background) / 0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.6s var(--ease-silk);
cursor: pointer;
}
.site-mobile-nav[data-open="true"] .site-mobile-nav__backdrop {
opacity: 1;
}
.site-mobile-nav__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 88vw);
background: hsl(var(--background));
border-left: 1px solid hsl(var(--border));
box-shadow: -30px 0 80px -20px hsl(0 0% 0% / 0.6);
transform: translateX(100%);
transition: transform 0.6s var(--ease-silk);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.site-mobile-nav[data-open="true"] .site-mobile-nav__panel {
transform: translateX(0);
}
.site-mobile-nav__panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid hsl(var(--border));
flex: 0 0 auto;
}
.site-mobile-nav__brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
color: inherit;
}
.site-mobile-nav__close {
position: relative;
width: 38px;
height: 38px;
background: transparent;
border: 1px solid hsl(var(--border));
cursor: pointer;
border-radius: 9999px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.4s var(--ease-silk), background 0.4s var(--ease-silk);
}
.site-mobile-nav__close:hover,
.site-mobile-nav__close:focus-visible {
border-color: hsl(var(--foreground));
background: hsl(var(--accent));
outline: none;
}
.site-mobile-nav__close span {
position: absolute;
width: 14px;
height: 1px;
background: hsl(var(--foreground));
left: 50%;
top: 50%;
}
.site-mobile-nav__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.site-mobile-nav__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.site-mobile-nav__menu {
padding: 2rem 1.75rem;
flex: 1 1 auto;
}
.site-mobile-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.site-mobile-nav__list li {
margin: 0;
position: relative;
}
.site-mobile-nav__list .menu-item-has-children {
display: flex;
flex-direction: column;
}
.site-mobile-nav__list .menu-item-has-children > a {
padding-right: 3rem;
}
/* Top-level link styling */
.site-mobile-nav__list > li > a,
.site-mobile-nav__list .site-mobile-nav__link {
display: inline-block;
text-decoration: none;
color: hsl(var(--foreground));
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: 0.01em;
padding: 0.55rem 0;
transition: color 0.5s var(--ease-silk), letter-spacing 0.5s var(--ease-silk), opacity 0.5s var(--ease-silk);
opacity: 0.78;
}
.site-mobile-nav__list > li > a:hover,
.site-mobile-nav__list > li > a:focus-visible {
opacity: 1;
letter-spacing: 0.04em;
outline: none;
}
.site-mobile-nav__list .site-mobile-nav__link-text {
display: inline-block;
}
/* Toggle button injected by JS for items with sub-menu */
.site-mobile-nav__toggle {
position: absolute;
top: 0.45rem;
right: 0;
width: 36px;
height: 36px;
border-radius: 9999px;
background: transparent;
border: 1px solid hsl(var(--border));
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.4s var(--ease-silk), border-color 0.4s var(--ease-silk);
}
.site-mobile-nav__toggle:hover,
.site-mobile-nav__toggle:focus-visible {
background: hsl(var(--accent));
border-color: hsl(var(--foreground));
outline: none;
}
.site-mobile-nav__chevron {
width: 7px;
height: 7px;
border-right: 1px solid hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--foreground));
transform: rotate(45deg) translate(-1.5px, -1.5px);
transition: transform 0.5s var(--ease-silk);
display: inline-block;
}
.site-mobile-nav__list [data-submenu-open="true"] > .site-mobile-nav__toggle .site-mobile-nav__chevron {
transform: rotate(225deg) translate(-1.5px, -1.5px);
}
/* Sub-menus: animated accordion (max-height set by JS to scrollHeight) */
.site-mobile-nav__list .sub-menu {
list-style: none;
margin: 0.25rem 0 0.5rem;
padding: 0 0 0 1rem;
border-left: 1px solid hsl(var(--border));
display: flex;
flex-direction: column;
gap: 0.15rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s var(--ease-silk), opacity 0.4s var(--ease-silk);
opacity: 0;
}
.site-mobile-nav__list [data-submenu-open="true"] > .sub-menu {
opacity: 1;
}
.site-mobile-nav__list .sub-menu li {
margin: 0;
}
.site-mobile-nav__list .sub-menu a {
display: block;
text-decoration: none;
color: hsl(var(--muted-foreground));
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
line-height: 1.3;
letter-spacing: 0.02em;
padding: 0.45rem 0;
transition: color 0.4s var(--ease-silk), padding-left 0.4s var(--ease-silk);
}
.site-mobile-nav__list .sub-menu a:hover,
.site-mobile-nav__list .sub-menu a:focus-visible {
color: hsl(var(--foreground));
padding-left: 0.35rem;
outline: none;
}
.site-mobile-nav__list .sub-menu .site-mobile-nav__link-text {
display: inline-block;
}
/* Deeper sub-menus get a slightly smaller text */
.site-mobile-nav__list .sub-menu .sub-menu a {
font-size: 1rem;
}
/* Flattened mega L2 placeholders (added by main.js initMobileNavAccordion).
* The L2 anchor is hidden and its inner L3 sub-menu is rendered inline,
* with no own animation/border, so the L3 list appears as a flat list
* directly under the L1 accordion. */
.site-mobile-nav__list .strevinas-flatten {
margin: 0;
list-style: none;
}
.site-mobile-nav__list .strevinas-flatten > a {
display: none;
}
.site-mobile-nav__list .strevinas-flatten > .sub-menu {
max-height: none;
overflow: visible;
opacity: 1;
margin: 0;
padding: 0;
border-left: none;
transition: none;
}
.site-mobile-nav__footer {
padding: 1.5rem 1.75rem 1.75rem;
border-top: 1px solid hsl(var(--border));
display: flex;
flex-direction: column;
gap: 0.85rem;
flex: 0 0 auto;
}
.site-mobile-nav__cta {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: hsl(var(--foreground));
border: 1px solid hsl(var(--border));
padding: 0.95rem 1rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.32em;
transition: background 0.5s var(--ease-silk), color 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk);
}
.site-mobile-nav__cta:hover,
.site-mobile-nav__cta:focus-visible {
background: hsl(var(--foreground));
color: hsl(var(--background));
border-color: hsl(var(--foreground));
outline: none;
}
.site-mobile-nav__contact {
text-decoration: none;
color: hsl(var(--muted-foreground));
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-align: center;
transition: color 0.4s var(--ease-silk);
}
.site-mobile-nav__contact:hover,
.site-mobile-nav__contact:focus-visible {
color: hsl(var(--foreground));
outline: none;
}
.site-burger {
position: relative;
z-index: 70;
}
.site-burger span {
display: block;
height: 1px;
background: hsl(var(--foreground));
transition: transform 0.4s var(--ease-silk), opacity 0.3s var(--ease-silk);
}
.site-burger[data-open="true"] span:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.site-burger[data-open="true"] span:nth-child(2) { opacity: 0; }
.site-burger[data-open="true"] span:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
/* While the off-canvas sidebar is open, hide the header burger so only the
* close control inside the panel remains visible (cleaner luxury feel).
*/
body.mobile-nav-open .site-burger {
opacity: 0;
pointer-events: none;
}
body.mobile-nav-open {
overflow: hidden;
}
/* -----------------------------------------------------------------------
Site header scroll state
----------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
transition: background-color 0.7s var(--ease-silk), backdrop-filter 0.7s var(--ease-silk), border-color 0.7s var(--ease-silk);
background: transparent;
border-bottom: 1px solid transparent;
}
.site-header[data-scrolled="true"] {
background: hsl(var(--background) / 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: hsl(var(--border));
}
.site-header__desktop {
margin-left: auto;
}
.site-header__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
color: hsl(0 0% 100% / 0.72);
text-decoration: none;
border-radius: 9999px;
transition: color 0.35s ease, background-color 0.35s ease, opacity 0.35s ease;
}
.site-header__social-link:hover,
.site-header__social-link:focus-visible {
color: hsl(var(--foreground));
background: hsl(var(--foreground) / 0.08);
}
.site-header[data-scrolled="true"] .site-header__social-link {
color: hsl(var(--muted-foreground));
}
.site-header[data-scrolled="true"] .site-header__social-link:hover,
.site-header[data-scrolled="true"] .site-header__social-link:focus-visible {
color: hsl(var(--foreground));
background: hsl(var(--foreground) / 0.06);
}
.site-mobile-nav__social {
margin-bottom: 1.25rem;
}
.site-mobile-nav__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: hsl(var(--muted-foreground));
text-decoration: none;
border: 1px solid hsl(var(--border));
border-radius: 9999px;
transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
.site-mobile-nav__social-link:hover,
.site-mobile-nav__social-link:focus-visible {
color: hsl(var(--foreground));
border-color: hsl(var(--foreground) / 0.35);
background: hsl(var(--foreground) / 0.04);
}
/* -----------------------------------------------------------------------
Services — luxury repeatable cards (Πρόσωπο / Σώμα / Στήθος / Θεραπείες …)
Mobile-first, animated, responsive. Διαχείριση από Customizer.
----------------------------------------------------------------------- */
.services-section {
position: relative;
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 700px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1100px) {
.services-grid { gap: 2rem; }
}
.service-card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
color: inherit;
background: hsl(var(--card));
isolation: isolate;
border: 1px solid hsl(var(--border));
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
box-shadow 0.9s var(--ease-silk);
-webkit-tap-highlight-color: transparent;
}
.service-card:focus-visible {
outline: 1px solid hsl(var(--foreground));
outline-offset: 4px;
}
.service-card-frame {
position: absolute;
inset: 0.75rem;
border: 1px solid hsl(var(--foreground) / 0);
pointer-events: none;
z-index: 3;
transition: border-color 0.9s var(--ease-silk), inset 0.9s var(--ease-silk);
}
.service-card-media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: hsl(var(--muted));
}
@media (min-width: 700px) {
.service-card-media { aspect-ratio: 3 / 4; }
}
@media (min-width: 1280px) {
.service-card-media { aspect-ratio: 4 / 5; }
}
.service-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.78) contrast(1.02);
transform: scale(1.04);
transition: transform 1.8s var(--ease-silk),
filter 1.2s var(--ease-silk);
will-change: transform, filter;
}
.service-card-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
to top,
hsl(var(--background)) 0%,
hsl(var(--background) / 0.85) 18%,
hsl(var(--background) / 0.35) 45%,
transparent 75%
),
radial-gradient(
ellipse at center,
transparent 50%,
hsl(0 0% 0% / 0.45) 100%
);
}
.service-card-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem 1.5rem 1.75rem;
}
@media (min-width: 700px) {
.service-card-content { padding: 2rem 2rem 2.25rem; }
}
@media (min-width: 1100px) {
.service-card-content { padding: 2.75rem 2.75rem 3rem; }
}
@media (min-width: 1400px) {
.service-card-content { padding: 3.25rem 3.25rem 3.5rem; }
}
.service-card-num {
display: inline-block;
margin-bottom: 1rem;
color: hsl(var(--foreground) / 0.7);
transition: color 0.6s var(--ease-silk);
}
.service-card-title {
font-size: clamp(1.75rem, 5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.01em;
font-weight: 400;
color: hsl(var(--foreground));
margin: 0 0 0.85rem;
text-shadow: 0 2px 28px hsl(0 0% 0% / 0.45);
}
@media (min-width: 1280px) {
.service-card-title { font-size: clamp(2.125rem, 2.5vw, 3.25rem); }
}
.service-card-desc {
color: hsl(var(--foreground) / 0.78);
font-size: 0.95rem;
line-height: 1.65;
max-width: 42ch;
margin: 0 0 1.5rem;
text-shadow: 0 1px 12px hsl(0 0% 0% / 0.4);
}
@media (min-width: 1024px) {
.service-card-desc {
opacity: 0;
max-height: 0;
margin-bottom: 0;
transform: translateY(10px);
transition: opacity 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
max-height 0.9s var(--ease-silk),
margin-bottom 0.9s var(--ease-silk);
}
.service-card:hover .service-card-desc,
.service-card:focus-within .service-card-desc {
opacity: 1;
max-height: 14rem;
transform: translateY(0);
margin-bottom: 1.5rem;
}
}
.service-card-cta {
display: inline-flex;
align-items: center;
gap: 0.85rem;
width: fit-content;
padding-bottom: 0.45rem;
border-bottom: 1px solid hsl(var(--foreground) / 0.35);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.32em;
font-weight: 500;
color: hsl(var(--foreground));
transition: border-color 0.7s var(--ease-silk),
letter-spacing 0.9s var(--ease-silk),
gap 0.7s var(--ease-silk);
}
.service-card-cta-arrow {
display: inline-block;
transition: transform 0.7s var(--ease-silk);
}
/* Hover / focus state — desktop & touch-friendly */
@media (hover: hover) {
.service-card:hover {
border-color: hsl(var(--foreground) / 0.45);
transform: translateY(-2px);
box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.7);
}
.service-card:hover .service-card-media img {
transform: scale(1.1);
filter: grayscale(0.25) brightness(0.92) contrast(1.04);
}
.service-card:hover .service-card-frame {
border-color: hsl(var(--foreground) / 0.28);
inset: 0.5rem;
}
.service-card:hover .service-card-num { color: hsl(var(--foreground)); }
.service-card:hover .service-card-cta {
border-color: hsl(var(--foreground));
letter-spacing: 0.4em;
gap: 1.15rem;
}
.service-card:hover .service-card-cta-arrow {
transform: translateX(8px);
}
}
/* Reduced motion — keep elegance, drop motion */
@media (prefers-reduced-motion: reduce) {
.service-card,
.service-card-frame,
.service-card-media img,
.service-card-desc,
.service-card-cta,
.service-card-cta-arrow,
.service-card-num {
transition: none !important;
}
.service-card-media img { transform: none; }
}
/* -----------------------------------------------------------------------
Επεμβάσεις — κάρτες πλέγματος (front page)
----------------------------------------------------------------------- */
.procedures-section {
position: relative;
}
.procedures-section__lead-wrap {
flex-shrink: 0;
max-width: 24rem;
padding-left: 0;
border-left: none;
}
@media (min-width: 768px) {
.procedures-section__lead-wrap {
padding-left: 1.75rem;
border-left: 1px solid hsl(var(--border));
}
}
.procedures-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
align-items: stretch;
}
@media (min-width: 640px) {
.procedures-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1200px) {
.procedures-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
}
@media (min-width: 1400px) {
.procedures-grid { gap: 1.5rem; }
}
.procedure-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 28rem;
text-decoration: none;
color: inherit;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
overflow: hidden;
isolation: isolate;
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
box-shadow 0.9s var(--ease-silk);
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
.procedure-card { min-height: 32rem; }
}
@media (min-width: 1200px) {
.procedure-card { min-height: 36rem; }
}
.procedure-card:focus-visible {
outline: 1px solid hsl(var(--foreground));
outline-offset: 4px;
}
.procedure-card__head {
position: relative;
z-index: 2;
flex: 0 0 auto;
display: grid;
grid-template-rows: auto 3.75rem auto 5.5rem;
row-gap: 1rem;
padding: 1.75rem 1.5rem 1.25rem;
}
@media (min-width: 768px) {
.procedure-card__head {
padding: 2rem 1.75rem 1.5rem;
grid-template-rows: auto 4.25rem auto 5.75rem;
}
}
@media (min-width: 1200px) {
.procedure-card__head {
padding: 2.25rem 2rem 1.5rem;
grid-template-rows: auto 4.5rem auto 6rem;
}
}
.procedure-card__num {
display: block;
margin-bottom: 1.25rem;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 6vw, 3.75rem);
font-weight: 300;
line-height: 1;
letter-spacing: 0.08em;
color: hsl(var(--foreground) / 0.55);
transition: color 0.6s var(--ease-silk);
}
.procedure-card__title {
margin: 0;
font-size: clamp(1.5rem, 3.5vw, 2rem);
line-height: 1.1;
letter-spacing: -0.01em;
font-weight: 400;
color: hsl(var(--foreground));
align-self: start;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.procedure-card__rule {
display: block;
width: 2.5rem;
height: 1px;
margin: 0;
align-self: center;
background: hsl(var(--foreground) / 0.28);
transition: width 0.8s var(--ease-silk), background 0.6s var(--ease-silk);
}
.procedure-card__desc {
margin: 0;
font-size: 0.8125rem;
line-height: 1.65;
color: hsl(var(--muted-foreground));
max-width: none;
align-self: start;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
.procedure-card__desc:empty {
visibility: hidden;
}
.procedure-card__media {
position: relative;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 4 / 5;
margin-top: 0;
overflow: hidden;
background: hsl(var(--background));
}
.procedure-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: grayscale(1) brightness(0.78) contrast(1.02);
transform: scale(1.03);
transition: transform 1.6s var(--ease-silk), filter 1.1s var(--ease-silk);
will-change: transform, filter;
}
.procedure-card__fade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
hsl(var(--card)) 0%,
hsl(var(--card) / 0.92) 22%,
hsl(var(--card) / 0.45) 50%,
transparent 78%
);
}
.procedure-card__cta {
position: absolute;
left: 1.5rem;
bottom: 1.5rem;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid hsl(var(--foreground) / 0.55);
border-radius: 50%;
color: hsl(var(--foreground));
background: hsl(var(--background) / 0.35);
backdrop-filter: blur(6px);
transition: border-color 0.6s var(--ease-silk),
background 0.6s var(--ease-silk),
transform 0.7s var(--ease-silk);
}
@media (min-width: 768px) {
.procedure-card__cta {
left: 1.75rem;
bottom: 1.75rem;
width: 3rem;
height: 3rem;
}
}
.procedure-card__cta-arrow {
display: inline-block;
font-size: 1rem;
line-height: 1;
transition: transform 0.7s var(--ease-silk);
}
@media (hover: hover) {
.procedure-card:hover {
border-color: hsl(var(--foreground) / 0.45);
transform: translateY(-2px);
box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.7);
}
.procedure-card:hover .procedure-card__num {
color: hsl(var(--foreground));
}
.procedure-card:hover .procedure-card__rule {
width: 3.5rem;
background: hsl(var(--foreground) / 0.5);
}
.procedure-card:hover .procedure-card__media img {
transform: scale(1.08);
filter: grayscale(0.2) brightness(0.88) contrast(1.04);
}
.procedure-card:hover .procedure-card__cta {
border-color: hsl(var(--foreground));
background: hsl(var(--foreground) / 0.08);
}
.procedure-card:hover .procedure-card__cta-arrow {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.procedure-card,
.procedure-card__num,
.procedure-card__rule,
.procedure-card__media img,
.procedure-card__cta,
.procedure-card__cta-arrow {
transition: none !important;
}
.procedure-card__media img { transform: none; }
}
/* -----------------------------------------------------------------------
Δημοφιλείς Θεραπείες — Infinity loop carousel (pause on hover)
Pure-CSS marquee με translateX(-50%) ώστε το διπλασιασμένο track να
επιστρέφει αδιόρατα στην αρχή. Το hover/focus παγώνει την κίνηση.
----------------------------------------------------------------------- */
.popular-section {
position: relative;
}
.popular-carousel {
position: relative;
width: 100%;
--popular-speed: 70s;
}
.popular-carousel__viewport {
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
#000 80px,
#000 calc(100% - 80px),
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0,
#000 80px,
#000 calc(100% - 80px),
transparent 100%
);
/* Επιτρέπουμε vertical scroll στο page· το horizontal pan το χειρίζεται το JS. */
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
/* Cursor affordance όταν το JS έχει αναλάβει τον έλεγχο. */
.popular-carousel.is-js .popular-carousel__viewport { cursor: grab; }
.popular-carousel .popular-carousel__viewport.is-dragging { cursor: grabbing; }
/* Καμία προεπισκόπηση εικόνας από browser drag (αλλιώς "κολλάει" στο
* pointer το ghost image και χάνεται το tracking). */
.popular-carousel img { -webkit-user-drag: none; user-drag: none; }
.popular-carousel__track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
width: max-content;
gap: 1.25rem;
animation: popular-scroll var(--popular-speed) linear infinite;
will-change: transform;
}
@media (min-width: 768px) {
.popular-carousel__track { gap: 1.75rem; }
}
@media (min-width: 1280px) {
.popular-carousel__track { gap: 2.25rem; }
}
@keyframes popular-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Pause on hover / focus / when reduced motion is requested */
.popular-carousel:hover .popular-carousel__track,
.popular-carousel:focus-within .popular-carousel__track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.popular-carousel__track {
animation: none;
transform: none;
}
}
/* Soft fade edges (non-mask fallback for older browsers) */
.popular-carousel__edge {
position: absolute;
top: 0;
bottom: 0;
width: 96px;
pointer-events: none;
z-index: 2;
}
.popular-carousel__edge--left {
left: 0;
background: linear-gradient(
to right,
hsl(var(--background)) 0%,
hsl(var(--background) / 0) 100%
);
}
.popular-carousel__edge--right {
right: 0;
background: linear-gradient(
to left,
hsl(var(--background)) 0%,
hsl(var(--background) / 0) 100%
);
}
@supports (mask-image: linear-gradient(to right, transparent, #000)) or
(-webkit-mask-image: linear-gradient(to right, transparent, #000)) {
.popular-carousel__edge { display: none; }
}
/* Card */
.popular-card {
flex: 0 0 auto;
width: 78vw;
max-width: 320px;
margin: 0;
}
@media (min-width: 700px) {
.popular-card { width: 320px; }
}
@media (min-width: 1100px) {
.popular-card { width: 340px; }
}
@media (min-width: 1400px) {
.popular-card { width: 360px; }
}
.popular-card__link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
height: 100%;
overflow: hidden;
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
box-shadow 0.9s var(--ease-silk);
}
.popular-card__link:focus-visible {
outline: 1px solid hsl(var(--foreground));
outline-offset: 4px;
}
.popular-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: hsl(var(--muted));
}
.popular-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.78) contrast(1.02);
transform: scale(1.04);
transition: transform 1.8s var(--ease-silk),
filter 1.2s var(--ease-silk);
will-change: transform, filter;
}
.popular-card__overlay {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
to top,
hsl(var(--card)) 0%,
hsl(var(--card) / 0.55) 22%,
transparent 60%
);
}
.popular-card__body {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1.5rem 1.5rem 1.75rem;
flex: 1 1 auto;
}
.popular-card__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
letter-spacing: -0.01em;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.1;
margin: 0;
color: hsl(var(--foreground));
}
.popular-card__desc {
font-size: 0.875rem;
line-height: 1.6;
color: hsl(var(--muted-foreground));
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popular-card__cta {
margin-top: auto;
padding-top: 1rem;
display: inline-flex;
align-items: center;
gap: 0.65rem;
width: fit-content;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.32em;
font-weight: 500;
color: hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--foreground) / 0.25);
padding-bottom: 0.4rem;
transition: border-color 0.7s var(--ease-silk),
letter-spacing 0.9s var(--ease-silk),
gap 0.7s var(--ease-silk);
}
.popular-card__cta-arrow {
display: inline-block;
transition: transform 0.7s var(--ease-silk);
}
@media (hover: hover) {
.popular-card__link:hover {
border-color: hsl(var(--foreground) / 0.45);
transform: translateY(-2px);
box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.7);
}
.popular-card__link:hover .popular-card__media img {
transform: scale(1.1);
filter: grayscale(0.2) brightness(0.92) contrast(1.04);
}
.popular-card__link:hover .popular-card__cta {
border-color: hsl(var(--foreground));
letter-spacing: 0.4em;
gap: 1rem;
}
.popular-card__link:hover .popular-card__cta-arrow {
transform: translateX(8px);
}
}
@media (prefers-reduced-motion: reduce) {
.popular-card__link,
.popular-card__media img,
.popular-card__cta,
.popular-card__cta-arrow {
transition: none !important;
}
.popular-card__media img { transform: none; }
}
/* -------------------------------------------------------------------------
Hub «Πριν & Μετά» (page-prin-kai-meta.php)
------------------------------------------------------------------------- */
.strevinas-hub__rule {
display: block;
width: 2.75rem;
height: 2px;
margin-top: 1.75rem;
border-radius: 2px;
background: linear-gradient(
90deg,
hsl(var(--primary)),
hsl(var(--accent))
);
}
/* Hub heroes — full-width headline block, balanced type scale */
.strevinas-hub__hero :is(.max-w-4xl, .max-w-3xl, .max-w-2xl),
.strevinas-product__hero :is(.max-w-4xl, .max-w-3xl) {
max-width: 100%;
width: 100%;
}
.strevinas-hub__hero .max-w-4xl > p.font-serif-display,
.strevinas-product__hero .max-w-4xl > p.font-serif-display {
max-width: min(44rem, 100%);
}
/* Serif display headings — override oversized Tailwind utilities site-wide */
:is(h1, h2, h3).font-serif-display {
letter-spacing: 0.01em;
}
h1.font-serif-display {
font-size: clamp(2rem, 3.8vw, 3.125rem) !important;
line-height: 1.12 !important;
}
h2.font-serif-display {
font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important;
line-height: 1.14 !important;
}
h3.font-serif-display {
font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
line-height: 1.2 !important;
}
.strevinas-hub__group {
margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.strevinas-hub__group:last-child {
margin-bottom: 0;
}
.strevinas-hub__group-title {
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
padding-bottom: 0.65rem;
border-bottom: 1px solid hsl(var(--border));
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
font-weight: 500;
letter-spacing: 0.02em;
color: hsl(var(--foreground));
}
.strevinas-hub-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: stretch;
}
@media (min-width: 700px) {
.strevinas-hub-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.strevinas-hub-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1400px) {
.strevinas-hub-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.strevinas-hub-grid .popular-card {
flex: none;
display: flex;
width: 100%;
max-width: none;
height: 100%;
}
.strevinas-hub-grid .popular-card__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 100%;
}
.strevinas-hub-grid .popular-card__media {
flex: 0 0 auto;
}
/* Σταθερές ζώνες τίτλου / περιγραφής — ίδια ευθυγράμμιση σε όλες τις στήλες */
.strevinas-hub-grid .popular-card__body {
display: grid;
grid-template-rows: 4.25rem 4.2rem 1fr auto;
row-gap: 0.55rem;
flex: 1 1 auto;
gap: 0;
}
@media (min-width: 768px) {
.strevinas-hub-grid .popular-card__body {
grid-template-rows: 4.75rem 4.2rem 1fr auto;
}
}
@media (min-width: 1100px) {
.strevinas-hub-grid .popular-card__body {
grid-template-rows: 5rem 4.2rem 1fr auto;
}
}
.strevinas-hub-grid .popular-card__title {
margin: 0;
align-self: start;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.strevinas-hub-grid .popular-card__desc {
margin: 0;
align-self: start;
}
.strevinas-hub-grid .popular-card__desc:empty {
display: none;
}
.strevinas-hub-grid .popular-card__cta {
margin-top: 0;
align-self: start;
}
/* Όταν η κάρτα δεν έχει περιγραφή, μάζεψε το body — αλλά κράτα σταθερή ζώνη
τίτλου ώστε τα CTA να ευθυγραμμίζονται σε όλες τις κάρτες της γραμμής,
ανεξαρτήτως αν ο τίτλος είναι 1 ή 2 γραμμές. */
.strevinas-hub-grid .popular-card__link:has(.popular-card__desc:empty) .popular-card__body,
.strevinas-hub-grid .popular-card__link:not(:has(.popular-card__desc)) .popular-card__body {
display: grid;
grid-template-rows: 4.25rem auto;
row-gap: 0.9rem;
flex: 0 0 auto;
}
@media (min-width: 768px) {
.strevinas-hub-grid .popular-card__link:has(.popular-card__desc:empty) .popular-card__body,
.strevinas-hub-grid .popular-card__link:not(:has(.popular-card__desc)) .popular-card__body {
grid-template-rows: 4.75rem auto;
}
}
@media (min-width: 1100px) {
.strevinas-hub-grid .popular-card__link:has(.popular-card__desc:empty) .popular-card__body,
.strevinas-hub-grid .popular-card__link:not(:has(.popular-card__desc)) .popular-card__body {
grid-template-rows: 4rem auto;
}
}
/* -------------------------------------------------------------------------
Σελίδα «Νέα» — blog index & single post
------------------------------------------------------------------------- */
.strevinas-news-grid .popular-card.reveal {
visibility: hidden;
opacity: 0;
transform: translateY(24px);
}
.strevinas-news-grid .popular-card.reveal.in {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.popular-card__date {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
padding: 0.35rem 0.65rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--foreground));
background: hsl(var(--background) / 0.82);
border: 1px solid hsl(var(--border));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.strevinas-news__pagination {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px solid hsl(var(--border));
}
.strevinas-news__pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
}
.strevinas-news__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0.35rem 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
color: hsl(var(--muted-foreground));
border: 1px solid transparent;
transition: color 0.7s var(--ease-silk),
border-color 0.7s var(--ease-silk),
background 0.7s var(--ease-silk);
}
.strevinas-news__pagination .page-numbers:hover,
.strevinas-news__pagination .page-numbers:focus-visible {
color: hsl(var(--foreground));
border-color: hsl(var(--border));
}
.strevinas-news__pagination .page-numbers.current {
color: hsl(var(--foreground));
border-color: hsl(var(--foreground) / 0.35);
background: hsl(var(--card));
}
.strevinas-news__pagination .prev,
.strevinas-news__pagination .next {
letter-spacing: 0.28em;
}
.strevinas-news__back {
color: inherit;
text-decoration: none;
transition: color 0.7s var(--ease-silk);
}
.strevinas-news__back:hover,
.strevinas-news__back:focus-visible {
color: hsl(var(--foreground));
}
.strevinas-news__back-sep {
margin: 0 0.65rem;
opacity: 0.8;
}
.strevinas-news__footer .popular-card__cta {
flex-direction: row-reverse;
}
.strevinas-news__footer .popular-card__cta-arrow {
transform: translateX(0);
}
@media (hover: hover) {
.strevinas-news__footer .popular-card__cta:hover .popular-card__cta-arrow {
transform: translateX(-8px);
}
}
/* Single article — layout, TOC, typography */
.strevinas-news--single .strevinas-news__meta-sep {
margin: 0 0.5rem;
opacity: 0.8;
}
.strevinas-news__reading-time {
color: hsl(var(--muted-foreground));
}
.strevinas-news__layout {
display: block;
}
.strevinas-news__layout--with-toc {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
@media (min-width: 1100px) {
.strevinas-news__layout--with-toc {
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: clamp(2.5rem, 5vw, 5rem);
}
}
.strevinas-news__toc-mobile {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.25rem, 3vw, 1.75rem);
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.45);
}
@media (min-width: 1100px) {
.strevinas-news__toc-mobile {
display: none;
}
}
.strevinas-news__toc {
display: none;
}
@media (min-width: 1100px) {
.strevinas-news__toc {
display: block;
position: sticky;
top: 7rem;
padding-top: 0.25rem;
}
}
.strevinas-news__toc-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
counter-reset: news-toc;
}
.strevinas-news__toc-list li {
counter-increment: news-toc;
}
.strevinas-news__toc-link {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.55rem 0;
font-size: 0.8125rem;
line-height: 1.45;
color: hsl(var(--muted-foreground));
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.7s var(--ease-silk),
border-color 0.7s var(--ease-silk),
padding-left 0.7s var(--ease-silk);
}
.strevinas-news__toc-link::before {
content: counter(news-toc, decimal-leading-zero);
flex: 0 0 auto;
min-width: 1.35rem;
font-size: 0.625rem;
letter-spacing: 0.12em;
color: hsl(var(--foreground) / 0.45);
padding-top: 0.15rem;
}
.strevinas-news__toc-link:hover,
.strevinas-news__toc-link:focus-visible,
.strevinas-news__toc-link.is-active {
color: hsl(var(--foreground));
border-bottom-color: hsl(var(--border));
padding-left: 0.35rem;
}
.strevinas-news__toc-link.is-active::before {
color: hsl(var(--foreground));
}
.strevinas-news__main {
min-width: 0;
}
.strevinas-news__featured {
margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.strevinas-news__featured-frame {
position: relative;
overflow: hidden;
border: 1px solid hsl(var(--border));
aspect-ratio: 21 / 9;
background: hsl(var(--muted));
}
.strevinas-news__featured-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.4) brightness(0.82);
transform: scale(1.02);
transition: transform 1.8s var(--ease-silk), filter 1.2s var(--ease-silk);
}
.strevinas-news__featured-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to top,
hsl(var(--background) / 0.55) 0%,
transparent 45%
);
}
@media (hover: hover) {
.strevinas-news__featured:hover .strevinas-news__featured-img {
filter: grayscale(0.1) brightness(0.92);
transform: scale(1.05);
}
}
.strevinas-news__content {
max-width: 48rem;
color: hsl(var(--muted-foreground));
font-size: 1.0625rem;
line-height: 1.75;
}
.strevinas-news__content > :first-child {
margin-top: 0;
}
.strevinas-news__content h2 {
scroll-margin-top: 6.5rem;
display: flex;
align-items: flex-start;
gap: 1rem;
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.75rem, 3vw, 2.35rem);
line-height: 1.15;
color: hsl(var(--foreground));
margin: clamp(2.75rem, 5vw, 3.5rem) 0 1.15rem;
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid hsl(var(--border));
counter-increment: news-section;
}
.strevinas-news__content {
counter-reset: news-section;
}
.strevinas-news__content h2::before {
content: counter(news-section, decimal-leading-zero);
flex: 0 0 auto;
font-size: 0.7rem;
letter-spacing: 0.2em;
font-family: Inter, sans-serif;
font-weight: 500;
color: hsl(var(--muted-foreground));
padding-top: 0.45rem;
}
.strevinas-news__content h2:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.strevinas-news__content h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.35rem, 2.2vw, 1.65rem);
line-height: 1.2;
color: hsl(var(--foreground));
margin: 2rem 0 0.85rem;
}
.strevinas-news__content p {
margin: 0 0 1.35rem;
}
.strevinas-news__content > p:first-of-type {
font-size: 1.125rem;
line-height: 1.8;
color: hsl(var(--foreground) / 0.88);
}
.strevinas-news__content a {
color: hsl(var(--foreground));
text-decoration: underline;
text-decoration-color: hsl(var(--foreground) / 0.28);
text-underline-offset: 0.2em;
transition: text-decoration-color 0.7s var(--ease-silk);
}
.strevinas-news__content a:hover,
.strevinas-news__content a:focus-visible {
text-decoration-color: hsl(var(--foreground));
}
.strevinas-news__content ul,
.strevinas-news__content ol {
margin: 0 0 1.35rem;
padding-left: 1.35rem;
}
.strevinas-news__content li {
margin-bottom: 0.45rem;
}
.strevinas-news__content li::marker {
color: hsl(var(--foreground) / 0.45);
}
.strevinas-news__content img,
.strevinas-news__content figure {
max-width: 100%;
height: auto;
}
.strevinas-news__content figure {
margin: 2rem 0;
}
.strevinas-news__content figure img {
border: 1px solid hsl(var(--border));
}
.strevinas-news__content figcaption {
margin-top: 0.65rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
}
.strevinas-news__content blockquote,
.strevinas-news__content .wp-block-quote {
margin: 2rem 0;
padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
border-left: 2px solid hsl(var(--foreground) / 0.35);
background: hsl(var(--secondary) / 0.45);
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
font-style: italic;
line-height: 1.45;
color: hsl(var(--foreground) / 0.92);
}
.strevinas-news__content blockquote p,
.strevinas-news__content .wp-block-quote p {
margin: 0;
}
.strevinas-news__page-links {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid hsl(var(--border));
}
.strevinas-news__page-links a {
text-decoration: none;
margin-right: 0.75rem;
}
.strevinas-news__adjacent {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid hsl(var(--border));
}
@media (min-width: 768px) {
.strevinas-news__adjacent {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
.strevinas-news__adjacent-spacer {
display: none;
}
@media (min-width: 768px) {
.strevinas-news__adjacent-spacer {
display: block;
}
}
.strevinas-news__adjacent-link {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: clamp(1.15rem, 2.5vw, 1.5rem);
text-decoration: none;
color: inherit;
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.35);
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
background 0.7s var(--ease-silk);
}
.strevinas-news__adjacent-link--next {
text-align: right;
}
@media (hover: hover) {
.strevinas-news__adjacent-link:hover {
border-color: hsl(var(--foreground) / 0.4);
background: hsl(var(--card));
transform: translateY(-2px);
}
}
.strevinas-news__adjacent-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.2;
color: hsl(var(--foreground));
}
.strevinas-news__related {
margin-top: clamp(3rem, 6vw, 5rem);
padding-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid hsl(var(--border));
}
.strevinas-news__related-header {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.strevinas-news--single .strevinas-news__related .strevinas-hub-grid {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.strevinas-news--single .strevinas-news__related .strevinas-hub-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.strevinas-news--single .strevinas-news__related .strevinas-hub-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* -------------------------------------------------------------------------
Σελίδα θυγατρική «Πριν & Μετά» — ίδιο ρυθμό με page-prin-kai-meta.php
------------------------------------------------------------------------- */
.strevinas-ba-procedure__article {
max-width: none;
}
.strevinas-ba-procedure__body {
padding-top: 0;
}
.strevinas-ba-procedure__body > .strevinas-ba-cases:first-child {
margin-top: 0;
}
.strevinas-ba-procedure__body.prose .strevinas-ba-cases {
max-width: none;
width: 100%;
}
/* -------------------------------------------------------------------------
Before / After galleries — φιλοσοφία popular-card + hub grid + reveal
------------------------------------------------------------------------- */
.strevinas-ba-cases.strevinas-ba-section-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: clamp(1.25rem, 2.5vw, 2rem);
width: 100%;
max-width: none;
}
@media (min-width: 700px) {
.strevinas-ba-cases.strevinas-ba-section-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.strevinas-ba-cases.strevinas-ba-section-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.strevinas-ba-case.ba-item {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
border: 1px solid hsl(var(--border));
border-radius: var(--radius, 0.125rem);
overflow: hidden;
background: hsl(var(--card));
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
box-shadow 0.9s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-ba-case.ba-item:hover {
border-color: hsl(var(--foreground) / 0.45);
transform: translateY(-2px);
box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.7);
}
}
@media (prefers-reduced-motion: reduce) {
.strevinas-ba-case.ba-item {
transition: none !important;
}
.strevinas-ba-case.ba-item:hover {
transform: none;
}
}
.ba-case-title {
/* Διατηρείται μόνο για παλιό cached HTML· οι νέες γκαλερί δεν εκτυπώνουν τίτλο. */
display: none;
}
/* Slider: πλήρης εικόνα (χωρίς crop), χωρίς grayscale */
.strevinas-ba.dmm-single-ba {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.strevinas-ba-section-grid .strevinas-ba.dmm-single-ba {
max-width: none;
margin: 0;
}
.strevinas-ba-case__viewport {
position: relative;
width: 100%;
background: hsl(var(--muted));
}
.strevinas-ba-case__viewport .ba_slide {
position: relative;
width: 100%;
}
.strevinas-ba-case__viewport .strevinas-ba__slide-link--active {
position: relative;
z-index: 2;
display: block;
width: 100%;
opacity: 1;
visibility: visible;
pointer-events: auto;
line-height: 0;
transform: translateY(0) scale(1);
transition:
opacity 0.58s var(--ease-silk) 0.06s,
transform 0.68s var(--ease-cinema) 0.05s,
visibility 0s linear 0s;
}
.strevinas-ba-case__viewport .strevinas-ba__slide-link:not(.strevinas-ba__slide-link--active) {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 0;
transform: translateY(12px) scale(0.965);
transition:
opacity 0.52s var(--ease-silk),
transform 0.6s var(--ease-silk),
visibility 0s linear 0.52s;
}
.strevinas-ba-case__viewport .ba_image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
object-position: center;
vertical-align: top;
}
/* Desktop: βέλη πλοήγησης στο hover / focus της κάρτας */
@media (min-width: 1024px) {
.strevinas-ba-case__arrows {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.2rem;
pointer-events: none;
z-index: 4;
}
.strevinas-ba-case__nav {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.5rem;
margin: 0;
padding: 0;
border: none;
border-radius: 1px;
background: hsl(0 0% 0% / 0.32);
color: hsl(0 0% 100% / 0.88);
cursor: pointer;
opacity: 0;
transition: opacity 0.4s var(--ease-silk), background 0.35s ease, color 0.35s ease;
}
.strevinas-ba-case__nav-icon {
font-size: 1.4rem;
line-height: 1;
font-weight: 300;
display: block;
margin-top: -0.06em;
font-family: 'Cormorant Garamond', Georgia, serif;
}
.strevinas-ba-case.ba-item:hover .strevinas-ba-case__nav,
.strevinas-ba-case.ba-item:focus-within .strevinas-ba-case__nav {
opacity: 1;
}
.strevinas-ba-case__nav:hover,
.strevinas-ba-case__nav:focus-visible {
background: hsl(0 0% 0% / 0.48);
color: hsl(0 0% 100% / 1);
outline: none;
}
}
@media (max-width: 1023px) {
.strevinas-ba-case__arrows {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.strevinas-ba-case__viewport .strevinas-ba__slide-link--active,
.strevinas-ba-case__viewport .strevinas-ba__slide-link:not(.strevinas-ba__slide-link--active) {
transition: none !important;
transform: none !important;
}
}
/* Legacy markup χωρίς .strevinas-ba--slider (παλιά cache / eml_ba) */
.strevinas-ba.dmm-single-ba:not(.strevinas-ba--slider) > .ba_slide {
position: relative;
overflow: visible;
background: hsl(var(--muted));
}
.strevinas-ba.dmm-single-ba:not(.strevinas-ba--slider) .ba_image {
display: none;
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
filter: none;
transform: none;
}
.strevinas-ba.dmm-single-ba:not(.strevinas-ba--slider) .ba_image.active {
display: block;
}
.strevinas-ba.dmm-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 1.5rem;
}
.ba_options {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.65rem;
padding: 0.85rem 1rem 1rem;
margin-top: auto;
border-top: 1px solid hsl(var(--border) / 0.65);
background: hsl(var(--card));
}
.ba_options .ba_go_to_image {
width: auto;
height: auto;
min-width: 2.25rem;
min-height: 2.25rem;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
transition: opacity 0.35s var(--ease-silk);
}
.ba_options .ba_go_to_image::after {
content: '';
width: 9px;
height: 9px;
border-radius: 999px;
background: hsl(var(--muted-foreground) / 0.42);
box-shadow: inset 0 0 0 1px hsl(var(--border));
transition: transform 0.4s var(--ease-silk), background 0.35s ease, box-shadow 0.35s ease;
}
.ba_options .ba_go_to_image:hover::after,
.ba_options .ba_go_to_image:focus-visible::after {
transform: scale(1.12);
background: hsl(var(--muted-foreground) / 0.65);
box-shadow: inset 0 0 0 1px hsl(var(--border)), 0 0 0 3px hsl(var(--foreground) / 0.08);
}
.ba_options .ba_go_to_image:hover,
.ba_options .ba_go_to_image:focus-visible {
outline: none;
}
.ba_options .ba_go_to_image.active::after {
width: 10px;
height: 10px;
background: hsl(var(--foreground) / 0.88);
box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.35), 0 0 0 4px hsl(var(--foreground) / 0.12);
transform: scale(1.05);
}
.strevinas-ba__slide-link {
display: block;
}
/* Lightbox */
body.strevinas-ba-lightbox-open {
overflow: hidden;
}
.strevinas-ba-lightbox {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
}
.strevinas-ba-lightbox__backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
margin: 0;
background: hsl(0 0% 0% / 0.82);
cursor: pointer;
}
.strevinas-ba-lightbox__panel {
position: relative;
z-index: 1;
max-width: min(92vw, 1100px);
max-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.strevinas-ba-lightbox__img {
max-width: 100%;
max-height: 88vh;
object-fit: contain;
border-radius: 0.35rem;
pointer-events: auto;
box-shadow: 0 24px 80px hsl(0 0% 0% / 0.55);
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.48s var(--ease-silk), transform 0.55s var(--ease-cinema);
}
.strevinas-ba-lightbox__img.strevinas-ba-lightbox__img--swap {
opacity: 0;
transform: scale(0.96) translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
.strevinas-ba-lightbox__img,
.strevinas-ba-lightbox__img.strevinas-ba-lightbox__img--swap {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.strevinas-ba-lightbox__counter {
position: absolute;
bottom: 0.4rem;
right: 0.5rem;
z-index: 2;
margin: 0;
pointer-events: none;
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.6875rem;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.35;
text-transform: lowercase;
color: hsl(0 0% 100% / 0.62);
text-shadow: 0 1px 10px hsl(0 0% 0% / 0.85);
user-select: none;
}
@media (max-width: 640px) {
.strevinas-ba-lightbox__counter {
font-size: 0.625rem;
bottom: 0.25rem;
right: 0.35rem;
}
}
.strevinas-ba-lightbox__close,
.strevinas-ba-lightbox__nav {
position: absolute;
z-index: 2;
pointer-events: auto;
border: 0;
cursor: pointer;
color: hsl(0 0% 98%);
background: hsl(0 0% 0% / 0.35);
border-radius: 999px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.strevinas-ba-lightbox__close:hover,
.strevinas-ba-lightbox__nav:hover,
.strevinas-ba-lightbox__close:focus-visible,
.strevinas-ba-lightbox__nav:focus-visible {
background: hsl(0 0% 0% / 0.55);
outline: 2px solid hsl(var(--ring));
}
.strevinas-ba-lightbox__close {
top: -0.25rem;
right: -0.25rem;
width: 2.5rem;
height: 2.5rem;
font-size: 1.5rem;
}
.strevinas-ba-lightbox__nav {
top: 50%;
transform: translateY(-50%);
width: 2.75rem;
height: 2.75rem;
font-size: 1.75rem;
}
.strevinas-ba-lightbox__nav--prev {
left: 0.25rem;
}
.strevinas-ba-lightbox__nav--next {
right: 0.25rem;
}
@media (max-width: 640px) {
.strevinas-ba-lightbox__nav {
width: 2.25rem;
height: 2.25rem;
font-size: 1.35rem;
}
}
/* WordPress core helper classes */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: hsl(var(--background));
clip: auto !important;
clip-path: none;
color: hsl(var(--foreground));
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* -------------------------------------------------------------------------
Σελίδα «Ο Ιατρός» (page-doctor.php)
------------------------------------------------------------------------- */
.strevinas-doctor__hero {
max-width: none;
}
.strevinas-doctor__layout {
display: block;
}
.strevinas-doctor__layout--with-portrait {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
@media (min-width: 1024px) {
.strevinas-doctor__layout--with-portrait {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(3rem, 5vw, 5rem);
}
}
.strevinas-doctor__body > :first-child {
margin-top: 0;
}
.strevinas-doctor__body h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.15;
color: hsl(var(--foreground));
margin: 2.5rem 0 1.25rem;
}
.strevinas-doctor__body h2:first-child {
margin-top: 0;
}
.strevinas-doctor__body p {
margin: 0 0 1.35rem;
}
.strevinas-doctor__body blockquote,
.strevinas-doctor__body .wp-block-quote {
margin: 2rem 0;
padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
border-left: 2px solid hsl(var(--foreground) / 0.35);
background: hsl(var(--secondary) / 0.45);
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
font-style: italic;
line-height: 1.45;
color: hsl(var(--foreground) / 0.92);
}
.strevinas-doctor__body blockquote p,
.strevinas-doctor__body .wp-block-quote p {
margin: 0;
}
.strevinas-doctor__body .strevinas-doctor-acc {
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.strevinas-doctor__portrait img {
transition: transform 1.4s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-doctor__portrait:hover img {
transform: scale(1.03);
}
}
/* Rich text / πολλαπλές παράγραφοι — ίδιο ρυθμό με Tailwind space-y-8 */
.strevinas-prose-stack {
display: flex;
flex-direction: column;
gap: 2rem;
}
.strevinas-prose-stack > p,
.strevinas-prose-stack > ul,
.strevinas-prose-stack > ol,
.strevinas-prose-stack > blockquote {
margin: 0;
}
.strevinas-prose-stack > p:empty {
display: none;
}
#about .strevinas-about__bio-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 2.25rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: hsl(var(--foreground));
border: 1px solid hsl(var(--foreground) / 0.35);
transition: background-color 0.5s var(--ease-silk), color 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk);
}
#about .strevinas-about__bio-link:hover,
#about .strevinas-about__bio-link:focus-visible {
background: hsl(var(--foreground));
color: hsl(var(--background));
border-color: hsl(var(--foreground));
}
.strevinas-about__actions {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.75rem;
}
.strevinas-about__contact {
flex: 1 1 auto;
min-width: 0;
}
.strevinas-doctor-contact__list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.strevinas-doctor-contact__item {
display: flex;
}
#about .strevinas-about__bio-link,
.strevinas-doctor-contact__btn {
min-height: 3.25rem;
box-sizing: border-box;
}
.strevinas-doctor-contact__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
color: hsl(var(--foreground));
border: 1px solid hsl(var(--foreground) / 0.35);
transition: background-color 0.5s var(--ease-silk), color 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk);
}
.strevinas-doctor-contact__btn:hover,
.strevinas-doctor-contact__btn:focus-visible {
background: hsl(var(--foreground));
color: hsl(var(--background));
border-color: hsl(var(--foreground));
}
@media (max-width: 639px) {
.strevinas-about__actions {
flex-direction: column;
align-items: stretch;
}
#about .strevinas-about__bio-link,
.strevinas-doctor-contact__btn {
width: 100%;
}
.strevinas-doctor-contact__list {
width: 100%;
}
.strevinas-doctor-contact__item {
flex: 1 1 calc(33.333% - 0.5rem);
min-width: 6.5rem;
}
.strevinas-doctor-contact__btn {
width: 100%;
padding-inline: 0.75rem;
letter-spacing: 0.14em;
}
}
.strevinas-doctor__intro-p p {
margin: 0;
}
.strevinas-doctor__quote {
margin: 0;
padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
border-left: 2px solid hsl(var(--foreground) / 0.35);
background: hsl(var(--secondary) / 0.45);
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
font-style: italic;
line-height: 1.45;
color: hsl(var(--foreground) / 0.92);
}
.strevinas-doctor__quote p {
margin: 0;
}
.strevinas-doctor-acc {
border-top: 1px solid hsl(var(--border));
}
.strevinas-doctor-acc__item {
border-bottom: 1px solid hsl(var(--border));
}
.strevinas-doctor-acc__heading {
margin: 0;
}
.strevinas-doctor-acc__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: clamp(1.15rem, 2.5vw, 1.65rem) 0;
border: 0;
background: transparent;
color: hsl(var(--foreground));
cursor: pointer;
text-align: left;
font: inherit;
transition: color 0.45s var(--ease-silk);
}
.strevinas-doctor-acc__trigger:hover,
.strevinas-doctor-acc__trigger:focus-visible {
color: hsl(var(--foreground) / 0.82);
outline: none;
}
.strevinas-doctor-acc__trigger:focus-visible {
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.45);
}
.strevinas-doctor-acc__title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.5vw, 2rem);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.2;
}
.strevinas-doctor-acc__icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
position: relative;
}
.strevinas-doctor-acc__icon::before,
.strevinas-doctor-acc__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 1px;
background: hsl(var(--muted-foreground));
transform: translate(-50%, -50%);
transition: transform 0.5s var(--ease-silk), opacity 0.35s ease;
}
.strevinas-doctor-acc__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.strevinas-doctor-acc__item.is-open .strevinas-doctor-acc__icon::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
opacity: 0;
}
.strevinas-doctor-acc__panel {
overflow: hidden;
transition: height 0.55s var(--ease-silk);
}
.strevinas-doctor-acc__content {
padding: 0 0 clamp(1.25rem, 2.5vw, 2rem);
color: hsl(var(--muted-foreground));
font-size: 1rem;
line-height: 1.7;
}
.strevinas-doctor__section-body > :first-child {
margin-top: 0;
}
.strevinas-doctor__section-body > :last-child {
margin-bottom: 0;
}
.strevinas-doctor__body ul,
.strevinas-doctor__section-body ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.85rem;
}
.strevinas-doctor__body ul li,
.strevinas-doctor__section-body ul li {
position: relative;
padding-left: 1.15rem;
}
.strevinas-doctor__body ul li::before,
.strevinas-doctor__section-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.72em;
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
background: hsl(var(--foreground) / 0.35);
transform: translateY(-50%);
}
.strevinas-doctor__body table,
.strevinas-doctor__section-body table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.strevinas-doctor__body table tbody tr,
.strevinas-doctor__section-body table tbody tr {
border-bottom: 1px solid hsl(var(--border));
}
.strevinas-doctor__body table tbody tr:last-child,
.strevinas-doctor__section-body table tbody tr:last-child {
border-bottom: 0;
}
.strevinas-doctor__body table td,
.strevinas-doctor__section-body table td {
padding: 0.9rem 0;
vertical-align: top;
}
.strevinas-doctor__body table td:first-child,
.strevinas-doctor__section-body table td:first-child {
width: 11.5rem;
min-width: 9rem;
padding-right: 1.25rem;
color: hsl(var(--foreground) / 0.88);
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 640px) {
.strevinas-doctor__body table,
.strevinas-doctor__body table tbody,
.strevinas-doctor__body table tr,
.strevinas-doctor__body table td,
.strevinas-doctor__section-body table,
.strevinas-doctor__section-body table tbody,
.strevinas-doctor__section-body table tr,
.strevinas-doctor__section-body table td {
display: block;
width: 100%;
}
.strevinas-doctor__body table td,
.strevinas-doctor__section-body table td {
padding: 0.35rem 0;
}
.strevinas-doctor__body table td:first-child,
.strevinas-doctor__section-body table td:first-child {
padding-bottom: 0.15rem;
white-space: normal;
}
.strevinas-doctor__body table tr,
.strevinas-doctor__section-body table tr {
padding: 0.85rem 0;
border-bottom: 1px solid hsl(var(--border));
}
}
/* Παρουσιάσεις σε συνέδρια — ζεύγη τίτλος/χώρος */
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p {
margin: 0 0 0.35rem;
}
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p:has(b),
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p:has(strong) {
margin-top: 1.35rem;
color: hsl(var(--foreground) / 0.9);
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
line-height: 1.35;
}
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p:first-child {
margin-top: 0;
}
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p:has(b) + p,
.strevinas-doctor-acc__item:last-child .strevinas-doctor__section-body > p:has(strong) + p {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid hsl(var(--border) / 0.65);
}
@media (prefers-reduced-motion: reduce) {
.strevinas-doctor-acc__panel {
transition: none !important;
}
.strevinas-doctor__portrait img {
transition: none !important;
}
}
/* Clinic location page template */
.strevinas-clinic-page__gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
gap: clamp(0.85rem, 1.6vw, 1.15rem);
}
.strevinas-clinic-page__gallery-cell {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid hsl(var(--border));
aspect-ratio: 4 / 3;
overflow: hidden;
cursor: zoom-in;
background: hsl(var(--muted));
text-align: left;
transition: border-color 0.35s ease, box-shadow 0.45s var(--ease-silk);
}
.strevinas-clinic-page__gallery-cell:hover,
.strevinas-clinic-page__gallery-cell:focus-visible {
border-color: hsl(var(--foreground) / 0.28);
outline: none;
box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.12);
}
.strevinas-clinic-page__gallery-cell img {
transition: transform 1.4s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-clinic-page__gallery-cell:hover img {
transform: scale(1.04);
}
}
.strevinas-clinic-page__gallery-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 1rem 1.15rem;
background: linear-gradient(to top, hsl(var(--background) / 0.88), transparent);
color: hsl(var(--foreground) / 0.88);
pointer-events: none;
}
.strevinas-clinic-page__gallery-zoom {
position: absolute;
top: 0.85rem;
right: 0.85rem;
width: 2rem;
height: 2rem;
border-radius: 999px;
border: 1px solid hsl(var(--border));
background: hsl(var(--background) / 0.72);
pointer-events: none;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.35s ease, transform 0.35s var(--ease-silk);
}
.strevinas-clinic-page__gallery-zoom::before,
.strevinas-clinic-page__gallery-zoom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: hsl(var(--foreground) / 0.75);
transform: translate(-50%, -50%);
}
.strevinas-clinic-page__gallery-zoom::before {
width: 0.7rem;
height: 1px;
}
.strevinas-clinic-page__gallery-zoom::after {
width: 1px;
height: 0.7rem;
}
@media (hover: hover) {
.strevinas-clinic-page__gallery-cell:hover .strevinas-clinic-page__gallery-zoom,
.strevinas-clinic-page__gallery-cell:focus-visible .strevinas-clinic-page__gallery-zoom {
opacity: 1;
transform: scale(1);
}
}
.strevinas-clinic-lightbox .strevinas-ba-lightbox__panel {
flex-direction: column;
gap: 0.65rem;
}
.strevinas-clinic-lightbox__caption {
position: absolute;
left: 50%;
bottom: 0.35rem;
transform: translateX(-50%);
z-index: 2;
margin: 0;
max-width: min(92vw, 42rem);
padding: 0.35rem 0.75rem;
font-family: 'Inter', system-ui, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: hsl(0 0% 100% / 0.72);
text-align: center;
pointer-events: none;
}
.strevinas-clinic-page__team-portrait img {
transition: transform 1.4s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-clinic-page__team-portrait:hover img {
transform: scale(1.03);
}
}
.strevinas-clinic-page__team-bio p {
margin: 0 0 1.1rem;
}
.strevinas-clinic-page__team-bio p:last-child {
margin-bottom: 0;
}
.strevinas-clinic-page__contact-card {
transition: border-color 0.35s ease, background-color 0.35s ease;
}
.strevinas-clinic-page__map {
position: relative;
aspect-ratio: 16 / 11;
background: hsl(var(--muted));
}
.strevinas-clinic-page__map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(0.15) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
.strevinas-clinic-page__gallery-cell img,
.strevinas-clinic-page__team-portrait img {
transition: none !important;
}
}
/* -------------------------------------------------------------------------
Contact page (page-contact.php)
------------------------------------------------------------------------- */
.strevinas-contact-page__layout {
align-items: start;
}
.strevinas-contact-page__info {
position: relative;
}
@media (min-width: 1024px) {
.strevinas-contact-page__info {
position: sticky;
top: 7rem;
}
}
.strevinas-contact-page__channels {
display: flex;
flex-direction: column;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid hsl(var(--border));
}
.strevinas-contact-page__channel {
padding: 1.5rem 0;
margin: 0;
text-decoration: none;
color: inherit;
border-bottom: 1px solid hsl(var(--border));
transition: opacity 0.35s ease;
}
@media (min-width: 768px) {
.strevinas-contact-page__channel {
padding: 1.75rem 0;
}
}
.strevinas-contact-page__channel-link {
display: inline-block;
text-decoration: none;
color: inherit;
transition: color 0.45s ease;
}
.strevinas-contact-page__channel-link:hover,
.strevinas-contact-page__channel-link:focus-visible {
color: hsl(var(--muted-foreground));
}
.strevinas-contact-page__channel--cta {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.strevinas-contact-page__channel-cta {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
text-decoration: none;
}
.strevinas-contact-page__channel-cta-arrow {
display: inline-block;
font-style: normal;
transform: translateX(0);
transition: transform 0.45s var(--ease-silk, cubic-bezier(0.4, 0, 0.2, 1));
}
.strevinas-contact-page__channel-cta:hover .strevinas-contact-page__channel-cta-arrow,
.strevinas-contact-page__channel-cta:focus-visible .strevinas-contact-page__channel-cta-arrow {
transform: translateX(0.35rem);
}
/* Form card — visually anchors the form as a clear, separate panel */
.strevinas-contact-page__inquiry {
/* Reset previous standalone border-top */
}
.strevinas-contact-page__form-card {
position: relative;
padding: 2rem 1.5rem;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
}
@media (min-width: 768px) {
.strevinas-contact-page__form-card {
padding: 2.5rem;
}
}
@media (min-width: 1024px) {
.strevinas-contact-page__form-card {
padding: 3rem 3.25rem;
}
}
.strevinas-contact-page__form-header {
margin-bottom: 2rem;
padding-bottom: 1.75rem;
border-bottom: 1px solid hsl(var(--border));
}
@media (min-width: 768px) {
.strevinas-contact-page__form-header {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
}
}
.strevinas-contact-page__form-header p:last-child {
margin-bottom: 0;
}
.strevinas-contact-page__office {
transition: border-color 0.4s ease, transform 0.55s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-contact-page__office:hover {
transform: translateY(-3px);
border-color: hsl(var(--foreground) / 0.16);
}
}
/* Contact Form 7 — custom markup (cf7-field, cf7-radio-group) */
.strevinas-contact-page__form .wpcf7 {
margin: 0;
}
.strevinas-contact-page__form .wpcf7-form {
display: flex;
flex-direction: column;
gap: 0;
}
.strevinas-contact-page__form .cf7-intro {
display: none;
}
.strevinas-contact-page__form .cf7-field,
.strevinas-contact-page__form fieldset.cf7-field {
margin: 0 0 1.75rem;
padding: 0;
border: 0;
}
/* Κύρια labels φόρμας — ίδιο μέγεθος/χρώμα (όνομα, επικοινωνία, μήνυμα) */
.strevinas-contact-page__form .cf7-field > p > label[for],
.strevinas-contact-page__form fieldset.cf7-field > legend,
.strevinas-contact-page__form fieldset.cf7-field > legend.cf7-label,
.strevinas-contact-page__form .cf7-label {
display: block;
width: 100%;
max-width: 100%;
float: none;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.2vw, 1.65rem);
font-weight: 300;
letter-spacing: -0.02em;
text-transform: none;
color: hsl(var(--foreground));
margin: 0 0 0.65rem;
padding: 0;
line-height: 1.2;
}
.strevinas-contact-page__form .cf7-choice-hint {
margin: -0.35rem 0 0.85rem;
font-family: Inter, sans-serif;
font-size: 0.8125rem;
font-weight: 300;
line-height: 1.5;
color: hsl(var(--muted-foreground));
}
/* Μετά την επιλογή Τηλέφωνο|E-mail δεν χρειάζεται δεύτερο label */
.strevinas-contact-page__form #phone-wrapper > p > label[for],
.strevinas-contact-page__form #email-wrapper > p > label[for] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.strevinas-contact-page__form #phone-wrapper > p,
.strevinas-contact-page__form #email-wrapper > p {
margin: 0;
}
/* Segmented επιλογή: Τηλέφωνο | E-mail */
.strevinas-contact-page__form .cf7-radio-group {
display: inline-flex;
flex-wrap: wrap;
align-items: stretch;
margin: 0 0 1.25rem;
border: 1px solid hsl(var(--border));
}
.strevinas-contact-page__form .cf7-radio-group br {
display: none;
}
.strevinas-contact-page__form .cf7-radio-group p {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-width: 7.5rem;
}
.strevinas-contact-page__form .cf7-radio-group p + p {
border-left: 1px solid hsl(var(--border));
}
.strevinas-contact-page__form .cf7-radio-group label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
padding: 0.7rem 1.35rem;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
cursor: pointer;
transition: color 0.35s ease, background-color 0.35s ease;
user-select: none;
}
.strevinas-contact-page__form .cf7-radio-group input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.strevinas-contact-page__form .cf7-radio-group p:has(input:checked) label {
color: hsl(var(--background));
background: hsl(var(--foreground));
}
.strevinas-contact-page__form #phone-wrapper,
.strevinas-contact-page__form #email-wrapper {
margin-top: 0;
}
.strevinas-contact-page__form #phone-wrapper[hidden],
.strevinas-contact-page__form #email-wrapper[hidden] {
display: none !important;
}
.strevinas-contact-page__form #phone-wrapper p,
.strevinas-contact-page__form #email-wrapper p {
margin: 0;
}
.strevinas-contact-page__form .cf7-field > p {
margin: 0;
}
.strevinas-contact-page__form .wpcf7-form-control-wrap {
display: block;
}
.strevinas-contact-page__form input[type="text"],
.strevinas-contact-page__form input[type="email"],
.strevinas-contact-page__form input[type="tel"],
.strevinas-contact-page__form input[type="url"],
.strevinas-contact-page__form textarea,
.strevinas-contact-page__form select {
width: 100%;
padding: 0.75rem 0 0.85rem;
font-family: Inter, sans-serif;
font-size: 0.95rem;
font-weight: 300;
color: hsl(var(--foreground));
background: transparent;
border: none;
border-bottom: 1px solid hsl(var(--border));
border-radius: 0;
outline: none;
transition: border-color 0.35s ease;
}
.strevinas-contact-page__form input::placeholder,
.strevinas-contact-page__form textarea::placeholder {
color: hsl(var(--muted-foreground));
opacity: 1;
font-weight: 300;
}
.strevinas-contact-page__form input:focus,
.strevinas-contact-page__form textarea:focus,
.strevinas-contact-page__form select:focus {
border-bottom-color: hsl(var(--foreground) / 0.45);
}
.strevinas-contact-page__form textarea {
min-height: 9rem;
resize: vertical;
}
.strevinas-contact-page__form .cf7-submit {
margin-top: 0.5rem;
}
.strevinas-contact-page__form input[type="submit"],
.strevinas-contact-page__form .wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 10rem;
padding: 0.85rem 2.25rem;
font-family: Inter, sans-serif;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: hsl(var(--background));
background: hsl(var(--foreground));
border: 1px solid hsl(var(--foreground));
border-radius: 0;
cursor: pointer;
transition: background-color 0.45s ease, color 0.45s ease, transform 0.45s var(--ease-silk);
}
.strevinas-contact-page__form input[type="submit"]:hover,
.strevinas-contact-page__form .wpcf7-submit:hover {
background: transparent;
color: hsl(var(--foreground));
}
.strevinas-contact-page__form input[type="submit"]:active,
.strevinas-contact-page__form .wpcf7-submit:active {
transform: scale(0.98);
}
.strevinas-contact-page__form .wpcf7-not-valid-tip {
display: block;
font-size: 0.75rem;
color: hsl(var(--destructive));
margin-top: 0.35rem;
}
.strevinas-contact-page__form .wpcf7-response-output {
margin: 1rem 0 0;
padding: 0.85rem 1rem;
border: 1px solid hsl(var(--border));
font-size: 0.875rem;
}
.strevinas-contact-page__form .wpcf7-spinner {
margin-left: 0.75rem;
}
.strevinas-contact-page__form .wpcf7 form.invalid .wpcf7-response-output,
.strevinas-contact-page__form .wpcf7 form.unaccepted .wpcf7-response-output,
.strevinas-contact-page__form .wpcf7 form.payment-required .wpcf7-response-output {
border-color: hsl(var(--destructive) / 0.5);
}
.strevinas-contact-page__form .wpcf7 form.sent .wpcf7-response-output {
border-color: hsl(142 35% 40% / 0.5);
}
@media (prefers-reduced-motion: reduce) {
.strevinas-contact-page__office {
transition: none !important;
}
}
/* Footer social links */
.social-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
}
.social-link__icon {
flex-shrink: 0;
opacity: 0.85;
transition: opacity 0.35s ease;
}
.social-link:hover .social-link__icon {
opacity: 1;
}
/* -------------------------------------------------------------------------
Σχόλια άρθρων (comments.php)
------------------------------------------------------------------------- */
.strevinas-news__comments-wrap {
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid hsl(var(--border));
}
.strevinas-news-comments__header {
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.strevinas-news-comments__list {
list-style: none;
margin: 0 0 clamp(2rem, 4vw, 3rem);
padding: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.strevinas-news-comments__item-inner {
padding: clamp(1.15rem, 2.5vw, 1.5rem);
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.35);
}
.strevinas-news-comments__meta {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
.strevinas-news-comments__avatar {
border-radius: 50%;
filter: grayscale(1);
opacity: 0.9;
}
.strevinas-news-comments__author {
display: block;
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
font-style: normal;
color: hsl(var(--foreground));
}
.strevinas-news-comments__date {
display: block;
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.strevinas-news-comments__body {
font-size: 0.9375rem;
line-height: 1.7;
color: hsl(var(--muted-foreground));
}
.strevinas-news-comments__body p {
margin: 0 0 0.75rem;
}
.strevinas-news-comments__body p:last-child {
margin-bottom: 0;
}
.strevinas-news-comments__moderation {
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
margin-bottom: 0.65rem;
}
.strevinas-news-comments__reply a {
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
color: hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--foreground) / 0.25);
transition: border-color 0.7s var(--ease-silk);
}
.strevinas-news-comments__reply a:hover,
.strevinas-news-comments__reply a:focus-visible {
border-bottom-color: hsl(var(--foreground));
}
.strevinas-news-comments .comment-respond {
margin-top: clamp(1.5rem, 3vw, 2rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.25);
}
.strevinas-news-comments__form-header {
margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.strevinas-news-comments__form-header .comment-reply-title {
margin: 0;
}
.strevinas-news-comments__cancel a {
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
color: hsl(var(--muted-foreground));
margin-left: 0.5rem;
}
.strevinas-news-comments__cancel a:hover,
.strevinas-news-comments__cancel a:focus-visible {
color: hsl(var(--foreground));
}
.strevinas-news-comments__notes,
.strevinas-news-comments__logged-in {
margin: 0 0 1.25rem;
font-size: 0.8125rem;
line-height: 1.6;
color: hsl(var(--muted-foreground));
}
.strevinas-news-comments__logged-in a {
color: hsl(var(--foreground));
text-decoration: underline;
text-underline-offset: 0.15em;
}
.strevinas-news-comments__form p {
margin: 0 0 1.15rem;
}
.strevinas-news-comments__field--comment {
margin-bottom: 1.35rem;
}
.strevinas-news-comments__label {
display: block;
margin-bottom: 0.55rem;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.strevinas-news-comments__label .required {
color: hsl(var(--foreground) / 0.55);
}
.strevinas-news-comments__form input[type="text"],
.strevinas-news-comments__form input[type="email"],
.strevinas-news-comments__form input[type="url"],
.strevinas-news-comments__form textarea {
width: 100%;
padding: 0.75rem 0 0.85rem;
font-family: Inter, sans-serif;
font-size: 0.95rem;
font-weight: 300;
color: hsl(var(--foreground));
background: transparent;
border: none;
border-bottom: 1px solid hsl(var(--border));
border-radius: 0;
outline: none;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.35s ease;
}
.strevinas-news-comments__form textarea {
min-height: 9rem;
resize: vertical;
line-height: 1.65;
}
.strevinas-news-comments__form input::placeholder,
.strevinas-news-comments__form textarea::placeholder {
color: hsl(var(--muted-foreground));
opacity: 1;
}
.strevinas-news-comments__form input:focus,
.strevinas-news-comments__form textarea:focus {
border-bottom-color: hsl(var(--foreground) / 0.45);
}
.strevinas-news-comments__cookies {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 1.25rem !important;
}
.strevinas-news-comments__cookies label {
font-size: 0.8125rem;
line-height: 1.55;
color: hsl(var(--muted-foreground));
font-weight: 300;
letter-spacing: normal;
text-transform: none;
}
.strevinas-news-comments__cookies input[type="checkbox"] {
margin-top: 0.2rem;
accent-color: hsl(var(--foreground));
}
.strevinas-news-comments__submit-wrap {
margin: 0.5rem 0 0 !important;
}
.strevinas-news-comments__submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 10rem;
padding: 0.85rem 2.25rem;
font-family: Inter, sans-serif;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: hsl(var(--background));
background: hsl(var(--foreground));
border: 1px solid hsl(var(--foreground));
border-radius: 0;
cursor: pointer;
transition: background-color 0.45s ease, color 0.45s ease, transform 0.45s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-news-comments__submit:hover {
background: transparent;
color: hsl(var(--foreground));
}
}
.strevinas-news-comments__submit:active {
transform: scale(0.98);
}
.strevinas-news-comments .comment-navigation {
margin-bottom: 1.5rem;
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.strevinas-news-comments .comment-navigation a {
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.7s var(--ease-silk);
}
.strevinas-news-comments .comment-navigation a:hover,
.strevinas-news-comments .comment-navigation a:focus-visible {
color: hsl(var(--foreground));
}
.strevinas-news-comments__closed {
margin: 0;
font-size: 0.9375rem;
}
/* -------------------------------------------------------------------------
Επέμβαση — Design D1 (page-epembaseis-procedure-d1.php)
------------------------------------------------------------------------- */
.strevinas-procedure-d1 .strevinas-procedure__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.strevinas-procedure-d1 .strevinas-procedure__crumb {
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.5s var(--ease-silk);
}
.strevinas-procedure-d1 .strevinas-procedure__crumb:hover,
.strevinas-procedure-d1 .strevinas-procedure__crumb:focus-visible {
color: hsl(var(--foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__meta-sep {
color: hsl(var(--muted-foreground) / 0.85);
}
.strevinas-procedure-d1 .strevinas-procedure__portrait-img {
transform: scale(1.02);
transition: transform 1.4s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-procedure-d1 .strevinas-procedure__portrait:hover .strevinas-procedure-d1 .strevinas-procedure__portrait-img {
transform: scale(1.06);
}
}
.strevinas-procedure-d1 .strevinas-procedure__specs-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 600px) {
.strevinas-procedure-d1 .strevinas-procedure__specs-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.strevinas-procedure-d1 .strevinas-procedure__specs-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.strevinas-procedure-d1 .strevinas-procedure__spec {
border: 1px solid hsl(var(--border));
padding: 1.25rem 1.35rem;
background: hsl(var(--card) / 0.35);
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 100%;
transition: border-color 0.7s var(--ease-silk),
transform 0.9s var(--ease-silk),
background-color 0.7s var(--ease-silk);
}
@media (hover: hover) {
.strevinas-procedure-d1 .strevinas-procedure__spec:hover {
border-color: hsl(var(--foreground) / 0.4);
background: hsl(var(--card) / 0.55);
transform: translateY(-2px);
}
}
.strevinas-procedure-d1 .strevinas-procedure__spec-label {
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__spec-value {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 1.6vw, 1.45rem);
line-height: 1.25;
color: hsl(var(--foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
transition: background-color 0.5s var(--ease-silk),
color 0.5s var(--ease-silk),
border-color 0.5s var(--ease-silk),
transform 0.45s var(--ease-silk);
}
.strevinas-procedure-d1 .strevinas-procedure__btn--outline {
color: hsl(var(--foreground));
border-color: hsl(var(--border));
background: transparent;
}
.strevinas-procedure-d1 .strevinas-procedure__btn--outline:hover,
.strevinas-procedure-d1 .strevinas-procedure__btn--outline:focus-visible {
border-color: hsl(var(--foreground));
background: hsl(var(--foreground) / 0.06);
}
.strevinas-procedure-d1 .strevinas-procedure__btn--primary {
color: hsl(var(--background));
background: hsl(var(--foreground));
border-color: hsl(var(--foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__btn--primary:hover,
.strevinas-procedure-d1 .strevinas-procedure__btn--primary:focus-visible {
background: transparent;
color: hsl(var(--foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__btn--compact {
padding: 0.7rem 1rem;
font-size: 0.5625rem;
}
.strevinas-procedure-d1 .strevinas-procedure__sidebar-card {
background: hsl(var(--card) / 0.4);
}
/* Body typography για το strevinas-procedure__body ορίζεται στο τέλος (Editorial content). */
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion {
background: transparent;
border: none;
}
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion h3 {
background: transparent !important;
color: hsl(var(--foreground)) !important;
border: 1px solid hsl(var(--border)) !important;
border-bottom: none !important;
padding: 1.1rem 1.35rem !important;
margin: 0 !important;
font-family: Inter, sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 400 !important;
letter-spacing: 0.02em;
cursor: pointer;
transition: background-color 0.35s ease;
}
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion h3:last-of-type,
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion h3.ui-state-active {
border-bottom: 1px solid hsl(var(--border)) !important;
}
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion h3:hover {
background: hsl(var(--foreground) / 0.04) !important;
}
.strevinas-procedure-d1 .strevinas-procedure__faq-inner .wp-faq-schema-items.ui-accordion .ui-accordion-content {
background: transparent !important;
border: 1px solid hsl(var(--border)) !important;
border-top: none !important;
padding: 1.25rem 1.35rem !important;
color: hsl(var(--muted-foreground)) !important;
font-size: 0.9375rem;
line-height: 1.75;
}
.strevinas-procedure-d1 .strevinas-procedure__related .strevinas-hub-grid .popular-card.reveal {
visibility: hidden;
opacity: 0;
transform: translateY(20px);
}
.strevinas-procedure-d1 .strevinas-procedure__related .strevinas-hub-grid .popular-card.reveal.in {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
background: hsl(var(--background) / 0.92);
border-top: 1px solid hsl(var(--border));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform: translateY(110%);
opacity: 0;
pointer-events: none;
transition: transform 0.55s var(--ease-silk), opacity 0.45s var(--ease-silk);
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 768px) {
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta {
display: none;
}
}
@media (max-width: 767px) {
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-text strong {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-weight: 500;
color: hsl(var(--foreground));
}
.strevinas-procedure-d1 .strevinas-procedure__sticky-text span {
font-size: 0.6875rem;
color: hsl(var(--muted-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.strevinas-design-d1.strevinas-procedure-page {
padding-bottom: 5.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.strevinas-procedure-d1 .strevinas-procedure__portrait-img,
.strevinas-procedure-d1 .strevinas-procedure__spec,
.strevinas-procedure-d1 .strevinas-procedure__sticky-cta {
transition: none !important;
}
.strevinas-procedure-d1 .strevinas-procedure__portrait-img {
transform: none;
}
}
/* -------------------------------------------------------------------------
Επέμβαση — Design D2 cinematic (page-epembaseis-procedure-d2.php)
------------------------------------------------------------------------- */
.strevinas-procedure-d2 {
--d2-hero-min: min(92vh, 920px);
--d2-chapter-marker: 2.75rem;
--d2-chapter-gap: 1.75rem;
--d2-rail-sticky-top: 6.5rem;
overflow: visible;
}
.strevinas-procedure-d2 .d2-body,
.strevinas-procedure-d2 .d2-body__grid {
overflow: visible;
}
.strevinas-design-d2.strevinas-procedure-page {
padding-bottom: 5rem;
}
.d2-hero {
position: relative;
min-height: var(--d2-hero-min);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
margin-top: -5rem;
padding-top: 5rem;
}
@media (max-width: 767px) {
.strevinas-procedure-d2 {
--d2-hero-min: min(56vh, 420px);
}
.d2-hero__img {
height: 105%;
object-position: center 30%;
}
.d2-hero__frame {
padding-top: 0.5rem;
padding-bottom: 1.35rem;
}
.d2-hero__crumbs {
margin-bottom: 0.5rem;
}
.d2-hero__title {
font-size: clamp(2.125rem, 8.5vw, 2.625rem) !important;
line-height: 1.06 !important;
}
.d2-hero__lead {
margin-top: 0.75rem;
font-size: 1.05rem;
}
.d2-hero__actions {
margin-top: 1.1rem;
gap: 0.5rem;
}
}
@media (min-width: 768px) and (max-width: 1099px) {
.strevinas-procedure-d2 {
--d2-hero-min: min(72vh, 620px);
}
}
.d2-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.d2-hero__img {
width: 100%;
height: 110%;
object-fit: cover;
object-position: center 20%;
will-change: transform;
}
.d2-hero__vignette {
position: absolute;
inset: 0;
background:
linear-gradient(to top, hsl(var(--background)) 0%, hsl(var(--background) / 0.55) 38%, transparent 68%),
linear-gradient(to right, hsl(var(--background) / 0.72) 0%, hsl(var(--background) / 0.2) 32%, transparent 58%),
radial-gradient(ellipse 80% 60% at 70% 30%, hsl(var(--primary) / 0.12), transparent 70%);
}
.d2-hero__shine {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 40%, hsl(var(--foreground) / 0.04) 50%, transparent 60%);
animation: d2-shine 9s ease-in-out infinite;
pointer-events: none;
}
@keyframes d2-shine {
0%, 100% { opacity: 0.35; transform: translateX(-8%); }
50% { opacity: 0.85; transform: translateX(8%); }
}
.d2-hero__frame {
position: relative;
z-index: 2;
width: 100%;
padding-top: 1.25rem;
padding-bottom: clamp(3rem, 8vw, 5.5rem);
}
.d2-hero__layout {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 1.5rem;
}
@media (min-width: 1100px) {
.d2-hero__layout {
grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
gap: clamp(2.5rem, 5vw, 5rem);
}
}
.d2-chapter--hero {
padding-bottom: 0;
}
.d2-chapter--hero + .d2-chapter {
border-top: none;
}
.d2-chapter--related {
padding-bottom: 0;
}
.d2-chapter--related + .d2-chapter {
border-top: none;
}
.strevinas-procedure-d2 .d2-chapter__marker--spacer {
pointer-events: none;
}
.strevinas-procedure-d2 .d2-chapter__marker--spacer .d2-chapter__num,
.strevinas-procedure-d2 .d2-chapter__marker--spacer .d2-chapter__line {
opacity: 0;
}
.d2-hero__content {
grid-column: 1;
grid-row: 1;
min-width: 0;
max-width: 52rem;
}
.d2-hero__crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.65rem;
margin-bottom: 1rem;
}
.d2-hero__crumbs a {
color: hsl(var(--foreground) / 0.72);
text-decoration: none;
transition: color 0.45s var(--ease-silk);
}
.d2-hero__crumbs a:hover,
.d2-hero__crumbs a:focus-visible {
color: hsl(var(--foreground));
}
.d2-hero__crumb-sep {
opacity: 0.8;
}
.d2-hero__eyebrow {
margin-bottom: 1rem;
}
.d2-hero__title {
font-size: clamp(2.75rem, 7vw, 5.5rem) !important;
line-height: 1.02 !important;
letter-spacing: 0.01em;
text-wrap: balance;
}
.d2-hero__lead {
margin-top: 1.25rem;
max-width: 36rem;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 2.2vw, 1.65rem);
font-style: italic;
line-height: 1.45;
color: hsl(var(--muted-foreground));
}
.d2-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.d2-hero__scroll {
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: end;
z-index: 3;
display: none;
flex-direction: column;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.15rem;
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.45s var(--ease-silk);
}
@media (min-width: 768px) {
.d2-hero__scroll {
display: flex;
}
}
@media (min-width: 1100px) {
.d2-hero__scroll {
width: 100%;
max-width: 22rem;
justify-self: end;
}
}
.d2-hero__scroll:hover {
color: hsl(var(--foreground));
}
.d2-hero__scroll-line {
display: block;
width: 1px;
height: 3rem;
background: hsl(var(--border));
position: relative;
overflow: hidden;
}
.d2-hero__scroll-line::after {
content: '';
position: absolute;
left: 0;
top: -100%;
width: 100%;
height: 100%;
background: hsl(var(--foreground));
animation: d2-scroll-pulse 2s ease-in-out infinite;
}
@keyframes d2-scroll-pulse {
0% { top: -100%; }
100% { top: 100%; }
}
.d2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 1.65rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
transition: background 0.5s var(--ease-silk), color 0.5s var(--ease-silk), border-color 0.5s var(--ease-silk), transform 0.45s var(--ease-silk), box-shadow 0.5s var(--ease-silk);
}
button.d2-btn {
cursor: pointer;
font-family: inherit;
appearance: none;
-webkit-appearance: none;
}
.d2-btn--solid {
color: hsl(var(--background));
background: hsl(var(--foreground));
border-color: hsl(var(--foreground));
}
.d2-btn--solid:hover,
.d2-btn--solid:focus-visible {
background: transparent;
color: hsl(var(--foreground));
box-shadow: 0 0 40px -8px hsl(var(--foreground) / 0.35);
}
.d2-btn--ghost {
color: hsl(var(--foreground));
border-color: hsl(var(--foreground) / 0.35);
background: hsl(var(--background) / 0.25);
backdrop-filter: blur(8px);
}
.d2-btn--ghost:hover,
.d2-btn--ghost:focus-visible {
border-color: hsl(var(--foreground));
background: hsl(var(--foreground) / 0.08);
}
.d2-btn--lg {
padding: 1rem 2rem;
}
.d2-btn--block {
width: 100%;
}
@media (max-width: 767px) {
.d2-btn--block-mobile {
flex: 1 1 100%;
width: 100%;
justify-content: center;
}
.d2-hero__actions {
flex-direction: column;
}
}
.d2-specs-shell {
width: 100%;
padding-bottom: 0.35rem;
}
.d2-specs-band {
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.72);
backdrop-filter: blur(10px);
padding: 1.15rem 1.25rem 1.25rem;
}
.d2-specs-band__eyebrow {
margin: 0 0 1rem;
}
.d2-specs-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1rem;
align-items: stretch;
}
/* iPhone / narrow mobile — μία στήλη, μεγάλα κείμενα, χωρίς σύνθλιψη */
@media (max-width: 639.98px) {
.d2-specs-shell {
overflow-x: clip;
}
.d2-specs-grid {
flex-direction: column;
gap: 0;
}
.d2-specs-grid__item {
padding: 0.85rem 0;
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.d2-specs-grid__item:first-child {
padding-top: 0;
}
.d2-specs-grid__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
@media (min-width: 640px) {
.d2-specs-grid {
gap: 0.85rem 1.1rem;
}
.d2-specs-grid__item {
padding: 0.1rem 0;
border-bottom: none;
}
}
@media (min-width: 900px) {
.d2-specs-grid {
gap: 0.9rem 1.15rem;
flex-wrap: nowrap;
}
}
@media (min-width: 1200px) {
.d2-specs-grid {
gap: 1rem 1.35rem;
}
}
.d2-specs-grid__item {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
padding: 0.1rem 0;
flex: 1 1 auto;
}
@media (min-width: 640px) {
.d2-specs-grid__item {
flex: 1 1 auto;
min-width: 9rem;
}
}
@media (min-width: 900px) {
.d2-specs-grid__item {
padding: 0;
min-width: 0;
flex: 1 1 0;
}
}
.d2-specs-grid__label {
font-size: clamp(0.6875rem, 1.9vw, 0.75rem);
letter-spacing: 0.16em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
line-height: 1.4;
}
.d2-specs-grid__value {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.0625rem, 3.8vw, 1.3125rem);
line-height: 1.35;
color: hsl(var(--foreground));
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
text-wrap: pretty;
max-width: 100%;
}
@media (min-width: 900px) {
.d2-specs-grid__label {
font-size: 0.75rem;
}
.d2-specs-grid__value {
font-size: clamp(0.9375rem, 0.7vw + 0.45rem, 1.0625rem);
}
}
@media (min-width: 1200px) {
.d2-specs-grid__label {
letter-spacing: 0.18em;
}
.d2-specs-grid__value {
font-size: clamp(0.9375rem, 0.55vw + 0.55rem, 1.0625rem);
line-height: 1.38;
}
}
.d2-body__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
}
@media (min-width: 1100px) {
.d2-body__grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 22rem);
gap: clamp(2.5rem, 5vw, 5rem);
}
}
.d2-chapter {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem 1.75rem;
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.strevinas-procedure-d2 .d2-chapter {
grid-template-columns: var(--d2-chapter-marker) minmax(0, 1fr);
column-gap: var(--d2-chapter-gap);
row-gap: 1.25rem;
}
.d2-chapter + .d2-chapter {
border-top: 1px solid hsl(var(--border));
padding-top: clamp(2.5rem, 5vw, 4rem);
}
.d2-chapter__marker {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding-top: 0.35rem;
}
.d2-chapter__num {
font-size: 0.625rem;
letter-spacing: 0.28em;
color: hsl(var(--muted-foreground));
}
.d2-chapter__line {
width: 1px;
flex: 1;
min-height: 3rem;
background: linear-gradient(to bottom, hsl(var(--primary)), transparent);
}
.d2-chapter__title {
font-size: clamp(2rem, 3.5vw, 3rem) !important;
line-height: 1.08 !important;
margin: 0 0 1.5rem;
}
/* --- Mobile: τιγκεταρισμένος chapter marker + flush related ----------- */
@media (max-width: 767px) {
.strevinas-procedure-d2 {
--d2-chapter-marker: 1.5rem;
--d2-chapter-gap: 0.85rem;
}
.strevinas-procedure-d2 .d2-chapter {
row-gap: 0.85rem;
}
.strevinas-procedure-d2 .d2-chapter__marker {
gap: 0.55rem;
padding-top: 0.15rem;
}
.strevinas-procedure-d2 .d2-chapter__num {
font-size: 0.5625rem;
letter-spacing: 0.22em;
}
.strevinas-procedure-d2 .d2-chapter__line {
min-height: 1.75rem;
}
/* Related: γκρεμίζουμε το marker offset ώστε ο τίτλος και το carousel
να ευθυγραμμίζονται με το container padding (px-6). */
.strevinas-procedure-d2 .d2-chapter.d2-chapter--related {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
}
.strevinas-procedure-d2 .d2-chapter--related .d2-chapter__marker--spacer {
display: none;
}
}
/* Body typography για το d2-prose ορίζεται στο τέλος (Editorial content). */
.d2-rail__sticky {
display: block;
}
@media (min-width: 1100px) {
.d2-rail {
position: sticky;
top: var(--d2-rail-sticky-top);
align-self: start;
height: fit-content;
z-index: 30;
}
.d2-rail__sticky.is-pinned {
position: fixed;
z-index: 30;
}
}
.d2-rail__grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.d2-rail__panel,
.d2-rail__cta {
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.35);
padding: 1.5rem 1.35rem;
}
.d2-rail__cta {
display: flex;
flex-direction: column;
}
.d2-rail__doctor-card {
position: relative;
display: grid;
grid-template-columns: 6.25rem minmax(0, 1fr);
align-items: stretch;
overflow: hidden;
min-width: 0;
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.22);
color: hsl(var(--foreground));
text-decoration: none;
transition:
border-color 0.45s var(--ease-silk),
transform 0.45s var(--ease-silk),
box-shadow 0.45s var(--ease-silk);
}
.d2-rail__doctor-card:hover,
.d2-rail__doctor-card:focus-visible {
border-color: hsl(var(--foreground) / 0.38);
transform: translateY(-2px);
box-shadow: 0 18px 40px hsl(var(--background) / 0.55);
}
.d2-rail__doctor-visual {
position: relative;
min-height: 8.75rem;
overflow: hidden;
background: hsl(var(--muted));
}
.d2-rail__doctor-visual-img {
width: 100%;
height: 100%;
min-height: 8.75rem;
object-fit: cover;
object-position: center 22%;
filter: grayscale(35%) contrast(1.04) brightness(1.05);
transition: transform 0.7s var(--ease-silk), filter 0.7s var(--ease-silk);
}
.d2-rail__doctor-card:hover .d2-rail__doctor-visual-img,
.d2-rail__doctor-card:focus-visible .d2-rail__doctor-visual-img {
transform: scale(1.04);
filter: grayscale(0%) contrast(1.02) brightness(1.08);
}
.d2-rail__doctor-visual-shade {
position: absolute;
inset: 0;
background:
linear-gradient(to right, transparent 58%, hsl(var(--background) / 0.72) 100%),
linear-gradient(to top, hsl(var(--background) / 0.35) 0%, transparent 28%);
pointer-events: none;
}
.d2-rail__doctor-visual-line {
display: none;
}
.d2-rail__doctor-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 1.15rem 1.2rem 1.2rem 0.95rem;
}
.d2-rail__doctor-content::before {
content: '';
display: block;
width: 2.25rem;
height: 1px;
margin-bottom: 0.65rem;
background: linear-gradient(90deg, hsl(var(--foreground) / 0.75), transparent);
transition: width 0.45s var(--ease-silk);
}
.d2-rail__doctor-card:hover .d2-rail__doctor-content::before,
.d2-rail__doctor-card:focus-visible .d2-rail__doctor-content::before {
width: 3.5rem;
}
.d2-rail__doctor-eyebrow {
margin: 0 0 0.45rem;
}
.d2-rail__doctor-name {
font-size: clamp(1.25rem, 3.5vw, 1.55rem);
line-height: 1.08;
margin: 0;
letter-spacing: 0.01em;
}
.d2-rail__doctor-role {
margin: 0.45rem 0 0;
font-size: 0.6875rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
}
.d2-rail__doctor-lead {
margin: 0.75rem 0 0;
font-family: 'Cormorant Garamond', serif;
font-size: 0.98rem;
font-style: italic;
line-height: 1.45;
color: hsl(var(--muted-foreground));
}
.d2-rail__doctor-cta {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.1rem;
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--foreground) / 0.28);
padding-bottom: 0.25rem;
transition: gap 0.35s var(--ease-silk), border-color 0.35s var(--ease-silk);
}
.d2-rail__doctor-card:hover .d2-rail__doctor-cta,
.d2-rail__doctor-card:focus-visible .d2-rail__doctor-cta {
gap: 0.75rem;
border-color: hsl(var(--foreground) / 0.65);
}
.d2-rail__doctor-cta-icon {
display: inline-block;
transition: transform 0.35s var(--ease-silk);
}
.d2-rail__doctor-card:hover .d2-rail__doctor-cta-icon,
.d2-rail__doctor-card:focus-visible .d2-rail__doctor-cta-icon {
transform: translateX(3px);
}
.d2-rail__ba {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 0.35rem 0.65rem;
align-items: center;
padding: 1.15rem 1.25rem;
border: 1px solid hsl(var(--border));
background:
linear-gradient(135deg, hsl(var(--card) / 0.5) 0%, hsl(var(--card) / 0.18) 100%);
color: hsl(var(--foreground));
text-decoration: none;
transition:
border-color 0.45s var(--ease-silk),
background 0.45s var(--ease-silk),
transform 0.45s var(--ease-silk);
}
.d2-rail__ba:hover,
.d2-rail__ba:focus-visible {
border-color: hsl(var(--foreground) / 0.35);
background:
linear-gradient(135deg, hsl(var(--card) / 0.62) 0%, hsl(var(--card) / 0.28) 100%);
transform: translateY(-1px);
}
.d2-rail__ba-eyebrow {
grid-column: 1 / -1;
margin: 0;
}
.d2-rail__ba-title {
grid-column: 1;
font-size: clamp(1.05rem, 2.8vw, 1.2rem);
line-height: 1.2;
margin: 0;
text-wrap: balance;
}
.d2-rail__ba-arrow {
grid-column: 2;
grid-row: 2;
font-size: 1.1rem;
line-height: 1;
color: hsl(var(--muted-foreground));
transition: transform 0.35s var(--ease-silk), color 0.35s var(--ease-silk);
}
.d2-rail__ba:hover .d2-rail__ba-arrow,
.d2-rail__ba:focus-visible .d2-rail__ba-arrow {
transform: translateX(3px);
color: hsl(var(--foreground));
}
.d2-rail__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.d2-rail__label {
display: block;
font-size: 0.5625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
margin-bottom: 0.25rem;
}
.d2-rail__value {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
line-height: 1.25;
}
.d2-rail__cta-title {
font-size: 1.65rem;
line-height: 1.15;
margin: 0.35rem 0 0.65rem;
}
.d2-rail__cta-text {
font-size: 0.875rem;
line-height: 1.65;
color: hsl(var(--muted-foreground));
margin: 0 0 1.25rem;
}
.d2-faq .wp-faq-schema-items.ui-accordion {
background: transparent;
border: none;
}
.d2-faq .wp-faq-schema-items.ui-accordion h3 {
background: transparent !important;
color: hsl(var(--foreground)) !important;
border: 1px solid hsl(var(--border)) !important;
border-bottom: none !important;
padding: 1.15rem 1.35rem !important;
margin: 0 !important;
font-family: Inter, sans-serif !important;
font-size: 0.9375rem !important;
font-weight: 400 !important;
transition: background 0.35s ease;
}
.d2-faq .wp-faq-schema-items.ui-accordion h3:last-of-type,
.d2-faq .wp-faq-schema-items.ui-accordion h3.ui-state-active {
border-bottom: 1px solid hsl(var(--border)) !important;
}
.d2-faq .wp-faq-schema-items.ui-accordion h3:hover {
background: hsl(var(--foreground) / 0.04) !important;
}
.d2-faq .wp-faq-schema-items.ui-accordion .ui-accordion-content {
background: transparent !important;
border: 1px solid hsl(var(--border)) !important;
border-top: none !important;
padding: 1.2rem 1.35rem !important;
color: hsl(var(--muted-foreground)) !important;
line-height: 1.75;
}
.d2-cta-immersive {
position: relative;
margin-top: clamp(2rem, 5vw, 4rem);
padding: clamp(4rem, 10vw, 7rem) 0;
overflow: hidden;
text-align: center;
}
.d2-cta-immersive__bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 80% at 50% 100%, hsl(var(--primary) / 0.18), transparent 65%),
linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--card) / 0.5) 50%, hsl(var(--background)) 100%);
animation: d2-cta-glow 8s ease-in-out infinite alternate;
}
@keyframes d2-cta-glow {
from { opacity: 0.75; transform: scale(1); }
to { opacity: 1; transform: scale(1.03); }
}
.d2-cta-immersive__inner {
position: relative;
z-index: 1;
}
.d2-cta-immersive__title {
font-size: clamp(2.25rem, 5vw, 4rem) !important;
line-height: 1.06 !important;
max-width: 18ch;
margin: 0 auto 1rem;
text-wrap: balance;
}
.d2-cta-immersive__lead {
max-width: 40ch;
margin: 0 auto 2rem;
color: hsl(var(--muted-foreground));
font-size: 1rem;
line-height: 1.7;
}
.d2-cta-immersive__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.d2-related {
padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
overflow: hidden;
}
.d2-related__head {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
.d2-related__head {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.d2-related__all {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.45s var(--ease-silk), gap 0.45s var(--ease-silk);
}
.d2-related__all:hover {
color: hsl(var(--foreground));
gap: 0.75rem;
}
.d2-related-carousel {
container-type: inline-size;
container-name: d2-related;
width: 100%;
}
.d2-related-carousel__frame {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.5rem, 1.5vw, 1rem);
}
.d2-related-carousel__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
padding: 0.25rem 0 1.25rem;
touch-action: pan-x pinch-zoom;
}
.d2-related-carousel.is-js .d2-related-carousel__viewport {
cursor: grab;
}
.d2-related-carousel .d2-related-carousel__viewport.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
scroll-behavior: auto;
}
.d2-related-carousel__viewport::-webkit-scrollbar {
display: none;
}
.d2-related-carousel__viewport:focus-visible {
outline: 1px solid hsl(var(--foreground) / 0.35);
outline-offset: 4px;
}
.d2-related-carousel__track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: clamp(1rem, 2vw, 1.35rem);
width: max-content;
}
.d2-related-carousel img {
-webkit-user-drag: none;
user-drag: none;
}
.d2-related__card {
flex: 0 0 86cqi;
max-width: 320px;
scroll-snap-align: start;
}
@container d2-related (min-width: 520px) {
.d2-related__card {
flex-basis: 46cqi;
max-width: 340px;
}
}
@container d2-related (min-width: 900px) {
.d2-related__card {
flex-basis: 31cqi;
max-width: 360px;
}
}
@container d2-related (min-width: 1200px) {
.d2-related__card {
flex-basis: 23.5cqi;
max-width: 380px;
}
}
.d2-related-carousel__btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin: 0;
padding: 0;
border: 1px solid hsl(var(--border));
border-radius: 1px;
background: hsl(var(--card) / 0.85);
color: hsl(var(--foreground));
cursor: pointer;
transition:
opacity 0.35s var(--ease-silk),
border-color 0.35s var(--ease-silk),
background 0.35s var(--ease-silk),
color 0.35s var(--ease-silk);
}
.d2-related-carousel--no-scroll .d2-related-carousel__btn {
display: none;
}
.d2-related-carousel__btn:disabled {
opacity: 0.28;
cursor: not-allowed;
pointer-events: none;
}
.d2-related-carousel__btn:not(:disabled):hover,
.d2-related-carousel__btn:not(:disabled):focus-visible {
border-color: hsl(var(--foreground) / 0.45);
background: hsl(var(--foreground));
color: hsl(var(--background));
outline: none;
}
.d2-related-carousel__btn-icon {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.65rem;
line-height: 1;
font-weight: 300;
display: block;
margin-top: -0.08em;
}
@media (max-width: 639px) {
.d2-related-carousel__frame {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 0.65rem 0.5rem;
}
.d2-related-carousel__viewport {
grid-column: 1 / -1;
grid-row: 1;
}
.d2-related-carousel__btn--prev {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
.d2-related-carousel__btn--next {
grid-column: 3;
grid-row: 2;
justify-self: end;
}
}
@media (prefers-reduced-motion: reduce) {
.d2-related-carousel__viewport {
scroll-behavior: auto;
}
}
.d2-related__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.3);
overflow: hidden;
transition: border-color 0.7s var(--ease-silk), transform 0.9s var(--ease-silk), box-shadow 0.9s var(--ease-silk);
}
@media (hover: hover) {
.d2-related__link:hover {
border-color: hsl(var(--foreground) / 0.45);
transform: translateY(-4px);
box-shadow: 0 28px 70px -28px hsl(0 0% 0% / 0.75);
}
.d2-related__link:hover .d2-related__media img {
transform: scale(1.06);
filter: grayscale(0.2) brightness(0.92) contrast(1.04);
}
}
.d2-related__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.d2-related__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.78) contrast(1.02);
transition: transform 1.2s var(--ease-silk),
filter 1.2s var(--ease-silk);
will-change: transform, filter;
}
.d2-related__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, hsl(var(--background) / 0.85) 0%, transparent 55%);
}
.d2-related__body {
padding: 1.25rem 1.35rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.d2-related__title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.45rem;
line-height: 1.2;
margin: 0;
}
.d2-related__excerpt {
margin: 0;
font-size: 0.8125rem;
line-height: 1.6;
color: hsl(var(--muted-foreground));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.d2-related__cta {
margin-top: auto;
padding-top: 0.75rem;
font-size: 0.5625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
transition: color 0.45s var(--ease-silk);
}
.d2-related__link:hover .d2-related__cta {
color: hsl(var(--foreground));
}
.d2-footer {
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.d2-footer__back {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-size: 0.625rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.45s var(--ease-silk), gap 0.45s var(--ease-silk);
}
.d2-footer__back:hover {
color: hsl(var(--foreground));
gap: 0.85rem;
}
.d2-fab {
position: fixed;
right: 1.25rem;
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
z-index: 45;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 4.5rem;
height: 4.5rem;
padding: 0 1.25rem;
border-radius: 999px;
text-decoration: none;
color: hsl(var(--background));
background: hsl(var(--foreground));
border: 1px solid hsl(var(--foreground));
box-shadow: 0 12px 40px -10px hsl(0 0% 0% / 0.65);
transform: translateY(120%) scale(0.9);
opacity: 0;
pointer-events: none;
transition: transform 0.55s var(--ease-silk), opacity 0.45s var(--ease-silk), box-shadow 0.45s var(--ease-silk);
}
.d2-fab.is-visible {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.d2-fab__ring {
position: absolute;
inset: -4px;
border-radius: inherit;
border: 1px solid hsl(var(--foreground) / 0.35);
animation: d2-fab-ping 2.5s ease-out infinite;
pointer-events: none;
}
@keyframes d2-fab-ping {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.2); opacity: 0; }
}
.d2-fab__text {
position: relative;
z-index: 1;
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
@media (hover: hover) {
.d2-fab:hover {
box-shadow: 0 16px 50px -8px hsl(var(--foreground) / 0.35);
}
}
/* Ενδεικτικό κόστος — modal + CF7 */
body.strevinas-cost-modal-open {
overflow: hidden;
}
.strevinas-cost-modal {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 3vw, 1.5rem);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.45s var(--ease-silk),
visibility 0.45s var(--ease-silk);
}
.strevinas-cost-modal[hidden] {
display: none !important;
}
.strevinas-cost-modal:not([hidden]) {
display: flex;
}
.strevinas-cost-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.strevinas-cost-modal__backdrop {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
border: 0;
background: hsl(0 0% 0% / 0.82);
cursor: pointer;
backdrop-filter: blur(4px);
}
.strevinas-cost-modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 42rem);
max-height: min(92vh, 52rem);
overflow: hidden;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
box-shadow: 0 28px 90px hsl(0 0% 0% / 0.55);
transform: translateY(1.25rem) scale(0.98);
opacity: 0;
transition:
transform 0.55s var(--ease-cinema),
opacity 0.45s var(--ease-silk);
pointer-events: auto;
}
.strevinas-cost-modal.is-open .strevinas-cost-modal__dialog {
transform: translateY(0) scale(1);
opacity: 1;
}
.strevinas-cost-modal__close {
position: absolute;
top: 0.65rem;
right: 0.65rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
margin: 0;
padding: 0;
border: 1px solid hsl(var(--border));
border-radius: 1px;
background: hsl(var(--background) / 0.65);
color: hsl(var(--foreground));
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
transition:
background 0.35s var(--ease-silk),
border-color 0.35s var(--ease-silk),
color 0.35s var(--ease-silk);
}
.strevinas-cost-modal__close:hover,
.strevinas-cost-modal__close:focus-visible {
background: hsl(var(--foreground));
border-color: hsl(var(--foreground));
color: hsl(var(--background));
outline: none;
}
.strevinas-cost-modal__head {
flex-shrink: 0;
padding: 1.35rem 3.25rem 1rem 1.35rem;
border-bottom: 1px solid hsl(var(--border) / 0.65);
}
.strevinas-cost-modal__eyebrow {
margin: 0 0 0.65rem;
}
.strevinas-cost-modal__title {
margin: 0 0 0.5rem;
font-size: clamp(1.75rem, 4vw, 2.35rem);
line-height: 1.08;
letter-spacing: -0.02em;
}
.strevinas-cost-modal__lead {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: hsl(var(--muted-foreground));
}
.strevinas-cost-modal__body {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 1.25rem 1.35rem 1.5rem;
-webkit-overflow-scrolling: touch;
}
.strevinas-cost-modal__body.strevinas-contact-page__form .cf7-field,
.strevinas-cost-modal__body.strevinas-contact-page__form fieldset.cf7-field {
margin-bottom: 1.35rem;
}
@media (max-width: 639.98px) {
.strevinas-cost-modal__dialog {
width: 100%;
max-height: 94vh;
}
.strevinas-cost-modal__head {
padding: 1.15rem 3rem 0.85rem 1.15rem;
}
.strevinas-cost-modal__body {
padding: 1rem 1.15rem 1.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.strevinas-cost-modal,
.strevinas-cost-modal__dialog {
transition: none !important;
}
.strevinas-cost-modal,
.strevinas-cost-modal.is-open .strevinas-cost-modal__dialog {
opacity: 1 !important;
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.d2-hero__shine,
.d2-hero__scroll-line::after,
.d2-cta-immersive__bg,
.d2-fab__ring {
animation: none !important;
}
.d2-hero__img,
.d2-related__media img,
.d2-related__link,
.d2-rail__doctor-card,
.d2-rail__doctor-visual-img,
.d2-rail__doctor-cta,
.d2-rail__doctor-cta-icon,
.d2-fab {
transition: none !important;
}
.d2-rail__doctor-card:hover,
.d2-rail__doctor-card:focus-visible {
transform: none;
}
.d2-hero__img {
height: 100%;
}
}
/* =========================================================================
Editorial content typography
--------------------------------------------------------------------------
Ενοποιημένη ρυθμική για περιεχόμενο που έρχεται από `the_content()` στις
σελίδες «Επεμβάσεις» και «Θεραπείες» (D1, D2, hub). Χρησιμοποιείται ως
replacement για τα Tailwind Typography (.prose) classes — τα οποία ΔΕΝ
φορτώνονται μαζί με το Tailwind Play CDN.
Φιλοσοφία (ευθυγραμμισμένη με τη ρυθμική του theme):
- Cormorant Garamond για headings, Inter 300 για body
- Hairline borders (1px) — όχι heavy decorations
- Μονόχρωμη παλέτα μέσω --foreground / --muted-foreground / --border
- Γενναιόδωρο vertical rhythm (1.5–2rem ανάμεσα σε στοιχεία)
- clamp() για responsive sizing — ίδια προσέγγιση με .d2-chapter__title
- Sober underline για links με animated transition
========================================================================= */
.d2-prose,
.strevinas-procedure__body,
.strevinas-hub .prose,
:is(.strevinas-hub-article, .strevinas-page-article) .prose {
color: hsl(var(--muted-foreground));
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.0625rem;
line-height: 1.85;
letter-spacing: 0.01em;
}
@media (min-width: 768px) {
.d2-prose,
.strevinas-procedure__body,
.strevinas-hub .prose,
:is(.strevinas-hub-article, .strevinas-page-article) .prose {
font-size: 1.125rem;
line-height: 1.9;
}
}
/* --- Direct children rhythm: αυτόματο gap σε όλα τα block παιδιά --------- */
.d2-prose > *,
.strevinas-procedure__body > *,
.strevinas-hub .prose > *,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * {
margin: 0;
}
.d2-prose > * + *,
.strevinas-procedure__body > * + *,
.strevinas-hub .prose > * + *,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * + * {
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.d2-prose > * + *,
.strevinas-procedure__body > * + *,
.strevinas-hub .prose > * + *,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * + * {
margin-top: 1.75rem;
}
}
.d2-prose > p:empty,
.strevinas-procedure__body > p:empty,
.strevinas-hub .prose > p:empty,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > p:empty {
display: none;
}
/* --- Headings ----------------------------------------------------------- */
.d2-prose :is(h2, h3, h4, h5, h6),
.strevinas-procedure__body :is(h2, h3, h4, h5, h6),
.strevinas-hub .prose :is(h2, h3, h4, h5, h6),
:is(.strevinas-hub-article, .strevinas-page-article) .prose :is(h2, h3, h4, h5, h6) {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
color: hsl(var(--foreground));
letter-spacing: 0.005em;
text-wrap: balance;
}
.d2-prose > :is(h2, h3, h4, h5, h6) + *,
.strevinas-procedure__body > :is(h2, h3, h4, h5, h6) + *,
.strevinas-hub .prose > :is(h2, h3, h4, h5, h6) + *,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > :is(h2, h3, h4, h5, h6) + * {
margin-top: 1rem;
}
.d2-prose > * + h2,
.strevinas-procedure__body > * + h2,
.strevinas-hub .prose > * + h2,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * + h2 {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: clamp(1.75rem, 3vw, 2.25rem);
border-top: 1px solid hsl(var(--border));
}
.d2-prose > * + h3,
.strevinas-procedure__body > * + h3,
.strevinas-hub .prose > * + h3,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * + h3 {
margin-top: clamp(2rem, 3.5vw, 2.5rem);
}
.d2-prose > * + h4,
.strevinas-procedure__body > * + h4,
.strevinas-hub .prose > * + h4,
:is(.strevinas-hub-article, .strevinas-page-article) .prose > * + h4 {
margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.d2-prose h2,
.strevinas-procedure__body h2,
.strevinas-hub .prose h2,
:is(.strevinas-hub-article, .strevinas-page-article) .prose h2 {
font-size: clamp(1.6rem, 2.6vw, 2.125rem);
line-height: 1.18;
}
.d2-prose h3,
.strevinas-procedure__body h3,
.strevinas-hub .prose h3,
:is(.strevinas-hub-article, .strevinas-page-article) .prose h3 {
font-size: clamp(1.35rem, 2.1vw, 1.65rem);
line-height: 1.22;
}
.d2-prose h4,
.strevinas-procedure__body h4,
.strevinas-hub .prose h4,
:is(.strevinas-hub-article, .strevinas-page-article) .prose h4 {
font-size: clamp(1.125rem, 1.7vw, 1.3rem);
line-height: 1.3;
letter-spacing: 0.01em;
}
.d2-prose h5,
.d2-prose h6,
.strevinas-procedure__body h5,
.strevinas-procedure__body h6,
.strevinas-hub .prose h5,
.strevinas-hub .prose h6,
:is(.strevinas-hub-article, .strevinas-page-article) .prose h5,
:is(.strevinas-hub-article, .strevinas-page-article) .prose h6 {
font-family: 'Inter', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: hsl(var(--foreground));
}
/* --- Inline text -------------------------------------------------------- */
.d2-prose strong,
.strevinas-procedure__body strong,
.strevinas-hub .prose strong,
:is(.strevinas-hub-article, .strevinas-page-article) .prose strong {
color: hsl(var(--foreground));
font-weight: 500;
}
.d2-prose em,
.d2-prose i,
.strevinas-procedure__body em,
.strevinas-procedure__body i,
.strevinas-hub .prose em,
.strevinas-hub .prose i,
:is(.strevinas-hub-article, .strevinas-page-article) .prose em,
:is(.strevinas-hub-article, .strevinas-page-article) .prose i {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
color: hsl(var(--foreground) / 0.92);
}
.d2-prose a:not([class]),
.strevinas-procedure__body a:not([class]),
.strevinas-hub .prose a:not([class]),
:is(.strevinas-hub-article, .strevinas-page-article) .prose a:not([class]) {
color: hsl(var(--foreground));
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: hsl(var(--foreground) / 0.35);
text-underline-offset: 0.25em;
transition: text-decoration-color 0.45s var(--ease-silk), color 0.35s var(--ease-silk);
}
.d2-prose a:not([class]):hover,
.d2-prose a:not([class]):focus-visible,
.strevinas-procedure__body a:not([class]):hover,
.strevinas-procedure__body a:not([class]):focus-visible,
.strevinas-hub .prose a:not([class]):hover,
.strevinas-hub .prose a:not([class]):focus-visible,
:is(.strevinas-hub-article, .strevinas-page-article) .prose a:not([class]):hover,
:is(.strevinas-hub-article, .strevinas-page-article) .prose a:not([class]):focus-visible {
text-decoration-color: hsl(var(--foreground));
}
/* --- Lists -------------------------------------------------------------- */
.d2-prose ul,
.d2-prose ol,
.strevinas-procedure__body ul,
.strevinas-procedure__body ol,
.strevinas-hub .prose ul,
.strevinas-hub .prose ol,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ul,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ol {
padding-left: 1.5rem;
list-style-position: outside;
}
.d2-prose ul,
.strevinas-procedure__body ul,
.strevinas-hub .prose ul,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ul {
list-style: none;
padding-left: 0;
}
.d2-prose ol,
.strevinas-procedure__body ol,
.strevinas-hub .prose ol,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ol {
list-style: none;
counter-reset: prose-ol;
padding-left: 0;
}
.d2-prose li,
.strevinas-procedure__body li,
.strevinas-hub .prose li,
:is(.strevinas-hub-article, .strevinas-page-article) .prose li {
position: relative;
padding-left: 1.75rem;
line-height: inherit;
}
.d2-prose li + li,
.strevinas-procedure__body li + li,
.strevinas-hub .prose li + li,
:is(.strevinas-hub-article, .strevinas-page-article) .prose li + li {
margin-top: 0.7rem;
}
.d2-prose ul > li::before,
.strevinas-procedure__body ul > li::before,
.strevinas-hub .prose ul > li::before,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ul > li::before {
content: '';
position: absolute;
left: 0;
top: 0.85em;
width: 0.9rem;
height: 1px;
background: hsl(var(--foreground) / 0.55);
}
.d2-prose ol,
.strevinas-procedure__body ol,
.strevinas-hub .prose ol,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ol {
counter-reset: prose-ol;
}
.d2-prose ol > li,
.strevinas-procedure__body ol > li,
.strevinas-hub .prose ol > li,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ol > li {
counter-increment: prose-ol;
padding-left: 2.25rem;
}
.d2-prose ol > li::before,
.strevinas-procedure__body ol > li::before,
.strevinas-hub .prose ol > li::before,
:is(.strevinas-hub-article, .strevinas-page-article) .prose ol > li::before {
content: counter(prose-ol, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.05em;
font-family: 'Inter', sans-serif;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.18em;
color: hsl(var(--foreground) / 0.55);
}
.d2-prose li > ul,
.d2-prose li > ol,
.strevinas-procedure__body li > ul,
.strevinas-procedure__body li > ol,
.strevinas-hub .prose li > ul,
.strevinas-hub .prose li > ol,
:is(.strevinas-hub-article, .strevinas-page-article) .prose li > ul,
:is(.strevinas-hub-article, .strevinas-page-article) .prose li > ol {
margin-top: 0.7rem;
}
/* --- Blockquote / pull-quote ------------------------------------------- */
.d2-prose blockquote,
.strevinas-procedure__body blockquote,
.strevinas-hub .prose blockquote,
:is(.strevinas-hub-article, .strevinas-page-article) .prose blockquote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(1.25rem, 2vw, 1.55rem);
line-height: 1.45;
color: hsl(var(--foreground) / 0.92);
padding: 0.5rem 0 0.5rem 1.5rem;
border-left: 1px solid hsl(var(--foreground) / 0.45);
max-width: 42rem;
}
.d2-prose blockquote p,
.strevinas-procedure__body blockquote p,
.strevinas-hub .prose blockquote p,
:is(.strevinas-hub-article, .strevinas-page-article) .prose blockquote p {
margin: 0;
}
.d2-prose blockquote p + p,
.strevinas-procedure__body blockquote p + p,
.strevinas-hub .prose blockquote p + p,
:is(.strevinas-hub-article, .strevinas-page-article) .prose blockquote p + p {
margin-top: 0.85rem;
}
/* --- Horizontal rule --------------------------------------------------- */
.d2-prose hr,
.strevinas-procedure__body hr,
.strevinas-hub .prose hr,
:is(.strevinas-hub-article, .strevinas-page-article) .prose hr {
border: 0;
border-top: 1px solid hsl(var(--border));
margin: clamp(2.25rem, 4vw, 3rem) 0;
width: 100%;
}
/* --- Tables ------------------------------------------------------------ */
.d2-prose table,
.strevinas-procedure__body table,
.strevinas-hub .prose table,
:is(.strevinas-hub-article, .strevinas-page-article) .prose table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
line-height: 1.6;
}
.d2-prose :is(th, td),
.strevinas-procedure__body :is(th, td),
.strevinas-hub .prose :is(th, td),
:is(.strevinas-hub-article, .strevinas-page-article) .prose :is(th, td) {
text-align: left;
padding: 0.85rem 1rem;
border-bottom: 1px solid hsl(var(--border));
vertical-align: top;
}
.d2-prose th,
.strevinas-procedure__body th,
.strevinas-hub .prose th,
:is(.strevinas-hub-article, .strevinas-page-article) .prose th {
font-weight: 500;
color: hsl(var(--foreground));
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.6875rem;
}
/* --- Figures / images / video ------------------------------------------ */
.d2-prose img,
.d2-prose figure,
.strevinas-procedure__body img,
.strevinas-procedure__body figure,
.strevinas-hub .prose img,
.strevinas-hub .prose figure,
:is(.strevinas-hub-article, .strevinas-page-article) .prose img,
:is(.strevinas-hub-article, .strevinas-page-article) .prose figure {
max-width: 100%;
height: auto;
}
.d2-prose figure,
.strevinas-procedure__body figure,
.strevinas-hub .prose figure,
:is(.strevinas-hub-article, .strevinas-page-article) .prose figure {
margin: 0;
}
.d2-prose figcaption,
.strevinas-procedure__body figcaption,
.strevinas-hub .prose figcaption,
:is(.strevinas-hub-article, .strevinas-page-article) .prose figcaption {
margin-top: 0.85rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
letter-spacing: 0.04em;
}
/* --- Inline code ------------------------------------------------------- */
.d2-prose code,
.strevinas-procedure__body code,
.strevinas-hub .prose code,
:is(.strevinas-hub-article, .strevinas-page-article) .prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.875em;
padding: 0.1em 0.4em;
background: hsl(var(--foreground) / 0.06);
border: 1px solid hsl(var(--border));
}
/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.d2-prose a:not([class]),
.strevinas-procedure__body a:not([class]),
.strevinas-hub .prose a:not([class]),
:is(.strevinas-hub-article, .strevinas-page-article) .prose a:not([class]) {
transition: none;
}
}