/* =====================================================================
Evelpidou Editorial v3 — modern minimalist editorial
Targeted at the REAL selectors from scholar.uoa.gr/evelpidou DOM.
--------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,400;1,500&family=Cormorant+SC:wght@500&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');
/* ---------- Tokens ----------
Ink: #111111
Body: #1f1b16
Soft body: #5b554c
Accent: #b07a4a (refined sienna)
Muted: #8b6f47
Hairline: #e6dfd1
Page: #ffffff
*/
/* ===== 1. Base typography & layout =================================== */
html, html body {
font-family: 'EB Garamond', Garamond, Georgia, serif !important;
color: #1f1b16 !important;
background: #faf6ed !important;
font-size: 17px !important;
line-height: 1.7 !important;
-webkit-font-smoothing: antialiased !important;
}
html body p, html body li, html body td, html body dd, html body dt {
font-family: 'EB Garamond', Garamond, Georgia, serif !important;
font-size: 17px !important;
line-height: 1.75 !important;
color: #1f1b16 !important;
}
/* ===== 2. Headings — italic Cormorant ================================*/
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .pane-title, html body .block-title,
html body .views-row h2, html body .views-row h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 0.005em !important;
line-height: 1.15 !important;
color: #111111 !important;
}
html body h1, html body #page-title, html body .os-page-title, html body .pane-page-title h1 {
font-size: 56px !important;
font-weight: 400 !important;
font-style: italic !important;
margin: 0 0 28px 0 !important;
border: none !important;
padding: 0 !important;
}
html body h2 { font-size: 36px !important; font-style: italic !important; margin: 40px 0 18px 0 !important; }
html body h3, html body .pane-title, html body .block-title { font-size: 26px !important; font-style: italic !important; color: #111111 !important; margin: 32px 0 14px 0 !important; }
html body h4 { font-size: 22px !important; font-style: italic !important; color: #b07a4a !important; margin: 24px 0 10px 0 !important; }
html body h5, html body h6 { font-size: 14px !important; font-family: system-ui, -apple-system, sans-serif !important; font-style: normal !important; font-weight: 600 !important; color: #8b6f47 !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; }
/* ===== 3. NAVBAR (single row: menu left, search far right) =========== */
/* Collapse the entire #header to zero — it just hosts the absolutely-positioned search.
z-index 50 puts it above the sticky #menu-bar (z-index: 40) so the
search icon at top-right is actually clickable; otherwise the navbar
intercepts pointer events on top of the icon area. */
html body header#header {
position: relative !important;
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
height: 0 !important;
overflow: visible !important;
z-index: 50 !important;
}
html body #header-container, html body #header-panels {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
/* Hide everything in #header except the search */
html body .region-header-first,
html body .region-header-second,
html body #block-boxes-site-logo,
html body #block-boxes-site-info,
html body #block-boxes-shield {
display: none !important;
}
/* Search: fixed positioning relative to the viewport, NOT to #page.
Why fixed instead of absolute: #page has max-width 1200 and is
centered, so an `absolute; right: 32` search anchors to the page
edge — which can collide with the last menu item when the page
is fully filled. Anchoring to the viewport instead means the
search always has the same physical right offset, the menu items
keep their content-column alignment, and there's room for the
expanded 240px input + a real gap. z-index 60 keeps it above the
sticky #menu-bar (z-index 40). scroll-margin-top suppresses the
browser auto-scroll when the input is tab-focused. */
html body .region-header-third {
position: fixed !important;
top: 24px !important;
right: 32px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 60 !important;
pointer-events: auto !important;
background: transparent !important;
border: none !important;
scroll-margin-top: 80px !important;
}
html body .region-header-third .region-inner,
html body #block-os-search-db-site-search,
html body #block-os-search-db-site-search > .block-inner,
html body .region-header-third form,
html body .region-header-third .container-inline,
html body .region-header-third .form-item {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Slim navbar layout: name (left) ↔ flexible space ↔ search (right) */
html body #header-panels, html body #header-panels.three-col,
html body #header-panels.at-panel, html body #header .at-panel,
html body #header .gpanel, html body #header .panel-display {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 24px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
height: auto !important;
}
/* Crush any inherited min-height / fixed-height on header chain */
html body #header, html body #header-container,
html body #header-panels, html body #header *,
html body #menu-bar, html body #menu-bar * {
min-height: 0 !important;
line-height: normal !important;
}
html body #header-container {
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
html body #header-panels > .region,
html body #header-panels > .region > .region-inner {
min-height: 0 !important;
height: auto !important;
}
/* Override any inline height eq.js might set */
html body #header-panels .region-inner[style*="height"],
html body #header-panels .region[style*="height"] {
height: auto !important;
min-height: 0 !important;
}
/* Region wrappers — strip hwpi_classic chrome and fix layout */
html body .region-header-first, html body .region-header-second, html body .region-header-third {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Two-region layout: name left, search right (photo region hidden) */
html body .region-header-first { order: 1 !important; flex: 0 0 auto !important; display: none !important; }
html body .region-header-second { order: 2 !important; flex: 0 0 auto !important; }
html body .region-header-third { order: 3 !important; flex: 0 0 auto !important; text-align: right !important; margin-left: auto !important; }
html body .region-header-second .region-inner,
html body .region-header-first .region-inner,
html body .region-header-third .region-inner {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
}
/* The site-info block (name + tagline) */
html body #block-boxes-site-info {
background: transparent !important;
border: none !important;
padding: 4px 0 0 0 !important;
}
html body #block-boxes-site-info h1 {
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
html body #block-boxes-site-info h1 a,
html body #boxes-box-site_info h1 a {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
font-style: italic !important;
font-size: 24px !important;
line-height: 1 !important;
color: #111111 !important;
text-decoration: none !important;
border: none !important;
text-shadow: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
display: inline-block !important;
transition: color 0.18s ease !important;
}
html body #block-boxes-site-info h1 a:hover {
color: #b07a4a !important;
}
html body #block-boxes-site-info h2,
html body #boxes-box-site_info h2 {
font-family: 'EB Garamond', Georgia, serif !important;
font-weight: 400 !important;
font-style: italic !important;
font-size: 17px !important;
line-height: 1.3 !important;
color: #5b554c !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
letter-spacing: 0.01em !important;
white-space: nowrap !important;
}
/* Site photo — make circular, refined */
html body #block-boxes-site-logo {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
html body #boxes-box-site_logo img,
html body #block-boxes-site-logo img {
width: 96px !important;
height: 96px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(31,27,22,0.10) !important;
}
/* Shield (UoA logo) — soften */
html body #block-boxes-shield {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
html body #scholar-shield img {
max-height: 52px !important;
width: auto !important;
opacity: 0.85 !important;
}
/* Right column: stack shield + search tightly */
html body .region-header-third .region-inner {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 10px !important;
}
/* Search — pill input, sits directly below shield */
html body #block-os-search-db-site-search {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: right !important;
}
html body #block-os-search-db-site-search .container-inline {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
html body #block-os-search-db-site-search .form-item {
margin: 0 !important;
}
html body #block-os-search-db-site-search .form-item-search-block-form {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
html body #block-os-search-db-site-search .container-inline {
display: block !important;
}
/* === Search — click-to-expand, click-or-hover state ======================
Collapsed: just a sienna magnifier (24px target, painted via SVG bg).
Expanded: a hairline-bottom italic input. Placeholder is italic
Cormorant — same italic voice as the active nav, threading the
editorial vocabulary across components. Caret matches sienna. */
html body #block-os-search-db-site-search input.form-text,
html body #block-os-search-db-site-search input[type="search"] {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: 17px !important;
color: #1f1b16 !important;
direction: ltr !important;
text-align: left !important;
caret-color: #b07a4a !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: left 4px center !important;
background-origin: padding-box !important;
background-size: 18px 18px !important;
border: none !important;
border-bottom: 1px solid transparent !important;
border-radius: 0 !important;
padding: 6px 0 6px 28px !important;
margin: 0 !important;
width: 28px !important;
cursor: pointer !important;
overflow: hidden !important;
text-overflow: clip !important;
box-shadow: none !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: width 0.36s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.26s ease,
background-image 0.18s ease !important;
}
/* Expanded — hover or focus on the search container */
html body #block-os-search-db-site-search:hover input.form-text,
html body #block-os-search-db-site-search:focus-within input.form-text,
html body #block-os-search-db-site-search input.form-text:focus {
width: 240px !important;
border-bottom-color: #b07a4a !important;
cursor: text !important;
}
/* Placeholder reveals only when expanded — italic Cormorant Garamond,
muted sienna so it reads "in voice" with the rest of the editorial
system without competing with real input text. */
html body #block-os-search-db-site-search input.form-text::placeholder {
color: transparent !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: 17px !important;
letter-spacing: 0.005em !important;
opacity: 0 !important;
transition: color 0.22s ease, opacity 0.22s ease !important;
}
html body #block-os-search-db-site-search:hover input.form-text::placeholder,
html body #block-os-search-db-site-search:focus-within input.form-text::placeholder,
html body #block-os-search-db-site-search input.form-text:focus::placeholder {
color: #8b6f47 !important;
opacity: 0.7 !important;
}
/* Kill the WebKit search-cancel ✕ button (the X clear thing) */
html body #block-os-search-db-site-search input::-webkit-search-cancel-button,
html body #block-os-search-db-site-search input::-webkit-search-decoration,
html body #block-os-search-db-site-search input::-webkit-search-results-button,
html body #block-os-search-db-site-search input::-webkit-search-results-decoration {
-webkit-appearance: none !important;
display: none !important;
}
/* Hide submit visually but keep in DOM so Enter still triggers form submission */
html body #block-os-search-db-site-search .form-actions,
html body #block-os-search-db-site-search input.form-submit,
html body #block-os-search-db-site-search #edit-actions,
html body #block-os-search-db-site-search #edit-submit {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important;
white-space: nowrap !important; border: 0 !important;
}
/* ===== 4. MENU (real selector: #nice-menu-primary-menu) ==============*/
html body div#menu-bar, html body #menu-bar.nav, html body div.nav {
background: transparent !important;
background-image: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0 32px !important;
margin: 0 !important;
height: 92px !important;
min-height: 92px !important;
display: flex !important;
align-items: center !important;
/* Sticky-aware: when body has the scrolled class, navbar compacts.
Background/backdrop/shadow live on a ::before pseudo-element below
so they can bleed past the #page max-width to the viewport edges. */
transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
min-height 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Make the navbar sticky so the scrolled state is actually felt.
Specificity matched against `html body #menu-bar.nav` so this wins. */
html body div#menu-bar.nav,
html body div#menu-bar {
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
}
/* === Full-bleed background for the sticky navbar ========================
#menu-bar lives inside #page { max-width: 1200px }, so its own
background can't extend past the centered page-wrapper. A pseudo
element extending -100vw on each side guarantees full coverage
regardless of where #menu-bar actually sits in the viewport. The
body's overflow-x: clip trims the pseudo at the viewport edges, so
the visible portion is always exactly the viewport width — no
dependence on transform alignment, no scrollbar-rounding edge case,
no aspect-ratio gotcha. */
html body div#menu-bar::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -100vw !important;
right: -100vw !important;
width: auto !important;
transform: none !important;
background: transparent !important;
box-shadow: 0 0 0 transparent !important;
z-index: -1 !important;
pointer-events: none !important;
transition: background 0.32s ease,
box-shadow 0.32s ease,
backdrop-filter 0.32s ease !important;
}
html body.evelpidou-scrolled div#menu-bar {
height: 68px !important;
min-height: 68px !important;
}
html body.evelpidou-scrolled div#menu-bar::before {
background: rgba(250, 246, 237, 0.92) !important;
backdrop-filter: saturate(140%) blur(8px) !important;
-webkit-backdrop-filter: saturate(140%) blur(8px) !important;
box-shadow: 0 12px 32px rgba(31, 27, 22, 0.05) !important;
}
html body #block-os-primary-menu, html body #block-os-primary-menu.menu-wrapper {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
flex: 1 1 auto !important;
}
/* Kill any bottom margin/padding hwpi_classic puts between #header and #menu-bar */
html body header#header { margin-bottom: 0 !important; }
html body div#menu-bar { margin-top: 0 !important; }
html body #header-container { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body ul.nice-menu, html body #nice-menu-primary-menu,
html body ul.nice-menu-down, html body ul#nice-menu-primary-menu {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 32px 0 0 !important; /* small breathing margin only; search is now fixed to viewport, not in this container's flow */
margin: 0 !important;
list-style: none !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
justify-content: flex-start !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
}
html body #nice-menu-primary-menu > li {
pointer-events: auto !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
html body ul.nice-menu > li,
html body #nice-menu-primary-menu > li {
background: transparent !important;
background-image: none !important;
border: none !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
/* === The two-voice nav ====================================================
Resting state ("the index"):
Cormorant SC, true small caps. Calm, uniform x-height, labelled list.
Hover/active state ("the chosen path"):
Cormorant Garamond ITALIC — the same typographic voice the page
headings use. The word transitions from a labelled section to a
spoken chapter title. The font snap is intentional — CSS doesn't
transition font-family/style, and that micro-snap IS the gesture.
========================================================================*/
html body ul.nice-menu > li > a,
html body #nice-menu-primary-menu > li > a,
html body ul.nice-menu li a,
html body #nice-menu-primary-menu li a {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-size: 19px !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0.07em !important;
text-transform: lowercase !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
color: #1f1b16 !important;
background: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 18px !important;
margin: 0 !important;
text-decoration: none !important;
text-shadow: none !important;
box-shadow: none !important;
display: inline-block !important;
position: relative !important;
line-height: 1 !important;
transition: color 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Hover state: stays in Cormorant SC. Just shifts to sienna and lets
the underline draw beneath. NO font-family/style snap on hover — that
jolt was visually jarring. The two-voice italic is reserved for the
permanent active state (below), which has no transition to be weird
about because the user lands on it already in voice.
We explicitly RE-DECLARE the resting font properties here so that any
leftover deployed-CSS hover rule that set italic is fully overridden,
not silently inherited. Defensive against stale cached versions. */
html body #nice-menu-primary-menu > li:hover > a,
html body #nice-menu-primary-menu > li.over > a,
html body #nice-menu-primary-menu > li > a:hover {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-weight: 500 !important;
text-transform: lowercase !important;
letter-spacing: 0.07em !important;
color: #b07a4a !important;
}
/* Same defensive override for non-hover-but-active-trail anchors that
nice_menus might decorate with .over on the parent: keep them in SC. */
html body #nice-menu-primary-menu > li.over > a:not(.active):not(.active-trail) {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
text-transform: lowercase !important;
letter-spacing: 0.07em !important;
}
/* Active state — the "you are here" marker. Permanent italic Cormorant
Garamond + sienna; same italic voice as page headings. No transition
from another state, so it never snaps. No baseline shift either —
the italic voice + sienna + persistent underline are signal enough. */
html body #nice-menu-primary-menu > li > a.active,
html body #nice-menu-primary-menu > li > a.active-trail {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0.005em !important;
color: #b07a4a !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1, "ss01" 1 !important;
}
/* No vertical separators between items */
html body #nice-menu-primary-menu > li + li > a:before {
content: none !important;
display: none !important;
}
/* The hover/active underline — a sienna line that draws left-to-right
under the word, like a writer's pen marking a chosen passage. Lives
on :before so it doesn't fight the chevron on :after for menuparent
items. 1.25px feels more confident than 1px without crossing into
"rule" territory. Endpoints match the new 18px padding so the line
wraps the text not the click target. */
html body #nice-menu-primary-menu > li > a:before {
content: "" !important;
position: absolute !important;
left: 18px !important;
right: 18px !important;
bottom: 8px !important;
height: 1.25px !important;
background: #b07a4a !important;
transform: scaleX(0) !important;
transform-origin: left center !important;
transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.26s ease !important;
display: block !important;
border: none !important;
border-radius: 0 !important;
width: auto !important;
margin: 0 !important;
opacity: 0.85 !important;
pointer-events: none !important;
}
html body #nice-menu-primary-menu > li:hover > a:before,
html body #nice-menu-primary-menu > li.over > a:before,
html body #nice-menu-primary-menu > li > a:hover:before,
html body #nice-menu-primary-menu > li > a.active:before,
html body #nice-menu-primary-menu > li > a.active-trail:before {
transform: scaleX(1) !important;
content: "" !important;
}
/* Active item's underline is fuller — a permanent sienna mark of "you
are here", drawn at full extent so it doesn't depend on hover. */
html body #nice-menu-primary-menu > li > a.active:before,
html body #nice-menu-primary-menu > li > a.active-trail:before {
opacity: 1 !important;
height: 1.5px !important;
}
/* Strip default backgrounds/borders/shadows on hover/active without
disturbing the two-voice transformation declared earlier. */
html body ul.nice-menu > li > a:hover,
html body ul.nice-menu > li:hover > a,
html body ul.nice-menu > li.over > a,
html body ul.nice-menu > li > a.active,
html body ul.nice-menu > li > a.active-trail,
html body #nice-menu-primary-menu > li > a:hover,
html body #nice-menu-primary-menu > li:hover > a,
html body #nice-menu-primary-menu > li.over > a,
html body #nice-menu-primary-menu > li > a.active,
html body #nice-menu-primary-menu > li > a.active-trail,
html body #nice-menu-primary-menu li a.active {
background: transparent !important;
background-image: none !important;
border: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Tighten gap between menu and content area */
html body #columns { margin-top: 0 !important; padding-top: 8px !important; }
html body .content-inner { padding-top: 0 !important; }
/* ================================================================
MASTER ARROW KILL — wipe every possible indicator source
so no blue ▼ can sneak through. Then re-add only our chevron.
================================================================ */
/* Strip any background-image on menuparent (nice_menus uses arrow-down.png) */
html body ul.nice-menu-down li.menuparent,
html body ul.nice-menu-down li.menuparent:hover,
html body ul.nice-menu li.menuparent,
html body ul.nice-menu li.menuparent:hover,
html body ul.nice-menu li li.menuparent,
html body ul.nice-menu li li.menuparent:hover,
html body #nice-menu-primary-menu li.menuparent,
html body #nice-menu-primary-menu li.menuparent:hover,
html body #nice-menu-primary-menu li.menuparent.over {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
list-style: none !important;
list-style-image: none !important;
}
html body ul.nice-menu li.menuparent > a,
html body #nice-menu-primary-menu li.menuparent > a {
background: transparent !important;
background-image: none !important;
}
html body .menu-heading {
background: transparent !important;
background-image: none !important;
padding-right: 24px !important;
}
/* Hide any sub-indicator span that superfish may inject */
html body ul.nice-menu .sf-sub-indicator,
html body #nice-menu-primary-menu .sf-sub-indicator,
html body ul.nice-menu li.menuparent > a > span:not(.menu-label),
html body #nice-menu-primary-menu li.menuparent > a > span:not(.menu-label) {
display: none !important;
}
/* Reset stray pseudo content on submenu links and on menuparent
s.
Note: top-level > li > a :before/:after are NOT reset here — :before
carries the underline animation, :after carries the chevron. They are
declared with their own intentional rules above. */
html body #nice-menu-primary-menu li ul li a:before,
html body #nice-menu-primary-menu li ul li a:after,
html body ul.nice-menu li ul li a:before,
html body ul.nice-menu li ul li a:after,
html body #nice-menu-primary-menu li.menuparent:before,
html body #nice-menu-primary-menu li.menuparent:after,
html body ul.nice-menu li.menuparent:before,
html body ul.nice-menu li.menuparent:after {
content: none !important;
background: transparent !important;
background-image: none !important;
border: none !important;
}
/* Chevron on dropdown parents — drawn finer (1px / 4px / opacity 0.35)
so it qualifies the parent without bracketing it. Translates a hair on
hover for a subtle "opening" gesture. */
html body #nice-menu-primary-menu > li.menuparent > a.menu-heading:after {
content: "" !important;
display: inline-block !important;
width: 4px !important;
height: 4px !important;
margin-left: 8px !important;
border-right: 1px solid currentColor !important;
border-bottom: 1px solid currentColor !important;
border-top: none !important;
border-left: none !important;
background: transparent !important;
transform: translateY(-3px) rotate(45deg) !important;
vertical-align: middle !important;
opacity: 0.35 !important;
position: static !important;
left: auto !important;
top: auto !important;
bottom: auto !important;
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.26s ease !important;
}
html body #nice-menu-primary-menu > li.menuparent:hover > a.menu-heading:after,
html body #nice-menu-primary-menu > li.menuparent.over > a.menu-heading:after {
/* Same position on hover — only opacity changes. No micro-shift. */
opacity: 0.7 !important;
}
/* === Dropdown panel — borderless with sienna left-edge accent ============
The previous boxed dropdown (gray border, sharp corners) read as UI
chrome. The new treatment is closer to a margin annotation: a 2px
sienna stripe on the left edge anchors the panel as a "this is
continuation", a soft drop-shadow (no border) gives just enough lift,
and the panel uses the cream page color so it feels like the page
itself folding outward. */
html body ul.nice-menu li ul,
html body #nice-menu-primary-menu li ul {
background: #fbf8f2 !important;
border: none !important;
border-left: 2px solid #b07a4a !important;
box-shadow: 0 18px 42px -12px rgba(31, 27, 22, 0.10),
0 4px 10px -4px rgba(31, 27, 22, 0.06) !important;
padding: 14px 0 !important;
margin: 4px 0 0 0 !important;
min-width: 240px !important;
border-radius: 0 !important;
/* Stagger entrance is wired via JS-injected --evelpidou-stagger-i custom
property (see evelpidou_editorial.js). When the panel is shown by
nice_menus' .over class on the parent, items fade up sequentially. */
}
html body ul.nice-menu li ul li,
html body #nice-menu-primary-menu li ul li {
opacity: 0;
transform: translateY(6px);
}
html body ul.nice-menu li.over ul li,
html body ul.nice-menu li:hover ul li,
html body #nice-menu-primary-menu li.over ul li,
html body #nice-menu-primary-menu li:hover ul li {
opacity: 1;
transform: translateY(0);
transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: calc(var(--evelpidou-stagger-i, 0) * 32ms);
}
html body ul.nice-menu li ul li a,
html body #nice-menu-primary-menu li ul li a {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: 0.05em !important;
text-transform: lowercase !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1 !important;
color: #1f1b16 !important;
padding: 10px 22px !important;
border: none !important;
box-shadow: none !important;
display: block !important;
position: relative !important;
transition: color 0.22s ease !important;
}
/* Submenu hover: just color shift to sienna. No motion. */
html body ul.nice-menu li ul li a:hover,
html body #nice-menu-primary-menu li ul li a:hover {
color: #b07a4a !important;
background: transparent !important;
box-shadow: none !important;
}
/* ===== 5. Links (body content) ======================================*/
html body a, html body a:visited {
color: #b07a4a !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(176, 122, 74, 0.25) !important;
transition: border-color 0.15s ease, color 0.15s ease !important;
}
html body a:hover, html body a:focus {
color: #6b4423 !important;
border-bottom-color: #b07a4a !important;
}
/* Strip the body underline from chrome links */
html body #header a,
html body #site-title a, html body #block-boxes-site-info a, html body #block-boxes-site-logo a,
html body #menu-bar a, html body ul.nice-menu a, html body #nice-menu-primary-menu a,
html body h1 a, html body h2 a, html body h3 a, html body h4 a,
html body .pane-title a, html body .block-title a,
html body .views-row h2 a,
html body .button, html body input[type="submit"], html body button,
html body #footer a, html body .region-footer a, html body .region-footer-first a, html body .region-footer-third a,
html body #powerby-login a, html body #powered-by a {
border-bottom: none !important;
}
/* ===== 6. Page title rule ===========================================*/
html body .pane-page-title, html body .os-page-title-wrapper {
border-bottom: 1px solid #e6dfd1 !important;
padding-bottom: 18px !important;
margin-bottom: 36px !important;
background: transparent !important;
}
html body .pane-page-title h1, html body #page-title { border-bottom: none !important; }
/* ===== 7. Panes / blocks — strip boxes ============================ */
html body .pane, html body .block, html body .panel-pane,
html body .boxes-box, html body .block-boxes {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
margin-bottom: 36px !important;
}
html body .block-inner { background: transparent !important; padding: 0 !important; }
/* ===== 8. Lists ===================================================== */
html body .region-content ul:not(.menu):not(.tabs):not(.pager):not(.contextual-links):not(.links):not(.nice-menu) {
list-style: none !important;
padding-left: 0 !important;
}
html body .region-content ul:not(.menu):not(.tabs):not(.pager):not(.contextual-links):not(.links):not(.nice-menu) > li {
list-style: none !important;
padding-left: 26px !important;
position: relative !important;
margin-bottom: 8px !important;
background: none !important;
}
html body .region-content ul:not(.menu):not(.tabs):not(.pager):not(.contextual-links):not(.links):not(.nice-menu) > li:before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 14px !important;
width: 14px !important;
height: 1px !important;
background: #b07a4a !important;
}
html body ol { padding-left: 28px !important; }
html body ol li { margin-bottom: 6px !important; }
/* ===== 9. Blockquote ================================================*/
html body blockquote {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: 26px !important;
line-height: 1.45 !important;
color: #111111 !important;
border: none !important;
border-left: 2px solid #b07a4a !important;
background: transparent !important;
padding: 6px 0 6px 28px !important;
margin: 36px 0 !important;
}
/* ===== 10. Tables =================================================== */
html body table { border-collapse: collapse !important; width: 100% !important; margin: 24px 0 !important; background: transparent !important; }
html body table th {
font-family: system-ui, -apple-system, sans-serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 11px !important;
color: #8b6f47 !important;
text-align: left !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
border-bottom: 2px solid #e6dfd1 !important;
padding: 14px 16px !important;
background: transparent !important;
}
html body table td {
border-bottom: 1px solid #f1ead8 !important;
padding: 16px !important;
vertical-align: top !important;
background: transparent !important;
}
/* ===== 11. Publications app ========================================= */
html body .view-publications .views-row, html body .pane-os-publications .views-row {
padding: 24px 0 !important;
border-bottom: 1px solid #f1ead8 !important;
background: transparent !important;
}
html body .view-publications .views-row h2,
html body .view-publications .views-row h3,
html body .pane-os-publications .views-row h2,
html body .pane-os-publications .views-row h3,
html body .biblio-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 18px !important;
line-height: 1.35 !important;
font-style: italic !important;
font-weight: 500 !important;
color: #1f1b16 !important;
margin: 0 0 6px 0 !important;
}
html body .biblio-title a,
html body .biblio-title a:link,
html body .biblio-title a:visited {
color: #1f1b16 !important;
border: none !important;
text-decoration: none !important;
}
html body .biblio-title a:hover {
color: #b07a4a !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
html body .biblio-authors { font-family: 'EB Garamond', Georgia, serif !important; font-size: 16px !important; color: #1f1b16 !important; }
html body .biblio-year, html body .biblio-secondary-title { font-family: 'EB Garamond', Georgia, serif !important; font-style: italic !important; font-size: 15px !important; color: #8b6f47 !important; }
/* ===== 12. Forms / buttons ==========================================*/
html body input[type="text"], html body input[type="email"], html body input[type="search"], html body input[type="password"], html body textarea, html body select {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 16px !important;
color: #1f1b16 !important;
border: 1px solid #e6dfd1 !important;
background: #faf6ed !important;
padding: 10px 14px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body input[type="text"]:focus, html body input[type="email"]:focus, html body input[type="search"]:focus, html body textarea:focus, html body select:focus {
border-color: #b07a4a !important;
outline: none !important;
}
html body input[type="submit"]:not(.form-submit), html body button, html body .button, html body a.button {
font-family: system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #ffffff !important;
background: #1f1b16 !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 28px !important;
cursor: pointer !important;
text-shadow: none !important;
box-shadow: none !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
}
html body input[type="submit"]:not(.form-submit):hover, html body button:hover, html body .button:hover {
background: #b07a4a !important;
}
/* ===== 13. Sidebar ==================================================*/
html body .region-sidebar-first, html body .region-sidebar-second {
background: transparent !important;
}
html body .region-sidebar-first .pane, html body .region-sidebar-second .pane,
html body .region-sidebar-first .block, html body .region-sidebar-second .block {
border: none !important;
border-top: 1px solid #f1ead8 !important;
background: transparent !important;
padding: 22px 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* ===== 14. Footer — editorial colophon ==============================
Two-zone composition like the closing colophon of a print journal.
Layout (full-bleed cream, content max-width 1200px):
─────────────────────────────────────────────────────
[ contact / institution ] [ elsewhere / links ]
1.5fr 1fr
(gpanel grid row 1)
─────────────────────────────────────────────────────
[ Made with ♥ by Author ]
(gpanel grid row 2, spans both columns, left-aligned)
─────────────────────────────────────────────────────
[ admin login ]
(#powerby-login below the gpanel, right-aligned)
─────────────────────────────────────────────────────
Implementation: .at-panel.gpanel.footer is the 2-column / 2-row grid.
#powerby-login is a plain right-aligned strip below it. Both
constrained to max-width: 1200px and centered.
- NO horizontal hairlines anywhere — rejected as "cheap". Whitespace
is the only divider.
- Type voice: italic Cormorant Garamond for headings/colophon,
EB Garamond for institutional prose, Cormorant SC for tiny tracked
labels (Tel/Email markers, "Elsewhere" header, admin bar).
- PNG social icons removed — links are italic editorial entries with
a quiet sienna marker that draws on hover.
- Heart glyph forced to sienna (was inline-styled web red #e25555).
===================================================================*/
html body #footer, html body footer#footer {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: #5b554c !important;
background: transparent !important;
background-image: none !important;
border: none !important;
border-top: none !important;
box-shadow: none !important;
padding: 56px 32px 32px 32px !important;
margin-top: 48px !important;
}
/* Two-zone CSS grid on the gpanel itself — contact (left, wider) and
elsewhere (right) in row 1; credit colophon spans both columns in row 2.
Robust across browsers (no display: contents needed). */
html body #footer .at-panel.gpanel.footer {
display: grid !important;
grid-template-columns: 1.5fr 1fr !important;
grid-template-rows: auto auto !important;
gap: 56px 80px !important;
align-items: start !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
}
/* Reset hwpi_classic's float + fixed widths on the regions, otherwise
the original 33%-floated layout would fight the grid sizing. */
html body #footer .region-footer-first,
html body #footer .region-footer,
html body #footer .region-footer-second,
html body #footer .region-footer-third {
background: transparent !important;
background-image: none !important;
border: none !important;
float: none !important;
width: auto !important;
max-width: none !important;
flex: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html body #footer .region-footer-first { grid-row: 1 !important; grid-column: 1 !important; }
html body #footer .region-footer-third { grid-row: 1 !important; grid-column: 2 !important; }
html body #footer .region-footer { grid-row: 2 !important; grid-column: 1 / -1 !important; align-self: end !important; padding-top: 24px !important; }
/* Hide the unused fourth region if hwpi_classic ever populates it */
html body #footer .region-footer-second { display: none !important; }
/* Region inner / block boxes inherit no float or width either */
html body #footer .region-inner,
html body #footer .block,
html body #footer .pane,
html body #footer .block-boxes,
html body #footer .boxes-box,
html body #footer .boxes-box-content,
html body #footer .block-inner {
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
html body .region-footer-first,
html body .region-footer,
html body .region-footer-second,
html body .region-footer-third {
background: transparent !important;
border: none !important;
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
html body #footer .region-inner,
html body #footer .block, html body #footer .pane, html body #footer .block-boxes,
html body #footer .boxes-box, html body #footer .boxes-box-content {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* === Column 1: contact / institution =================================
Institution name as a real italic editorial subhead. Tel/Email
labels in tracked Cormorant SC small caps, sienna. Address & body
text in EB Garamond at a calmer line-height. */
html body #footer h4 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 26px !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #1f1b16 !important;
border: none !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 0 18px 0 !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1 !important;
}
html body #footer h4 strong { font-weight: inherit !important; color: inherit !important; }
html body #footer #boxes-box-hwp_personal_contact_html {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.75 !important;
color: #1f1b16 !important;
max-width: 540px !important;
}
/* "Tel:" / "Email:" labels rendered as Cormorant SC small caps in
muted gold — same vocabulary as the nav. Replaces the previous
italic-EB-Garamond treatment with something quieter. */
html body #footer #boxes-box-hwp_personal_contact_html strong {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.04em !important;
text-transform: lowercase !important;
color: #8b6f47 !important;
margin-right: 4px !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}
html body #footer #boxes-box-hwp_personal_contact_html a {
color: #b07a4a !important;
border-bottom: 1px solid rgba(176, 122, 74, 0.3) !important;
transition: color 0.18s ease, border-color 0.18s ease !important;
}
html body #footer #boxes-box-hwp_personal_contact_html a:hover {
color: #6b4423 !important;
border-bottom-color: #6b4423 !important;
}
/* === Column 2: elsewhere / social ===================================
"Elsewhere" header injected via ::before — Cormorant SC small caps
in muted gold, tracked, the same voice as the nav. Links are italic
editorial entries; PNG icons hidden (they fought the palette). */
html body #footer #boxes-box-1760444385 {
font-family: 'EB Garamond', Georgia, serif !important;
position: relative !important;
}
html body #footer #boxes-box-1760444385::before {
content: "elsewhere" !important;
display: block !important;
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.08em !important;
text-transform: lowercase !important;
color: #8b6f47 !important;
margin-bottom: 18px !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}
html body #footer #boxes-box-1760444385 ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html body #footer #boxes-box-1760444385 li {
background: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
html body #footer #boxes-box-1760444385 li:before {
content: none !important;
display: none !important;
}
/* Hide the colorful PNG icons — they fight the cream/sienna palette */
html body #footer #boxes-box-1760444385 li img {
display: none !important;
}
html body #footer #boxes-box-1760444385 li a {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 19px !important;
line-height: 1.5 !important;
color: #1f1b16 !important;
text-decoration: none !important;
border: none !important;
border-bottom: 1px solid transparent !important;
padding-bottom: 1px !important;
display: inline-block !important;
position: relative !important;
transition: color 0.18s ease, border-color 0.18s ease, padding-left 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "dlig" 1, "ss01" 1 !important;
}
/* Subtle sienna marker — quiet at rest, full sienna + nudge on hover */
html body #footer #boxes-box-1760444385 li a::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
width: 0 !important;
height: 1px !important;
background: #b07a4a !important;
transform: translateY(-50%) !important;
transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body #footer #boxes-box-1760444385 li a:hover {
color: #b07a4a !important;
border-bottom-color: transparent !important;
padding-left: 24px !important;
}
html body #footer #boxes-box-1760444385 li a:hover::before {
width: 16px !important;
}
/* === Bottom-left: credit colophon ===================================
Sits in grid row 2, column 1, bottom-aligned. Italic Cormorant in
muted gold, with the heart forced to sienna and the author's name
set as an italic-with-fine-underline link — reads as "signed by",
not as a UI link. */
html body #footer #boxes-box-1760443868 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: #8b6f47 !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1 !important;
}
html body #footer #boxes-box-1760443868 a {
color: #1f1b16 !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
text-decoration: none !important;
border: none !important;
border-bottom: 1px solid rgba(31, 27, 22, 0.18) !important;
padding-bottom: 1px !important;
transition: color 0.18s ease, border-color 0.18s ease !important;
}
html body #footer #boxes-box-1760443868 a:hover {
color: #b07a4a !important;
border-bottom-color: #b07a4a !important;
}
/* Heart: forced to sienna (was inline #e25555 web-red). */
html body #footer #boxes-box-1760443868 span[style*="e25555"],
html body #footer #boxes-box-1760443868 span {
color: #b07a4a !important;
font-size: 14px !important;
}
/* === Admin login bar ================================================
Sits below the gpanel as a small right-aligned strip. Tracked Cormorant
SC small caps in muted gold — quiet, utilitarian. No top border. */
html body #powerby-login {
border: none !important;
border-top: none !important;
padding: 24px 32px 0 32px !important;
margin: 0 auto !important;
max-width: 1200px !important;
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 12px !important;
letter-spacing: 0.1em !important;
text-transform: lowercase !important;
color: #8b6f47 !important;
text-align: right !important;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1 !important;
}
html body #powerby-login a,
html body #powerby-login .footer-login {
color: #8b6f47 !important;
border: none !important;
text-decoration: none !important;
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 12px !important;
letter-spacing: 0.1em !important;
text-transform: lowercase !important;
transition: color 0.18s ease !important;
}
html body #powerby-login a:hover,
html body #powerby-login .footer-login:hover {
color: #b07a4a !important;
}
/* Kill any stray pseudo-content (the ▶ glyph hwpi_classic injects). */
html body #powerby-login a:before,
html body #powerby-login a:after,
html body #powerby-login .footer-login:before,
html body #powerby-login .footer-login:after {
content: none !important;
display: none !important;
background: transparent !important;
background-image: none !important;
}
html body #powered-by { display: none !important; }
/* Mobile: collapse the gpanel grid into a single column stack and
left-align the admin bar. Driven by the content-aware hamburger
body class (no hardcoded media query). */
html body.evelpidou-needs-hamburger #footer {
padding: 40px 14px 24px 14px !important;
margin-top: 32px !important;
}
html body.evelpidou-needs-hamburger #footer .at-panel.gpanel.footer {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto !important;
gap: 40px !important;
}
html body.evelpidou-needs-hamburger #footer .region-footer-first {
grid-row: 1 !important; grid-column: 1 !important;
}
html body.evelpidou-needs-hamburger #footer .region-footer-third {
grid-row: 2 !important; grid-column: 1 !important;
}
html body.evelpidou-needs-hamburger #footer .region-footer {
grid-row: 3 !important; grid-column: 1 !important;
text-align: left !important;
padding-top: 0 !important;
}
html body.evelpidou-needs-hamburger #powerby-login {
text-align: left !important;
padding: 24px 14px 0 14px !important;
}
/* ===== 15. Page wrapper ============================================ */
html body #page, html body #page-wrapper, html body .container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* ===== 16. Home hero — server-side, content-area block (v34) =========
*
* The hero is hand-authored HTML at the TOP of the home node body
* (pasted via Drupal's CP, not JS-injected). Lives inside
* #block-boxes-hwp-personal-frontpage-html, which renders in
* region-content-top — i.e. the first thing INSIDE the content area,
* BELOW the navbar.
*
* Composition (≥720px):
*
* ┌────────────────────────────────────────────────────┐
* │ │
* │ Niki ╭─────────────╮ │
* │ Evelpidou │ │ │
* │ │ PORTRAIT │ │
* │ ── · │ 320 × 320 │ │
* │ Professor of Geomorphology & GIS │ double-rule │ │
* │ Faculty of Geology … │ sienna │ │
* │ National and Kapodistrian … ╰─────────────╯ │
* │ │
* └────────────────────────────────────────────────────┘
*
* Design notes:
* - Sienna marker (rule + dot) between name and title — the only
* editorial dingbat. Quiet, refined, not pretentious.
* - Portrait sits in a double-rule mat (two concentric thin sienna
* rings outside the photo) — pure CSS, no extra DOM.
* - Subtle entrance animation, respects prefers-reduced-motion.
*
* Performance notes:
* - No JS injection → no layout shift after FCP.
* - Image lives in HTML with explicit width/height → no CLS,
* same-origin, browser-cacheable.
* - No min-height: 72vh → navbar stays in viewport on first paint.
* - All decorative elements use aria-hidden + are pointer-events:none
* so AT users get a clean: "Niki Evelpidou. Professor of …".
*
* Below the hero, the existing About Me block continues in the same
* boxes-box-content wrapper.
* ===================================================================*/
/* The legacy site_info / site_logo / shield blocks are still in the
header DOM — hide them on the home page so the photo+name don't
render twice (once in header, once in our content hero). */
body.front #block-boxes-site-info,
body.front #block-boxes-site-logo,
body.front #block-boxes-shield {
display: none !important;
}
/* The header is now empty on body.front. Collapse it so it doesn't
reserve dead space above the navbar. The search (region-header-third)
stays absolutely positioned in the navbar row via the section-3 rules
(which already use the standard `header#header` height: 0 collapse). */
html body.front header#header,
html body.front #header-container,
html body.front #header-panels {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* === Tunable palette (CSS custom properties on the root) ========== */
.evelpidou-content-hero {
--hero-ink: #1f1b16;
--hero-mid: #5b554c;
--hero-sienna: #b07a4a;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: clamp(32px, 5vw, 80px) !important;
position: relative !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: clamp(24px, 4vw, 48px) 0 !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--hero-ink) !important;
text-wrap: balance;
}
/* === Text column ================================================= */
.evelpidou-content-hero-text {
flex: 1 1 360px !important;
min-width: 0 !important;
}
/* Stacked italic nameplate */
.evelpidou-content-hero .evelpidou-content-hero-name {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: clamp(60px, 9vw, 132px) !important;
line-height: 0.90 !important;
letter-spacing: -0.014em !important;
color: var(--hero-ink) !important;
margin: 0 0 clamp(20px, 2.4vw, 30px) 0 !important;
padding: 0 !important;
border: none !important;
text-rendering: optimizeLegibility !important;
font-feature-settings: 'liga', 'dlig', 'kern' !important;
text-wrap: balance;
}
.evelpidou-content-hero-name-line {
display: block !important;
font: inherit !important;
}
/* Line-2 indent — signature editorial rhythm */
.evelpidou-content-hero-name-line-2 {
padding-left: 1.15em !important;
}
/* Sienna marker (rule + dot) between name and title */
.evelpidou-content-hero-marker {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
pointer-events: none !important;
}
.evelpidou-content-hero-marker-line {
display: inline-block !important;
width: 48px !important;
height: 1px !important;
background: var(--hero-sienna) !important;
}
.evelpidou-content-hero-marker-dot {
display: inline-block !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background: var(--hero-sienna) !important;
}
/* Title (role line) — italic Cormorant, neutral ink */
.evelpidou-content-hero .evelpidou-content-hero-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: clamp(20px, 1.8vw, 28px) !important;
line-height: 1.32 !important;
color: var(--hero-ink) !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
letter-spacing: 0.005em !important;
text-wrap: balance;
}
/* Affiliation lines — italic Cormorant, mid-tone ink (NOT sienna) */
.evelpidou-content-hero .evelpidou-content-hero-affiliation {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(16px, 1.25vw, 19px) !important;
line-height: 1.55 !important;
color: var(--hero-mid) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.005em !important;
text-wrap: balance;
}
/* === Portrait — clean circular crop ============================== */
.evelpidou-content-hero-portrait {
flex: 0 0 auto !important;
width: clamp(220px, 28vw, 320px) !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.evelpidou-content-hero-portrait img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
}
/* === Entrance animation (respects prefers-reduced-motion) ======== */
@media (prefers-reduced-motion: no-preference) {
.evelpidou-content-hero .evelpidou-content-hero-name,
.evelpidou-content-hero .evelpidou-content-hero-title,
.evelpidou-content-hero .evelpidou-content-hero-affiliation,
.evelpidou-content-hero-marker,
.evelpidou-content-hero-portrait {
animation: evelpidouHeroLift 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.evelpidou-content-hero-marker { animation-delay: 60ms; }
.evelpidou-content-hero .evelpidou-content-hero-title { animation-delay: 100ms; }
.evelpidou-content-hero .evelpidou-content-hero-affiliation { animation-delay: 160ms; }
.evelpidou-content-hero-portrait { animation-delay: 80ms; }
}
@keyframes evelpidouHeroLift {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* === Mobile (hamburger mode): stack vertically, photo above ====== */
body.evelpidou-needs-hamburger .evelpidou-content-hero {
flex-direction: column-reverse !important;
align-items: center !important;
text-align: center !important;
gap: 28px !important;
padding: 24px 0 24px 0 !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero-text {
flex: 0 0 auto !important;
width: 100% !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero-portrait {
width: clamp(160px, 50vw, 200px) !important;
margin: 0 auto !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero .evelpidou-content-hero-name {
font-size: clamp(52px, 13vw, 84px) !important;
margin-bottom: 18px !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero-name-line-2 {
padding-left: 0.6em !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero-marker {
justify-content: center !important;
margin-bottom: 14px !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero .evelpidou-content-hero-title {
font-size: 20px !important;
margin-bottom: 12px !important;
}
body.evelpidou-needs-hamburger .evelpidou-content-hero .evelpidou-content-hero-affiliation {
font-size: 16px !important;
}
/* ===== 16b. Front page first-block (the About Me html block) =========*/
html body #block-boxes-hwp-personal-frontpage-html {
margin-top: 24px !important;
}
/* Hand-authored desktop drop-cap. The inline style on the home node
is `float:left; font-size:70px; line-height inherits 1.75 from body`
→ the I ends up ~122px tall, awkwardly tall against the surrounding
text. Override line-height + padding so the cap sits cleanly at the
top of the paragraph and ~3 lines wrap beside it. */
html body :is(.boxes-box-content, .field-name-body) span[style*="float:left"][style*="font-size:70px"],
html body :is(.boxes-box-content, .field-name-body) span[style*="float: left"][style*="font-size: 70px"] {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 78px !important;
line-height: 0.82 !important;
color: #b07a4a !important;
padding: 6px 12px 0 0 !important;
margin: 0 !important;
}
/* Generic desktop drop-cap — anything float:left at 48px+ inside the
page body. Keeps the same proportions for any drop-cap the user
adds to other pages later. */
@media (min-width: 1200px) {
html body :is(.boxes-box-content, .field-name-body) span[style*="float:left"][style*="font-size:56px"],
html body :is(.boxes-box-content, .field-name-body) span[style*="float: left"][style*="font-size: 56px"],
html body :is(.boxes-box-content, .field-name-body) span[style*="float:left"][style*="font-size:84px"],
html body :is(.boxes-box-content, .field-name-body) span[style*="float: left"][style*="font-size: 84px"] {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
line-height: 0.82 !important;
color: #b07a4a !important;
padding: 6px 12px 0 0 !important;
margin: 0 !important;
}
}
/* ===== 16c. AI-generated card-list overrides ========================
*
* 14 of the 15 menu pages (Awards, Courses, Lectures, Seminars,
* Fieldworks, E-Learning, Distance-Learning, Public Engagement,
* Media & Press, Primary Education, Activities, Books, Patents,
* Software) plus the home About-Me share the same hand-authored
* card markup — Tailwind-slate palette, system-sans 14/16px,
* `display: table` rows with year-column on left + content on right,
* 24/48px paddings and margins.
*
* That look reads as a generic AI export, not editorial. These rules
* use attribute selectors against the inline-style values to coerce
* the cards into the Cormorant / EB Garamond + cream / ink palette
* the rest of the theme uses, without requiring the user to re-edit
* any node body (those bodies stay as authored).
*
* Targeting: scoped to `.boxes-box-content` so we don't touch:
* - the navbar, footer, search, drawer
* - the JS-injected `.evelpidou-content-hero`
* - the Publications app (Biblio styling)
*
* Values overridden inline that we coerce here:
* - font-family `-apple-system, …` → 'EB Garamond', Georgia, serif
* - colors #0f172a / #111827 / #1e293b → ink #1f1b16
* - colors #475569 / #64748b / #555555 → mid #5b554c
* - color #3b82f6 (blue link) → sienna #b07a4a
* - border #f1f5f9 / #e2e8f0 (slate hairline) → #e6dfd1 / #d9c9a8 (cream hairline)
* - font-size 14px → 16px (readability)
* - font-size 16px → 17px (matches body)
* - row padding 24px → 18px (cuts ~25% of the page height)
* - card outer margin 48px auto → 24px auto
* - card outer padding 24px → 0 (let our content-inner padding own it)
*
* Mobile takes a further trim: row padding 18px → 12px.
* ===================================================================*/
/* --- Font family — coerce sans-serif inline declarations to serif --- */
html body :is(.boxes-box-content, .field-name-body) [style*="font-family:-apple-system"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-family: -apple-system"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-family:system-ui"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-family: system-ui"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-family:sans-serif"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-family: sans-serif"] {
font-family: 'EB Garamond', Garamond, Georgia, serif !important;
}
/* --- Colors — slate palette → editorial ink/mid --- */
html body :is(.boxes-box-content, .field-name-body) [style*="color:#0f172a"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #0f172a"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#111827"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #111827"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#1e293b"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #1e293b"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#0f1729"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #0f1729"] {
color: #1f1b16 !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="color:#475569"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #475569"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#64748b"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #64748b"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#555555"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #555555"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#334155"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #334155"] {
color: #5b554c !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="color:#3b82f6"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #3b82f6"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#0ea5e9"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #0ea5e9"],
html body :is(.boxes-box-content, .field-name-body) [style*="color:#2563eb"],
html body :is(.boxes-box-content, .field-name-body) [style*="color: #2563eb"] {
color: #b07a4a !important;
}
/* --- Borders — slate hairline → cream hairline --- */
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom:1px solid #f1f5f9"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom: 1px solid #f1f5f9"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom:1px solid #e2e8f0"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom: 1px solid #e2e8f0"] {
border-bottom-color: #e6dfd1 !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom:2px solid #e2e8f0"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-bottom: 2px solid #e2e8f0"] {
border-bottom: 1px solid #d9c9a8 !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="border-top:1px solid #f1f5f9"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-top: 1px solid #f1f5f9"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-top:1px solid #e2e8f0"],
html body :is(.boxes-box-content, .field-name-body) [style*="border-top: 1px solid #e2e8f0"] {
border-top-color: #e6dfd1 !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="border:1px solid #e2e8f0"],
html body :is(.boxes-box-content, .field-name-body) [style*="border: 1px solid #e2e8f0"] {
border-color: #e6dfd1 !important;
}
/* --- Font sizes — bump tiny sans-serif to readable serif --- */
html body :is(.boxes-box-content, .field-name-body) [style*="font-size:14px"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-size: 14px"] {
font-size: 16px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="font-size:15px"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-size: 15px"] {
font-size: 16px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="font-size:16px"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-size: 16px"] {
font-size: 17px !important;
}
/* Section-header sized lines (h2/h3 inside cards) */
html body :is(.boxes-box-content, .field-name-body) [style*="font-size:22px"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-size: 22px"] {
font-size: 24px !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
color: #111111 !important;
letter-spacing: 0.005em !important;
}
/* --- Row padding — tighten 24px to 18px --- */
html body :is(.boxes-box-content, .field-name-body) [style*="padding-top:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-top: 24px"] {
padding-top: 18px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="padding-bottom:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-bottom: 24px"] {
padding-bottom: 18px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="padding-left:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-left: 24px"] {
padding-left: 20px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="margin-bottom:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="margin-bottom: 24px"] {
margin-bottom: 18px !important;
}
/* --- Outer card wrapper — kill the 48px top/bottom margin --- */
html body :is(.boxes-box-content, .field-name-body, .field-item) > div[style*="margin:48px auto"],
html body :is(.boxes-box-content, .field-name-body, .field-item) > div[style*="margin: 48px auto"] {
margin: 16px auto !important;
padding: 0 !important;
max-width: none !important;
background-color: transparent !important;
border: none !important;
}
/* --- Generic gray/white card backgrounds: drop them, our cream is enough --- */
html body :is(.boxes-box-content, .field-name-body) [style*="background-color:#ffffff"],
html body :is(.boxes-box-content, .field-name-body) [style*="background-color: #ffffff"],
html body :is(.boxes-box-content, .field-name-body) [style*="background-color:#fff"],
html body :is(.boxes-box-content, .field-name-body) [style*="background-color: #fff"],
html body :is(.boxes-box-content, .field-name-body) [style*="background-color:#f8fafc"],
html body :is(.boxes-box-content, .field-name-body) [style*="background-color: #f8fafc"] {
background-color: transparent !important;
}
/* --- Year column: small, sienna small-caps marker (was bold slate-500) --- */
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:100px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 100px"] {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
color: #b07a4a !important;
vertical-align: top !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:120px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 120px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:150px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 150px"] {
font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 0.10em !important;
color: #b07a4a !important;
vertical-align: top !important;
}
/* --- Italic footnote-style lines: bring colour into mid range --- */
html body :is(.boxes-box-content, .field-name-body) [style*="font-style:italic"],
html body :is(.boxes-box-content, .field-name-body) [style*="font-style: italic"] {
color: #5b554c !important;
}
/* --- Long URLs in card content: force break instead of overflow --- */
html body :is(.boxes-box-content, .field-name-body) a,
html body :is(.boxes-box-content, .field-name-body) p {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* --- Card root row: prevent table-layout overflow on narrow viewports.
The hand-authored markup uses display:table on each
with a
fixed 100px left column — long URLs in the right column don't
break and push the cell past the viewport. table-layout:fixed
forces the table to honour the container width and the cells to
wrap their content. --- */
html body :is(.boxes-box-content, .field-name-body) [style*="display:table"][style*="width:100%"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table"][style*="width: 100%"] {
table-layout: fixed !important;
}
/* --- Mobile: tighten row padding even further --- */
@media (max-width: 1199px) {
html body :is(.boxes-box-content, .field-name-body) [style*="padding-top:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-top: 24px"] {
padding-top: 12px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="padding-bottom:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-bottom: 24px"] {
padding-bottom: 12px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="padding-left:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="padding-left: 24px"] {
padding-left: 14px !important;
}
html body :is(.boxes-box-content, .field-name-body) [style*="margin-bottom:24px"],
html body :is(.boxes-box-content, .field-name-body) [style*="margin-bottom: 24px"] {
margin-bottom: 12px !important;
}
html body :is(.boxes-box-content, .field-name-body, .field-item) > div[style*="margin:48px auto"],
html body :is(.boxes-box-content, .field-name-body, .field-item) > div[style*="margin: 48px auto"] {
margin: 8px auto !important;
}
/* Year column shrinks on mobile */
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:100px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 100px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:120px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 120px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display:table-cell"][style*="width:150px"],
html body :is(.boxes-box-content, .field-name-body) [style*="display: table-cell"][style*="width: 150px"] {
width: 64px !important;
font-size: 13px !important;
}
}
/* ===== 17. Editorial utility classes (opt-in) ======================*/
.editorial-dropcap:first-letter {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
float: left !important;
font-size: 84px !important;
line-height: 0.85 !important;
padding: 8px 14px 0 0 !important;
color: #b07a4a !important;
font-weight: 500 !important;
}
/* ===== 18. Misc cleanup ============================================= */
/* Strip default blue accents and gradients hwpi_classic uses */
html body .gradient, html body .blue-bg, html body .accent { background: transparent !important; background-image: none !important; }
/* Hide the OpenScholar default mobile-buttons row at ALL viewports —
our own hamburger drawer replaces it. Previously this was gated
to desktop only, which let OpenScholar's three-icon row flash at
the very top during mobile page-loads. */
html body .responive-menu-container { display: none !important; }
/* Print */
@media print {
html body { background: #faf6ed !important; color: #000 !important; }
html body a { color: #000 !important; border: none !important; }
html body #menu-bar, html body #block-os-primary-menu, html body .region-sidebar-first, html body .region-sidebar-second, html body #footer { display: none !important; }
}
/* ============================================================
===== 19. RESPONSIVE: hamburger menu + accordion submenus =====
============================================================
- Below 1200px: hide inline menu, show hamburger button (injected by JS).
- Hamburger toggles a fullscreen drawer (cream background).
- Each menuparent has a chevron toggle (also JS-injected) that
expands its submenu inline (accordion). Works recursively for
nested submenus.
FOUC FIX: the critical drawer-closed visual state used to live
only on body.evelpidou-needs-hamburger (added by JS post-load).
That meant: between page parse and JS execution, the menu
rendered as a horizontal row, then transitioned offscreen when
the class was added — visible flicker that read as "the side
menu opened and closed." The @media block below applies the
drawer-closed state at FIRST PAINT for any narrow viewport, so
no transition is visible on navigation. The body-class rules
further down still apply (redundantly) once JS runs and add the
richer animations / submenu accordion behaviour — but the
essential closed state no longer waits on JS.
============================================================ */
@media (max-width: 1199px) {
/* Show hamburger immediately */
html body button.evelpidou-hamburger,
html body .evelpidou-hamburger { display: flex !important; }
/* Slim menu-bar */
html body div#menu-bar {
padding: 0 14px !important;
height: 60px !important;
min-height: 60px !important;
}
/* Hide desktop search row (it lives in the navbar on desktop) */
html body .region-header-third { display: none !important; }
/* Render the menu as a closed drawer from the very first paint.
The transition rules apply when evelpidou-menu-open toggles the
transform (handled by the body-class block further down). */
html body ul#nice-menu-primary-menu {
display: flex !important;
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important;
flex-direction: column !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
overflow-y: auto !important;
background: #faf6ed !important;
padding: 80px 24px 32px !important;
margin: 0 !important;
z-index: 50 !important;
gap: 0 !important;
pointer-events: auto !important;
height: 100vh !important;
transform: translateX(-100%) !important;
visibility: hidden !important;
box-shadow: 24px 0 60px -20px rgba(31, 27, 22, 0) !important;
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
visibility 0s linear 0.42s,
box-shadow 0.42s ease !important;
}
/* Open state — driven by body.evelpidou-menu-open alone (not
compounded with -needs-hamburger), so the open transition
works whether or not JS has added the legacy class. */
html body.evelpidou-menu-open ul#nice-menu-primary-menu {
transform: translateX(0) !important;
visibility: visible !important;
box-shadow: 24px 0 60px -20px rgba(31, 27, 22, 0.18) !important;
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
visibility 0s linear 0s,
box-shadow 0.42s ease !important;
}
/* Lock body scroll when drawer is open */
body.evelpidou-menu-open { overflow: hidden !important; }
/* Drawer items full-row from first paint */
html body #nice-menu-primary-menu > li {
position: relative !important;
width: 100% !important;
height: auto !important;
display: block !important;
border: none !important;
}
html body #nice-menu-primary-menu > li > a {
display: block !important;
padding: 16px 0 !important;
font-size: 22px !important;
letter-spacing: 0.04em !important;
width: 100% !important;
}
/* Content hero stacks vertically on mobile from first paint.
Detailed layout rules live in section 16 above (body.evelpidou-
needs-hamburger .evelpidou-content-hero…). This rule just centers
the text before JS toggles the hamburger class. */
html body div.evelpidou-content-hero,
html body [class~="evelpidou-content-hero"] {
padding: 24px 0 24px 0 !important;
text-align: center !important;
}
}
/* Hamburger button — left-positioned, hidden on desktop, shown on mobile */
html body button.evelpidou-hamburger,
html body .evelpidou-hamburger {
display: none !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important; height: 40px !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: none !important;
padding: 0 !important; margin: 0 !important;
cursor: pointer !important;
position: absolute !important;
top: 10px !important; left: 8px !important;
z-index: 100 !important;
flex-direction: column !important;
gap: 5px !important;
color: #1f1b16 !important;
box-shadow: none !important; outline: none !important;
-webkit-appearance: none !important; appearance: none !important;
text-shadow: none !important;
}
html body .evelpidou-hamburger span {
display: block !important;
width: 22px !important; height: 1.5px !important;
background: #1f1b16 !important;
background-image: none !important;
border: none !important;
margin: 0 !important; padding: 0 !important;
transition: transform 0.3s ease, opacity 0.2s ease !important;
transform-origin: center !important;
}
/* Morph hamburger to X when menu is open. The X is rendered larger,
bolder, and in sienna so it reads as an unmistakable "close"
affordance — separating it visually from the resting hamburger. */
body.evelpidou-menu-open .evelpidou-hamburger {
width: 48px !important;
height: 48px !important;
z-index: 100 !important;
}
body.evelpidou-menu-open .evelpidou-hamburger span {
width: 26px !important;
height: 2px !important;
background: #b07a4a !important;
}
body.evelpidou-menu-open .evelpidou-hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
body.evelpidou-menu-open .evelpidou-hamburger span:nth-child(2) {
opacity: 0 !important;
}
body.evelpidou-menu-open .evelpidou-hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
/* Submenu toggle button — hidden on desktop, shown next to .menuparent on mobile */
html body button.evelpidou-submenu-toggle,
html body .evelpidou-submenu-toggle {
display: none !important;
background: transparent !important; background-image: none !important;
border: none !important;
padding: 0 !important; margin: 0 !important;
width: 48px !important; height: 48px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
position: absolute !important;
right: 0 !important; top: 0 !important;
color: #8b6f47 !important;
box-shadow: none !important; outline: none !important;
-webkit-appearance: none !important; appearance: none !important;
}
html body .evelpidou-submenu-toggle:before {
content: "" !important;
display: block !important;
width: 9px !important; height: 9px !important;
background: transparent !important;
border-right: 1.5px solid currentColor !important;
border-bottom: 1.5px solid currentColor !important;
border-top: none !important; border-left: none !important;
transform: rotate(45deg) translate(-2px, -2px) !important;
transition: transform 0.25s ease !important;
}
html body li.is-expanded > .evelpidou-submenu-toggle:before {
transform: rotate(-135deg) translate(-2px, -2px) !important;
}
/* === BREAKPOINTS === */
/* Tablet: tighten typography, allow wrap, smaller search */
/* (Tablet @media block removed — JS-driven body.evelpidou-needs-hamburger
threshold now handles all responsive transitions atomically, eliminating
intermediate "items wrap" states that caused flicker on resize.) */
/* === Fluid base — prevent horizontal scroll on any width ===
Use overflow-x: clip rather than hidden — `hidden` creates a new
scroll container which breaks position: sticky on descendants
(specifically the navbar). `clip` has the same visual effect of
hiding overflow but does NOT establish a new scroll context, so
sticky descendants stick to the viewport instead of this element. */
html, html body {
max-width: 100vw !important;
overflow-x: clip !important;
}
/* Fallback for the rare browser without overflow: clip support */
@supports not (overflow: clip) {
html, html body {
overflow-x: hidden !important;
}
}
html body img, html body video, html body iframe { max-width: 100% !important; height: auto !important; }
html body table { max-width: 100% !important; table-layout: auto !important; }
/* === Dynamic-hamburger mode ===
* JS adds `body.evelpidou-needs-hamburger` when measuring shows the
* menu items would collide with the (expanded) search box. The same
* styles also activate via @media for very narrow widths as a no-JS
* fallback.
*/
/* Dynamic-hamburger mode: triggered by JS measuring whether menu fits next to expanded search */
/* === Make every fixed-width container behave fluidly === */
html body.evelpidou-needs-hamburger, html body.evelpidou-needs-hamburger #page, html body.evelpidou-needs-hamburger #page-wrapper,
html body.evelpidou-needs-hamburger .container, html body.evelpidou-needs-hamburger #columns, html body.evelpidou-needs-hamburger .hg-container,
html body.evelpidou-needs-hamburger #content-column, html body.evelpidou-needs-hamburger .content-column,
html body.evelpidou-needs-hamburger .content-inner, html body.evelpidou-needs-hamburger #content-panels,
html body.evelpidou-needs-hamburger .at-panel, html body.evelpidou-needs-hamburger .gpanel, html body.evelpidou-needs-hamburger .panel-display,
html body.evelpidou-needs-hamburger .region-content-top, html body.evelpidou-needs-hamburger .region-content,
html body.evelpidou-needs-hamburger .region-content-first, html body.evelpidou-needs-hamburger .region-content-second,
html body.evelpidou-needs-hamburger .region-content-bottom {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
float: none !important;
}
/* Outer wrappers carry no horizontal padding — content edge is set ONCE
on #content-column so we don't compound 16+16+16 across nested
wrappers (which is what was creating the wide gap). */
html body.evelpidou-needs-hamburger #page,
html body.evelpidou-needs-hamburger #page-wrapper,
html body.evelpidou-needs-hamburger .container,
html body.evelpidou-needs-hamburger #columns,
html body.evelpidou-needs-hamburger .hg-container,
html body.evelpidou-needs-hamburger #content-panels,
html body.evelpidou-needs-hamburger .at-panel,
html body.evelpidou-needs-hamburger .gpanel,
html body.evelpidou-needs-hamburger .panel-display,
html body.evelpidou-needs-hamburger .region-content-top,
html body.evelpidou-needs-hamburger .region-content,
html body.evelpidou-needs-hamburger .region-content-first,
html body.evelpidou-needs-hamburger .region-content-second,
html body.evelpidou-needs-hamburger .region-content-bottom {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Set the single mobile gutter here (one place to tune) */
html body.evelpidou-needs-hamburger #content-column,
html body.evelpidou-needs-hamburger .content-column,
html body.evelpidou-needs-hamburger .content-inner {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Override inline-styled fixed-width content blocks (e.g. the home About Me) */
html body.evelpidou-needs-hamburger .boxes-box-content > div[style*="width:780px"],
html body.evelpidou-needs-hamburger .boxes-box-content > div[style*="width: 780px"],
html body.evelpidou-needs-hamburger .boxes-box-content > div[style*="width:1000px"],
html body.evelpidou-needs-hamburger .boxes-box-content > div[style*="width: 1000px"],
html body.evelpidou-needs-hamburger .boxes-box-content > div[style*="width:800px"] {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Tighten oversized inline-styled text on mobile */
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:56px"] { font-size: 32px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:48px"] { font-size: 28px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:40px"] { font-size: 26px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:70px"] { font-size: 38px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:22px"] { font-size: 18px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:18px"] { font-size: 16px !important; }
html body.evelpidou-needs-hamburger .boxes-box-content [style*="font-size:17px"] { font-size: 15px !important; }
/* Mobile typographic polish — left-align justified inline content (justify breaks in narrow columns) */
html body.evelpidou-needs-hamburger .boxes-box-content [style*="text-align:justify"],
html body.evelpidou-needs-hamburger .boxes-box-content [style*="text-align: justify"] {
text-align: left !important;
}
/* Disarm float drop-caps on mobile — they break the narrow column flow */
html body.evelpidou-needs-hamburger .boxes-box-content span[style*="float:left"],
html body.evelpidou-needs-hamburger .boxes-box-content span[style*="float: left"] {
float: none !important;
font-size: 28px !important;
padding: 0 4px 0 0 !important;
margin: 0 !important;
display: inline !important;
line-height: 1 !important;
vertical-align: baseline !important;
}
/* Tighten outer padding/margin on inline-styled wrapper divs so they don't add to mobile edges */
html body.evelpidou-needs-hamburger #boxes-box-hwp_personal_frontpage_html > div[style] {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 24px !important;
padding-bottom: 24px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Show hamburger */
html body.evelpidou-needs-hamburger button.evelpidou-hamburger,
html body.evelpidou-needs-hamburger .evelpidou-hamburger { display: flex !important; }
/* Default mobile state: search hidden in the navbar (no room for it
next to the hamburger button + page title). It re-appears INSIDE
the drawer when the user opens it — see rule below. */
html body.evelpidou-needs-hamburger .region-header-third { display: none !important; }
/* When the drawer opens, surface the search at the TOP of the drawer
as a full-width line input. Position: fixed (escapes the absolute
containing block in #header), z-index 60 puts it above the drawer
itself (drawer is at z 50). The X (hamburger.evelpidou-menu-open)
sits at top-left ~8px+48px = 56px from left, so we reserve 64px on
the left edge for it. The 24px right edge mirrors the drawer's
own padding so the underline doesn't kiss the viewport. */
html body.evelpidou-needs-hamburger.evelpidou-menu-open .region-header-third {
display: block !important;
position: fixed !important;
top: 16px !important;
left: 64px !important;
right: 24px !important;
height: auto !important;
z-index: 60 !important;
pointer-events: auto !important;
background: transparent !important;
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open .region-header-third .region-inner {
display: block !important;
width: 100% !important;
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search,
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search > .block-inner,
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search form,
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search .container-inline,
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search .form-item {
display: block !important;
width: 100% !important;
text-align: left !important;
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search input.form-text {
width: 100% !important;
border-bottom-color: #b07a4a !important;
cursor: text !important;
background-position: left 4px center !important;
padding: 6px 0 6px 28px !important;
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open #block-os-search-db-site-search input.form-text::placeholder {
color: #8b6f47 !important;
opacity: 0.7 !important;
}
/* Slim menu bar that hosts only the hamburger */
html body.evelpidou-needs-hamburger div#menu-bar {
padding: 0 14px !important;
height: 60px !important;
min-height: 60px !important;
}
/* Drawer always rendered (in hamburger mode) but slid offscreen until
evelpidou-menu-open is added. Using transform + visibility instead of
display: none lets us TRANSITION the open/close, which display can't.
The drawer slides in from the left (matches the left-anchored
hamburger) over 360ms with an editorial cubic-bezier. */
html body.evelpidou-needs-hamburger ul#nice-menu-primary-menu {
display: flex !important;
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
width: 100% !important;
flex-direction: column !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
overflow-y: auto !important;
background: #faf6ed !important;
padding: 80px 24px 32px !important;
margin: 0 !important;
z-index: 50 !important;
gap: 0 !important;
pointer-events: auto !important;
height: 100vh !important;
transform: translateX(-100%) !important;
visibility: hidden !important;
box-shadow: 24px 0 60px -20px rgba(31, 27, 22, 0) !important;
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
visibility 0s linear 0.42s,
box-shadow 0.42s ease !important;
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open ul#nice-menu-primary-menu {
transform: translateX(0) !important;
visibility: visible !important;
box-shadow: 24px 0 60px -20px rgba(31, 27, 22, 0.18) !important;
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.24, 1),
visibility 0s linear 0s,
box-shadow 0.42s ease !important;
}
/* Lock body scroll when menu open */
body.evelpidou-menu-open { overflow: hidden !important; }
/* Drawer items: stagger fade-up when drawer opens. Uses the
--evelpidou-stagger-i custom property set by JS. Closed state =
items invisible & shifted; open state = each item appears with a
compounding delay, like sentences settling into a list. */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
html body.evelpidou-needs-hamburger.evelpidou-menu-open #nice-menu-primary-menu > li {
opacity: 1;
transform: translateY(0);
transition-delay: calc(60ms + var(--evelpidou-stagger-i, 0) * 35ms);
}
/* Top-level items full width — no border between (whitespace as
divider, per editorial direction) */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li {
position: relative !important;
width: 100% !important;
height: auto !important;
display: block !important;
border: none !important;
}
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li > a {
display: block !important;
padding: 16px 0 !important;
font-size: 22px !important;
letter-spacing: 0.04em !important;
width: 100% !important;
}
/* Drawer items: when active, also use the italic voice + a tiny
leading sienna mark on the left edge */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li > a.active,
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li > a.active-trail {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
text-transform: none !important;
letter-spacing: 0.005em !important;
color: #b07a4a !important;
}
/* Mobile active state lives in the italic + sienna color shift above
(same two-voice rule as desktop). No extra dash/dot. */
/* Submenu toggle in the drawer — a small right-edge button (NOT a
full-row overlay), so the heading link to the left is fully
clickable. The button shows a visible chevron via the :before
pseudo, which rotates 180° when the parent has .is-expanded. */
html body.evelpidou-needs-hamburger li.menuparent .evelpidou-submenu-toggle {
display: flex !important;
width: 56px !important;
height: 56px !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
position: absolute !important;
background: transparent !important;
align-items: center !important;
justify-content: center !important;
z-index: 2 !important;
}
html body.evelpidou-needs-hamburger li.menuparent .evelpidou-submenu-toggle:before {
display: block !important;
content: "" !important;
width: 9px !important;
height: 9px !important;
background: transparent !important;
border-right: 1.5px solid #8b6f47 !important;
border-bottom: 1.5px solid #8b6f47 !important;
border-top: none !important;
border-left: none !important;
transform: rotate(45deg) translate(-2px, -2px) !important;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
opacity: 0.7 !important;
}
html body.evelpidou-needs-hamburger li.is-expanded > .evelpidou-submenu-toggle:before {
transform: rotate(-135deg) translate(-2px, -2px) !important;
}
/* The redundant inline chevron next to the menu-heading text is
suppressed in drawer mode — the right-edge toggle button is the
single source of truth for "this expands". */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li.menuparent > a.menu-heading:after {
display: none !important;
content: none !important;
}
/* Heading link area — leave room for the right-edge toggle button so
long titles don't slide under it. */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li.menuparent > a.menu-heading {
padding-right: 56px !important;
}
/* Kill the per-item underline pseudo-element in the drawer — it
reads as a stray horizontal line under the active item, exactly
the kind of "weird line" the user has rejected throughout. The
active-state italic + sienna color shift is signal enough. */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li > a:before,
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li > a:after {
display: none !important;
content: none !important;
}
/* Hide submenus by default; show only when parent has .is-expanded.
The parent theme's superfish/sf-js sets inline `display: none;
visibility: hidden` on every submenu UL on init AND re-applies them
on mouseleave. We must override BOTH `display` and `visibility`
here, otherwise an `is-expanded` UL stays display:block but
visibility:hidden once the cursor moves off — which manifests as
the previously-expanded section's content disappearing the moment
the user hovers a sibling. opacity is forced too for defence in
depth. */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li ul,
html body.evelpidou-needs-hamburger ul.nice-menu li ul {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: static !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 0 16px 16px !important;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
height: auto !important;
}
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li.is-expanded > ul,
html body.evelpidou-needs-hamburger ul.nice-menu li.is-expanded > ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
}
/* Submenu items — full width, indented, lighter weight.
`float: none` is critical: hwpi_classic's stock CSS floats every
submenu LI left, which would remove them from flow and collapse the
parent UL to 0 height even when display:block + visibility:visible
are set on the UL. */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li ul li,
html body.evelpidou-needs-hamburger ul.nice-menu li ul li {
position: relative !important;
width: 100% !important;
display: block !important;
float: none !important;
border: none !important;
background: none !important;
}
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li ul li:before,
html body.evelpidou-needs-hamburger ul.nice-menu li ul li:before { content: none !important; display: none !important; }
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li ul li a,
html body.evelpidou-needs-hamburger ul.nice-menu li ul li a {
display: block !important;
padding: 12px 0 !important;
font-size: 13px !important;
color: #5b554c !important;
background: transparent !important;
}
html body.evelpidou-needs-hamburger #nice-menu-primary-menu li ul li a:hover { background: transparent !important; color: #b07a4a !important; }
/* ============================================================
===== 20. Reduced motion respect =====
For users who prefer reduced motion, kill all the navbar transitions
and stagger animations. State changes still happen — they just snap
instead of animating. Accessibility-first.
============================================================ */
@media (prefers-reduced-motion: reduce) {
html body div#menu-bar,
html body #nice-menu-primary-menu > li > a,
html body #nice-menu-primary-menu > li > a:before,
html body #nice-menu-primary-menu > li.menuparent > a.menu-heading:after,
html body ul.nice-menu li ul li,
html body ul.nice-menu li ul li a,
html body #nice-menu-primary-menu li ul li,
html body #nice-menu-primary-menu li ul li a,
html body.evelpidou-needs-hamburger ul#nice-menu-primary-menu,
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li,
html body #block-os-search-db-site-search input.form-text {
transition: none !important;
animation: none !important;
transition-delay: 0s !important;
}
/* Keep open/closed states intact, just no entrance animation */
html body.evelpidou-needs-hamburger #nice-menu-primary-menu > li,
html body ul.nice-menu li ul li,
html body #nice-menu-primary-menu li ul li {
opacity: 1 !important;
transform: none !important;
}
}