/* Theme Name: Akadimia Athinon Theme URI: https://www.academyofathens.gr Author: BSquare Author URI: https://b2square.gr Description: Full-site-editing block theme for the Academy of Athens (Ακαδημία Αθηνών), built from Figma. Greek-first, Noto Sans, brick & gold accents over a clean white canvas with deep-navy bands. Requires at least: 6.9 Tested up to: 7.1 Requires PHP: 7.4 Version: 0.1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: akadimia-athinwn Tags: full-site-editing, block-patterns, education, news, custom-colors, custom-menu, translation-ready, rtl-language-support */ /* * Most styling lives in theme.json. This file carries only the rules that * theme.json cannot yet express cleanly (a few component-level touches). * Keep specificity low (single class), BEM-ish names. */ /* Type scale: every font-size is rem, derived from the Figma px values (rem = px ÷ 16 at 100%). To scale ALL type up/down in one place, change this single percentage: 100% → 1rem = 16px, 80% → 1rem = 12.8px, 75% → 1rem = 12px. */ html { font-size: 75%; } /* Phones read at arm's length on a small screen, where the 12px root (75% of the browser default) is simply too small. 110% puts the root at 17.6px, so every rem-based size grows by ~47%. Note this does NOT move the mockup-derived sections -- News, Awards, Scholarships, Contact and the Figma mobile menu set their type in fixed px on purpose (see MOCKUP-FIDELITY.md), so they keep their designed sizes. */ @media (max-width: 781px) { html { font-size: 100%; } } /* The `border` preset (#d8dce2) is 1.38:1 on white. That is fine for the decorative rules it was chosen for, but WCAG 1.4.11 asks 3:1 of anything that marks out an interactive component's boundary. Form fields get their own token at 4.05:1 so the decorative preset can stay as designed. */ :root { --aa-field-border: #767f8c; } /* Core's search block carried `borderColor: "border"` (1.38:1). The field is an interactive component, so its boundary needs 3:1 — this is the same token the publication filter uses. Applies on /search/ and the 404 page. */ .wp-block-search__input { border: 1px solid var(--aa-field-border, #767f8c); } /* Same 1.4.1 problem on block-built pages. A core paragraph emits a bare with no class, whereas every theme block link carries an aa-* class, so :not([class]) picks out prose links and leaves the UI alone. */ .entry-content p > a:not([class]), .entry-content li > a:not([class]), .entry-content dd > a:not([class]), .entry-content td > a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; } /* ── Site header ───────────────────────────────────────────────────────── Figma node 2:321. On the home page the bar is a transparent dark overlay sitting on top of the hero; on inner pages it falls back to a solid navy sticky bar. White nav links, full-height vertical dividers, logo left. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; transition: transform 0.35s ease; /* smooth hide/reveal on scroll */ } /* Sticky header hides on scroll-down and reveals on scroll-up (JS toggles the class). Shift a little past 100% so the logo — which overflows the 80px bar — also clears the top of the viewport when hidden. */ .wp-site-blocks > header.wp-block-template-part.aa-header--hidden { transform: translateY( calc( -100% - 24px ) ); } @media (prefers-reduced-motion: reduce) { .wp-site-blocks > header.wp-block-template-part { transition: none; /* hide/reveal instantly for reduced-motion users */ } } .aa-header { background-color: var(--wp--preset--color--navy); /* The logo is 93px tall in an 80px bar, so vertical overflow must stay visible. Clipping only the X axis keeps that overhang while making sure a header that outgrows the viewport can never produce a page-level horizontal scrollbar again. `visible` survives on the Y axis precisely because the other axis is `clip` and not `hidden`. */ overflow-x: clip; overflow-y: visible; transition: background-color 0.3s ease; } /* Hero-template pages (home + academy/library/research, all using the page-home template): the bar is a semi-transparent black veil on top of the full-bleed hero (Figma node 2:321 = rgba(0,0,0,0.5)). Once scrolled past the hero it turns solid navy so white text keeps ≥4.5:1 contrast over light content (WCAG 1.4.3). */ .page-template-page-home .aa-header { background-color: rgba(0, 0, 0, 0.5); } .page-template-page-home .aa-header.is-scrolled { background-color: var(--wp--preset--color--navy); } /* Figma: the bar is exactly 80px tall; the logo (93px) overflows it slightly. Full-width bar with edge padding (~48px @1920, 2.5vw — matching the logo's Figma 2.5% inset) so the icon cluster sits near the right edge, not floating in alignwide margins. */ .aa-header__bar { height: 80px; overflow: visible; padding-inline-start: clamp(16px, 2.5vw, 64px); padding-inline-end: 0; } /* Logo (the helmet + wordmark image — no separate site title). Height 93px > the 80px bar, matching Figma; overflow allowed. The same file as the footer's mark, so the two read as one logo rather than two weights of it; it is an image block, not a site-logo block, which is why core's 1em figure margin has to be cleared here. */ /* Scoped to the bar so the margin beats core's :where(.wp-block-image){margin:0 0 1em}. */ .aa-header__bar .aa-logo { align-self: flex-start; /* top-align so the 4px sits at the top of the bar */ margin: 4px 0 0; /* Figma node 2:304: logo sits 4px from the top of the bar */ overflow: visible; } .aa-logo a { display: block; } .aa-logo img { height: 93px; width: auto; max-width: none; } /* Phones: shrink the logo + icon cells so the bar (logo + search + burger) fits the viewport — otherwise its intrinsic ~480px width overflows and adds a horizontal scrollbar / white gap on the right. */ @media (max-width: 600px) { .aa-logo img { height: 52px; } .aa-header__icons > *, .aa-header__icons .aa-megamenu .aa-mm-trigger, .aa-search__trigger { min-width: 60px; } } /* Nav cluster spans the full bar height so dividers run edge-to-edge */ .aa-nav-cluster { align-self: stretch; gap: 0; } .aa-primary-nav { align-self: stretch; } .aa-primary-nav .aa-nav { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; height: 100%; } .aa-primary-nav .aa-nav__item { display: flex; } .aa-primary-nav .aa-nav__link { display: flex; align-items: center; height: 100%; padding-inline: var(--wp--preset--spacing--40); /* ~32px each side → ~64px between items, per Figma */ white-space: nowrap; text-decoration: none; font-size: 1.25rem; /* Figma 20px */ } /* White nav links. theme.json's core link color is emitted via :root :where(...) and outranks a plain class rule, so force white. */ .aa-header .aa-primary-nav a, .aa-header .aa-primary-nav a:link, .aa-header .aa-primary-nav a:visited { color: #fff !important; } .aa-primary-nav .aa-nav__link:hover, .aa-primary-nav .aa-nav__link:focus-visible { color: var(--wp--preset--color--secondary) !important; text-decoration: none; } /* Keyboard focus needs an indicator of its own. White -> gold is only a 1.81:1 shift and is byte-identical to :hover, and the browser's default ring computes to near-black here (1.16:1 on this navy). Gold on navy is 9.12:1. The burger and search triggers sitting beside these links already do exactly this. */ .aa-primary-nav .aa-nav__link:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: -4px; } /* Current page: the active top-level item is gold (Figma) — the exact same gold token as the hover state above. Overrides the white-link !important rule. */ .aa-primary-nav .aa-nav__item.is-current > .aa-nav__link, .aa-primary-nav .aa-nav__link[aria-current="page"] { color: var(--wp--preset--color--secondary) !important; /* Gold alone is a 1.81:1 shift from the white siblings — not a distinction a colour-blind reader can make. The underline carries the state without colour. */ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; } /* Vertical dividers: between nav items, before the icon cluster, and between icons. Figma node 2:321: solid white 1px full-height separators. */ .aa-primary-nav .aa-nav__item + .aa-nav__item, .aa-header__icons, .aa-header__icons > * + * { border-left: 1px solid #fff; } /* Top-level nav items are plain links (no hover dropdown); sub-items live in the ☰ mega-menu. */ /* Icon cluster (hamburger mega-menu trigger + search) */ .aa-header__icons { display: flex; align-self: stretch; align-items: center; } .aa-header__icons > * { display: flex; align-items: center; justify-content: center; min-width: 80px; /* Figma: 80×80 square icon cells */ height: 100%; color: #fff; }.aa-header__icons .aa-mm-trigger { color: #fff; padding: 0; } .aa-header__icons .aa-megamenu { height: 100%; } .aa-header__icons .aa-megamenu .aa-mm-trigger { height: 100%; min-width: 80px; justify-content: center; } /* Figma open states: the active toggle's cell turns white with a navy icon. */ .aa-megamenu[open] .aa-mm-trigger { background-color: #fff; color: var(--wp--preset--color--navy); } /* Remove the block-gap strip so content sits flush beneath the header (no white space above the first section). */ .wp-site-blocks > main { margin-block-start: 0; } /* Hero-template pages: pull the hero up under the sticky transparent header so the bar overlays the top of the hero (Figma: the 80px menu overlaps the full-bleed hero) and the 100vh hero fills exactly one screen — identical to home. */ .page-template-page-home .wp-site-blocks > main { margin-block-start: -80px; } /* "See all >" style chevron links rendered as buttons-without-fill */ .is-style-link-arrow a::after, a.is-style-link-arrow::after { content: " \203A"; font-weight: 500; } /* Card hover lift — transform/opacity only (a11y: motion-safe) */ @media (prefers-reduced-motion: no-preference) { .aa-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .aa-card:hover, .aa-card:focus-within { transform: translateY(-4px); } } /* ── Members block (akadimia/members) — CMS-driven section matching the home members design ── */ .aa-members { padding-block: var(--wp--preset--spacing--70); overflow-x: clip; /* clip the top line's flush-to-edge overflow so it can't add a page scrollbar */ } .aa-members__inner { --aa-aside: 340px; /* fixed aside width so the frame can reach into the categories column */ --aa-gap: 48px; --aa-frame-w: 8px; /* bold terracotta frame stroke, per Figma (~9px @1920) */ /* Distance from the stage's left edge back to ~the middle of the categories. */ --aa-frame-pull: calc(var(--aa-gap) + (var(--aa-aside) * 0.55)); max-width: 1600px; /* Right-align the component (Figma places it in the right portion of the frame) and drop the right padding so the top frame line can reach the window's right edge when the section is full-width. */ margin-left: auto; margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)); /* negate root padding so the top line is flush with the window edge */ padding-left: var(--wp--preset--spacing--30); padding-right: 0; display: grid; /* Cap the carousel "stage" so cards beyond it scroll within the stage. */ grid-template-columns: var(--aa-aside) minmax(0, 940px); column-gap: var(--aa-gap); justify-content: end; /* pack aside + stage to the right so the frame meets the edge */ align-items: stretch; }/* Left aside: title, class tablist, carousel arrows. */ .aa-members__aside { display: flex; flex-direction: column; justify-content: center; /* center title/tabs/arrows vertically against the taller card stage */ /* Symmetric block padding keeps the centered block clear of the top & bottom frame lines and, being equal top/bottom, holds it at the true vertical midpoint. */ padding-block: clamp(5rem, 3.75vw, 8rem); } .aa-members__title { margin: 0 0 var(--wp--preset--spacing--40); color: var(--wp--preset--color--primary); font-size: 2.25rem; /* Figma 36px */ font-weight: 400; line-height: 1.1; white-space: nowrap; } .aa-members__classes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--50); } .aa-members__class { appearance: none; background: none; border: 0; padding: 2px 0; text-align: left; font-size: 1.5rem; /* Figma 24px */ line-height: 1.2; color: var(--wp--preset--color--contrast); cursor: pointer; } .aa-members__class:hover { color: var(--wp--preset--color--primary); } .aa-members__class.is-active { color: var(--wp--preset--color--primary); font-weight: 600; } .aa-members__class:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 2px; } .aa-members__nav { display: flex; justify-content: center; /* centered under the categories list, per Figma */ gap: 50px; margin: 0; transform: translate(-12px); } .aa-members__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 80px; padding: 0; background: none; border: 0; color: var(--wp--preset--color--contrast); cursor: pointer; } .aa-members__arrow svg { width: 40px; height: 80px; } .aa-members__arrow:hover { color: var(--wp--preset--color--primary); } .aa-members__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 2px; } .aa-members__arrow[disabled] { opacity: 0.35; cursor: default; } /* Right stage: decorative terracotta open-bracket frame around the carousel. Top line runs to the far right with a short down-tick on the left; the bottom line has an up-tick on the left and shares its row with the "All members" link. */ .aa-members__stage { position: relative; display: flex; flex-direction: column; min-height: 500px; /* keep the frame full-height even when a class has no members */ } /* Top line sits ~32px down so the card images poke above it (Figma: image top y0, line y41); it's behind the cards (z-index 0) and extends left into the categories column. */ .aa-members__frame-top { position: absolute; top: 32px; left: calc(-1 * var(--aa-frame-pull)); right: 0; height: 44px; border-top: var(--aa-frame-w) solid var(--wp--preset--color--primary); border-left: var(--aa-frame-w) solid var(--wp--preset--color--primary); z-index: 0; pointer-events: none; } .aa-members__foot { display: flex; align-items: flex-end; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--20); padding-right: clamp(40px, 9%, 150px); /* inset "Όλα τα Μέλη ›" from the right edge, per Figma */ } .aa-members__frame-bottom { flex: 1 1 auto; height: 48px; margin-left: calc(-1 * var(--aa-frame-pull)); /* match the top line's left tick */ border-bottom: var(--aa-frame-w) solid var(--wp--preset--color--primary); border-left: var(--aa-frame-w) solid var(--wp--preset--color--primary); pointer-events: none; } /* Tabpanels: JS hides the inactive ones; without JS they simply stack so no member is hidden from no-JS users or crawlers. */ .aa-members__panel { position: relative; z-index: 1; } /* The active panel grows to fill the stage so the foot (bottom line) stays pinned low and the frame keeps its height — including for empty classes. */ .aa-js .aa-members__panel.is-active { flex: 1 1 auto; } .aa-js .aa-members__panel:not(.is-active) { display: none; } .aa-members__panel + .aa-members__panel { margin-top: var(--wp--preset--spacing--40); } .aa-members__panel:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; } /* Horizontal carousel track. */ .aa-members__track { list-style: none; margin: 0; padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0; display: flex; align-items: flex-start; /* cards top-aligned, so different image heights line up at the top */ gap: clamp(96px, 7.917vw, 203px); /* space between caption blocks, per Figma (6:293 → 6:297 = 152px) */ overflow-x: auto; /* Proximity (not mandatory): the JS aligns cards itself, and `mandatory` force-re-snaps to the first card whenever the lead card resizes (every slide change / height re-measure), which — with scroll-behavior: smooth — made the infinite loop scroll back to the first slide on its own. */ scroll-snap-type: x proximity; /* Slider with no visible scrollbar — navigation is via the arrows (and native touch/swipe); the track stays scrollable for accessibility. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge/IE */ } .aa-members__track::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } /* Card width = the caption width (wider than the image), per Figma; this is what creates the large visual gap between the photos. The image is narrower and sits top-left inside the card. */ .aa-member-card { flex: 0 0 auto; width: 300px; /* Figma card 2 (6:297) = 300px */ max-width: 80vw; scroll-snap-align: start; } .aa-member-card.is-lead { width: 390px; /* Figma card 1 (6:293) = 391px */ } .aa-member-card__media { display: block; } .aa-member-card__img, .aa-member-card__img--placeholder { display: block; width: 180px; /* Figma image 2 (6:280) = 180px */ max-width: 100%; aspect-ratio: 3 / 4; height: auto; /* let aspect-ratio set the height (overrides the height attr) so every image is a clean 3:4 box: small 180x240, lead 240x320 */ object-fit: cover; object-position: center top; /* keep faces from being cropped */ } .aa-member-card.is-lead .aa-member-card__img, .aa-member-card.is-lead .aa-member-card__img--placeholder { width: 240px; /* Figma image 1 (6:277) = 240px */ } /* Animate the lead image as it grows/shrinks (180↔240px; height follows via aspect-ratio). Skipped for reduced-motion, and forced off (below) while the JS measures card heights, where a mid-transition read would mis-size the frame. */ @media (prefers-reduced-motion: no-preference) { .aa-member-card__img, .aa-member-card__img--placeholder { transition: width 0.3s ease; } } .aa-members__track.aa-no-anim .aa-member-card__img, .aa-members__track.aa-no-anim .aa-member-card__img--placeholder { transition: none !important; } .aa-member-card__img--placeholder { /* 53 of the 64 members have no photograph, so this is what most of the carousel shows. A flat panel read as a loading failure; a silhouette reads as "no portrait on file". The span is aria-hidden, so this is purely decorative and never announced. */ background-color: var(--wp--preset--color--surface); background-image: url( 'assets/images/member-placeholder.svg' ); background-repeat: no-repeat; background-position: center 62%; background-size: 58%; } .aa-member-card__name { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--medium, 1.25rem); font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--contrast); } .aa-member-card__name a { color: inherit; text-decoration: none; } .aa-member-card__name a:hover, .aa-member-card__name a:focus-visible { color: var(--wp--preset--color--primary); } .aa-member-card__meta { margin: var(--wp--preset--spacing--10) 0 0; font-size: 1.25rem; /* Figma 20px */ font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--contrast); } .aa-member-card__bio { margin: var(--wp--preset--spacing--20) 0 0; font-size: 1.125rem; /* Figma 18px */ line-height: 1.4; color: var(--wp--preset--color--contrast); } .aa-members__all { flex: 0 0 auto; white-space: nowrap; transform: translateY(30%); /* drop the link so the bottom line runs near its vertical middle, per Figma */ color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.03em; text-decoration: none; } .aa-members__all:hover, .aa-members__all:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; } .aa-members__empty { margin: var(--wp--preset--spacing--40) 0; } /* NB: the track deliberately has NO `scroll-behavior: smooth`. Arrow scrolls are animated explicitly in JS via scrollTo({behavior:'smooth'}); a CSS smooth would ALSO animate the seamless-loop recenter (a direct scrollLeft assignment), making the carousel visibly slide back to the first card on its own. */ /* ── Mobile (Figma 11:346): single column — title, horizontally-scrolling class tabs, horizontally-scrolling 180px cards, small right-aligned arrows, then the "All members" link; a terracotta bracket frames the left/top/bottom. The aside and stage are flattened with display:contents so all parts can be reordered into one column. ── */ @media (max-width: 781px) { .aa-members__inner { --aa-frame-w: 4px; /* mobile frame stroke, per Figma (measured 4px) */ display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); max-width: none; margin: 0; /* Content sits 21px to the right of the 16px border line. */ padding: var(--wp--preset--spacing--40) 0 72px calc(var(--wp--preset--spacing--20) + 21px); position: relative; } /* Top-left bracket: left border 16px from the edge (full height) + top border to the right edge. The bottom line is drawn by the foot so it can stop before the "All members" link. */ .aa-members__inner::before { content: ""; position: absolute; top: var(--wp--preset--spacing--20); left: var(--wp--preset--spacing--20); right: 0; bottom: 40px; border: var(--aa-frame-w) solid var(--wp--preset--color--primary); border-right: 0; border-bottom: 0; pointer-events: none; z-index: 0; } /* Flatten the two containers so every part is a column item we can order. */ .aa-members__aside, .aa-members__stage { display: contents; } .aa-members__title { order: 1; margin: 0; white-space: normal; font-size: 1.5rem; position: relative; z-index: 1; } /* Class tabs become a horizontal, scrollable row. min-width:0 lets the flex item shrink to the column width and scroll internally (otherwise the tabs' combined width pushes the page wider, adding white space on the right). */ .aa-members__classes { order: 2; flex-direction: row; gap: var(--wp--preset--spacing--30); margin: 0; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; position: relative; z-index: 1; } .aa-members__classes::-webkit-scrollbar { display: none; } .aa-members__class { flex: 0 0 auto; font-size: 0.875rem; white-space: nowrap; } /* Cards row. */ .aa-members__panel { order: 3; min-width: 0; max-width: 100%; position: relative; z-index: 1; } .aa-js .aa-members__panel.is-active { flex: 0 0 auto; } .aa-members__track { padding: 0; gap: var(--wp--preset--spacing--30); } .aa-member-card, .aa-member-card.is-lead { width: 180px; } .aa-member-card__img, .aa-member-card__img--placeholder, .aa-member-card.is-lead .aa-member-card__img, .aa-member-card.is-lead .aa-member-card__img--placeholder { width: 180px; } .aa-member-card__name { font-size: 1rem; } .aa-member-card__meta { font-size: 1rem; /* Figma mobile 16px (name & role block) */ } .aa-member-card__bio { font-size: 0.875rem; /* Figma mobile 14px */ } /* The top/left are drawn by the bracket above; the bottom line is the frame-bottom inside the foot (so it stops before "All members"). */ .aa-members__frame-top { display: none; } .aa-members__frame-bottom { display: block; flex: 1 1 auto; height: 0; margin: 0; border-left: 0; border-bottom: var(--aa-frame-w) solid var(--wp--preset--color--primary); } /* Arrows: small, right-aligned, after the cards. */ .aa-members__nav { order: 4; justify-content: flex-end; gap: var(--wp--preset--spacing--30); margin: 0; padding-right: var(--wp--preset--spacing--20); transform: none; position: relative; z-index: 1; } .aa-members__arrow, .aa-members__arrow svg { width: 14px; height: 26px; } /* Bottom line + "All members" (line stops before the link, link centered on it), spanning from the left border across to the right, like desktop. */ .aa-members__foot { position: absolute; left: var(--wp--preset--spacing--20); right: var(--wp--preset--spacing--20); bottom: 40px; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: var(--wp--preset--spacing--20); z-index: 1; } .aa-members__all { transform: translateY(50%); /* centered on the bottom line */ font-size: 1rem; } } /* ════════════════════════════════════════════════════════════════════════ News section (akadimia/news, Figma 8:1004 / mobile 15:355) — the members carousel re-skinned: navy background, gold accents, white text, and wider landscape news cards (image + title + date + "Διαβάστε περισσότερα"). ════════════════════════════════════════════════════════════════════════ */ .aa-members--news { --aa-news-tracking: 0.28em; /* Figma's wide letter-spacing on card text */ background-color: var(--wp--preset--color--navy); } /* Wider stage so 2 full landscape cards + 1/3 of the next show (Figma 7:17). */ .aa-members--news .aa-members__inner { grid-template-columns: var(--aa-aside) minmax(0, 1375px); /* * The frame's left line runs down the middle of the categories column * rather than the 55% of it the shared rule guesses at. Centred on the * line's own width, so it is the line that is centred on the column and * not merely its left edge. */ --aa-frame-pull: calc(var(--aa-gap) + (var(--aa-aside) / 2) + (var(--aa-frame-w) / 2)); max-width: calc(var(--aa-aside) + var(--aa-gap) + 1375px); /* let the stage reach the 2⅓-card width on wide screens */ } /* * A left border the whole way down, not two ticks. The section is as tall as * its tallest card, so the line is stretched between the horizontal rules * instead of being given a height nobody can know in advance. */ .aa-members--news .aa-members__frame-top { height: auto; bottom: 0; } .aa-members--news .aa-members__frame-bottom { border-left: 0; /* the stretched line already draws that corner */ } /* * The stage is painted after the aside, so the line would otherwise cross the * titles. Lifting the aside puts the box in front of it. */ .aa-members--news .aa-members__aside { position: relative; z-index: 1; padding-block: 0; /* the box below carries the breathing room now */ } /* * The box interrupts the line: the section's own colour, 50px of it above and * below, so the line stops at the categories and picks up again after them. */ .aa-members--news .aa-members__asidebox { display: flex; flex-direction: column; padding-block: 50px; /* Nudged off the line so the words sit centred on it, not against it. */ padding-left: 25px; background-color: var(--wp--preset--color--navy); } /* Gold accents */ .aa-members--news .aa-members__title { color: var(--wp--preset--color--secondary); } .aa-members--news .aa-members__frame-top, .aa-members--news .aa-members__frame-bottom, .aa-members--news .aa-members__inner::before { border-color: var(--wp--preset--color--secondary); } .aa-members--news .aa-members__arrow { color: var(--wp--preset--color--secondary); } .aa-members--news .aa-members__arrow:hover { color: #fff; } .aa-members--news .aa-members__arrow:focus-visible, .aa-members--news .aa-members__class:focus-visible, .aa-members--news .aa-members__panel:focus-visible { outline-color: var(--wp--preset--color--secondary); } /* White category tabs (active = bold white, hover = gold) */ .aa-members--news .aa-members__class { color: #fff; } .aa-members--news .aa-members__class:hover { color: var(--wp--preset--color--secondary); } .aa-members--news .aa-members__class.is-active { color: #fff; } /* White "Όλα τα Νέα ›" */ .aa-members--news .aa-members__all { color: #fff; font-size: 1.5rem; } .aa-members--news .aa-members__all:hover, .aa-members--news .aa-members__all:focus-visible { color: var(--wp--preset--color--secondary); } .aa-members--news .aa-members__empty { color: #fff; } /* News card: landscape image + title + date + read-more (Figma 8:1029) */ .aa-members--news .aa-members__track { gap: 62px; /* Figma gap between cards */ padding-right: 0; /* so the peeked 3rd card reaches the stage's right edge */ } .aa-news-card { flex: 0 0 auto; /* Show exactly 2 cards + 1/3 of the next: (7/3)·W + 2·62px gap = stage width. Equals 536px (Figma) when the stage is at its 1375px cap, and scales down proportionally on narrower stages so the 2⅓ ratio always holds. */ width: calc((100% - 2 * 62px) * 3 / 7); max-width: 536px; /* never exceed the Figma card size */ scroll-snap-align: start; } .aa-news-card__media { display: block; } .aa-news-card__img, .aa-news-card__img--placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; /* Figma 536×402 */ object-fit: cover; } .aa-news-card__img--placeholder { background-color: rgba(255, 255, 255, 0.08); } .aa-news-card__title { margin: var(--wp--preset--spacing--30) 0 0; /* ~20px below the image */ font-size: 1.25rem; /* Figma 20px */ font-weight: 500; line-height: 1.4; letter-spacing: var(--aa-news-tracking); color: #fff; } .aa-news-card__title a { color: inherit; text-decoration: none; } .aa-news-card__title a:hover, .aa-news-card__title a:focus-visible { color: var(--wp--preset--color--secondary); } .aa-news-card__date { margin: var(--wp--preset--spacing--20) 0 0; font-size: 1.125rem; /* Figma 18px */ letter-spacing: var(--aa-news-tracking); color: #fff; } .aa-news-card__more { display: inline-block; margin: var(--wp--preset--spacing--10) 0 0; font-size: 1.125rem; /* Figma 18px */ letter-spacing: var(--aa-news-tracking); color: #fff; text-decoration: none; } .aa-news-card__more:hover, .aa-news-card__more:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } @media (max-width: 781px) { /* * The box is a desktop device. Here the aside is flattened so the title, * the categories and the arrows can be ordered into one column, and the box * has to flatten with it or they stop being items of that column. It needs * the section's own specificity to beat the rule that gives it a * background. */ .aa-members--news .aa-members__asidebox { display: contents; } /* Mobile: one full card + a peek of the next (card 300 in the ~353 column). */ .aa-members--news .aa-members__track { gap: var(--wp--preset--spacing--30); } .aa-news-card { width: 300px; } .aa-news-card__img, .aa-news-card__img--placeholder { aspect-ratio: 5 / 4; /* Figma 300×240 */ } .aa-news-card__title { font-size: 1rem; /* Figma 16px */ } .aa-news-card__date { font-size: 0.875rem; /* Figma mobile 14px */ } .aa-news-card__more { font-size: 1rem; /* Figma mobile 16px */ } } /* ════════════════════════════════════════════════════════════════════════ Research Centers (akadimia/research-centers, Figma 7:98 / 7:458 / mobile 15:573) 3 navy class boxes (orange top border). Desktop: click a box → it stays (1/3), the others hide, an orange panel (2/3) of centers opens, with an × to close. Mobile: every box sits beside its (always-open) panel, stacked. ════════════════════════════════════════════════════════════════════════ */ .aa-rc { padding-block: var(--wp--preset--spacing--70); /* Full-width section with a 172px inset (Figma); reduces on narrower screens. Held in a var so the expanded panel can negate it to reach the page edge. */ --aa-rc-inset: clamp(var(--wp--preset--spacing--30), 12vw, 172px); padding-inline: var(--aa-rc-inset); overflow-x: clip; /* contain the expanded orange panel's rightward breakout */ } .aa-rc__inner { /* Fills the section's padded content area. */ } .aa-rc__head { margin-bottom: var(--wp--preset--spacing--40); } .aa-rc__title { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--primary); font-size: 2.25rem; /* Figma 36px */ font-weight: 400; line-height: 1.1; } .aa-rc__intro { margin: 0; color: var(--wp--preset--color--contrast); font-size: 1.5rem; /* Figma 24px */ line-height: 1.5; } /* Row of class items */ .aa-rc__row { display: flex; gap: 20px; justify-content: center; /* collapsed boxes sit centered as a group */ align-items: stretch; } .aa-rc__item { display: flex; gap: 20px; flex: 1 1 0; min-width: 0; max-width: 314px; /* cap each default box; the active item drops this when expanded */ } /* The navy clickable card */ .aa-rc__box { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; /* icon + title/desc stack at the top; the link is pushed to the bottom (.aa-rc__cta) */ min-height: 314px; padding: 20px; background-color: var(--wp--preset--color--navy); border: 0; border-top: 10px solid var(--wp--preset--color--primary); color: #fff; text-align: left; cursor: pointer; font: inherit; } .aa-rc__box:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .aa-rc__icon svg { display: block; height: 90px; width: auto; } .aa-rc__ordinal { display: block; font-size: 1.625rem; /* 26px */ font-weight: 700; /* bold title, per Figma */ letter-spacing: 0.04em; } .aa-rc__name { display: block; font-size: 1.5rem; /* 24px */ font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; } .aa-rc__cta { display: block; margin-top: auto; /* push the link to the bottom, leaving icon + text grouped at the top */ font-size: 1.25rem; /* 20px */ letter-spacing: 0.04em; } /* Orange panel with the centers list */ .aa-rc__panel { position: relative; flex: 2 1 0; min-width: 0; display: flex; align-items: center; padding: 20px 52px 20px 20px; background-color: var(--wp--preset--color--primary); border-top: 10px solid var(--wp--preset--color--navy); color: #fff; } /* Collapsed by default when JS is available (without JS the panels show). */ .aa-js .aa-rc__panel { display: none; } .aa-rc__list { margin: 0; padding-left: 1.3em; list-style: disc; font-size: 1.625rem; /* 26px */ line-height: 1.5; letter-spacing: 0.03em; } .aa-rc__list li { margin: 0; } .aa-rc__list a { color: #fff; text-decoration: none; } .aa-rc__list a:hover, .aa-rc__list a:focus-visible { text-decoration: underline; } .aa-rc__empty { margin: 0; } /* A class's Κέντρα, then its Γραφεία under their own label. The panel centres a single child, so the wrapper is what takes the width and the two lists stack inside it. The label is full white, not a dimmed one: at this size, white on brick is already close to the 4.5:1 floor. */ .aa-rc__groups { flex: 1 1 auto; min-width: 0; } .aa-rc__group + .aa-rc__group { margin-top: 1.25rem; } .aa-rc__group-label { margin: 0 0 0.4rem; font-size: 1.167rem; /* 14px */ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .aa-rc__close { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; } .aa-rc__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Expanded (desktop, JS): active item fills the row, the others hide. */ .aa-rc__row.is-expanded { /* Left-align so the active box lands at the group's first slot (P1); the margins below place it there and stretch the orange out to the page edge. */ justify-content: flex-start; } .aa-rc__row.is-expanded .aa-rc__item { display: none; } .aa-rc__row.is-expanded .aa-rc__item.is-active { display: flex; flex: 1 1 100%; max-width: none; /* box holds box 1's slot; orange fills the rest */ /* Indent to where box 1 sits in the centered group (3×314px boxes + 2×20px gaps = 982px), so whichever box opens lands in box 1's initial position. */ margin-left: max(0px, calc((100% - 982px) / 2)); /* Sweep the orange panel past the section's right inset to the page edge. */ margin-right: calc(-1 * var(--aa-rc-inset)); } .aa-rc__row.is-expanded .aa-rc__item.is-active .aa-rc__box { flex: 0 0 314px; /* stays a 314×314 square */ } .aa-rc__row.is-expanded .aa-rc__item.is-active .aa-rc__panel { display: flex; flex: 1 1 auto; /* covers the rest of the row */ } /* Mobile (Figma 15:573): every box beside its always-open panel, stacked. */ @media (max-width: 781px) { .aa-rc { padding-inline: var(--wp--preset--spacing--20); } .aa-rc__item { max-width: none; } .aa-rc__title { font-size: 1.5rem; } .aa-rc__intro { font-size: 0.875rem; } .aa-rc__row, .aa-rc__row.is-expanded { flex-direction: column; gap: var(--wp--preset--spacing--30); } .aa-rc__item, .aa-rc__row.is-expanded .aa-rc__item { display: flex; flex: 0 0 auto; gap: 4px; } .aa-rc__row.is-expanded .aa-rc__item.is-active { margin-right: 0; /* no desktop breakout on the stacked mobile layout */ margin-left: 0; } .aa-rc__box { flex: 0 0 130px; width: 130px; min-height: 0; display: flex; /* revert the desktop grid to a simple centered column on mobile */ flex-direction: column; align-self: stretch; align-items: center; justify-content: center; /* keep icon+label centered on the stacked mobile box */ text-align: center; gap: 12px; padding: 20px 8px; } .aa-rc__icon svg { height: 80px; } .aa-rc__ordinal, .aa-rc__name { font-size: 0.875rem; text-align: center; } .aa-rc__cta, .aa-rc__close { display: none; /* no read-more / close on mobile (lists are always open) */ } .aa-js .aa-rc__panel, .aa-rc__panel { display: flex; flex: 1 1 auto; padding: 20px; align-items: center; } .aa-rc__list { font-size: 0.875rem; padding-left: 1.1em; } } /* ════════════════════════════════════════════════════════════════════════ Public Appearances (akadimia/public-appearances, Figma 7:501) — navy section, gold title, a right-aligned image banner (gold top border + dark overlay) with a bottom row of type links (Ομιλίες / Συνεντεύξεις / …) separated by thin rules. ════════════════════════════════════════════════════════════════════════ */ .aa-pa { background-color: var(--wp--preset--color--navy); padding-block: 56px 20px; } .aa-pa__inner { display: flex; flex-direction: column; align-items: flex-end; /* banner sits to the right */ gap: 24px; } .aa-pa__title { margin: 0; align-self: stretch; padding-left: clamp(var(--wp--preset--spacing--30), 28vw, 542px); /* Figma pl-542 */ color: var(--wp--preset--color--secondary); font-size: 2.25rem; /* Figma 36px */ font-weight: 400; line-height: 1.1; } .aa-pa__banner { position: relative; width: 100%; max-width: 1218px; aspect-ratio: 1218 / 280; max-height: 280px; border-top: 10px solid var(--wp--preset--color--secondary); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; isolation: isolate; } .aa-pa__overlay { position: absolute; inset: 0; z-index: 0; background-color: rgba(33, 39, 50, 0.5); /* Figma dark veil */ pointer-events: none; } .aa-pa__links { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5%, 40px); z-index: 1; display: flex; align-items: stretch; justify-content: space-between; padding-inline: clamp(20px, 8%, 101px); } .aa-pa__link { display: inline-flex; align-items: center; color: #fff; font-size: 1.625rem; /* Figma 26px */ letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } .aa-pa__link:hover, .aa-pa__link:focus-visible { color: var(--wp--preset--color--secondary); } .aa-pa__sep { flex: 0 0 auto; width: 1px; min-height: 1.6em; align-self: stretch; background-color: rgba(255, 255, 255, 0.5); } @media (max-width: 781px) { .aa-pa { padding-block: var(--wp--preset--spacing--40); /* Figma py-32 */ } .aa-pa__inner { align-items: stretch; gap: var(--wp--preset--spacing--30); /* gap-24 */ } .aa-pa__title { padding-left: var(--wp--preset--spacing--20); font-size: 1.5rem; /* 24px */ } .aa-pa__banner { max-width: none; aspect-ratio: auto; max-height: none; min-height: 280px; /* Figma h-280 */ } /* Links stack vertically, right-aligned, with full-width horizontal rules. */ .aa-pa__links { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 4px; bottom: 6px; padding-inline: var(--wp--preset--spacing--20); } .aa-pa__link { font-size: 1rem; /* 16px */ text-align: right; } .aa-pa__sep { width: 100%; height: 1px; min-height: 0; } } /* ════════════════════════════════════════════════════════════════════════ Library (akadimia/library, Figma 7:154 / mobile 11:160) — title + intro, a full-width bookshelf image, and two navy cards (orange top border, ~85% navy) overlapping the image bottom. Desktop: icon left, text right (link right- aligned). Mobile: 2 cards with icon+title top row, then text + link. ════════════════════════════════════════════════════════════════════════ */ .aa-lib { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); } .aa-lib__head { padding-left: clamp(var(--wp--preset--spacing--30), 12vw, 172px); margin-bottom: 12px; } .aa-lib__title { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--primary); font-size: 2.25rem; /* Figma 36px */ font-weight: 400; line-height: 1.1; } .aa-lib__intro { margin: 0; color: var(--wp--preset--color--contrast); font-size: 1.5rem; /* Figma 24px */ line-height: 1.4; } .aa-lib__stage { display: flex; flex-direction: column; align-items: center; } .aa-lib__image { width: 100%; height: 274px; margin-bottom: -78px; /* the cards overlap the image bottom */ background-size: cover; background-position: center; background-repeat: no-repeat; } .aa-lib__cards { position: relative; z-index: 1; /* Without this the 18px padding sat OUTSIDE max-width, making the row 36px wider than its parent at every width below 1348px -- a 16px horizontal scrollbar on the front page, including at the 320px WCAG reflow width. The max-width comment below only adds up with the padding inside. */ box-sizing: border-box; width: 100%; max-width: 1312px; /* 2 × 600 + 56 gap + padding */ display: flex; gap: 56px; justify-content: center; padding-inline: var(--wp--preset--spacing--30); } .aa-lib__card { width: 600px; max-width: 100%; position: relative; /* containing block for the stretched link (whole card clickable) */ display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon desc" "icon link"; column-gap: 28px; row-gap: 16px; align-content: start; min-height: 236px; padding: 32px 64px 20px 20px; background-color: rgba(13, 32, 53, 0.85); /* navy at 85% (image shows through) */ border-top: 10px solid var(--wp--preset--color--primary); color: #fff; } .aa-lib__icon { grid-area: icon; align-self: start; } .aa-lib__icon svg { display: block; height: 95px; width: auto; } .aa-lib__card-title { grid-area: title; margin: 0; color: #fff; /* override the theme's dark heading color on the navy card */ font-size: 1.6875rem; /* 27px */ font-weight: 400; line-height: 1.2; letter-spacing: 0.04em; /* Two cards sit side by side right down to 320px, where the title track is ~74px and a word like "Βιβλιοθήκης" needs ~113px. Without this the word pushes the whole page 6px wide and 1.4.10 Reflow fails at 320px. */ overflow-wrap: break-word; } .aa-lib__card-text { grid-area: desc; margin: 0; font-size: 1.25rem; /* 20px */ line-height: 1.4; letter-spacing: 0.04em; } .aa-lib__link { grid-area: link; justify-self: end; /* right-aligned on desktop */ color: #fff; font-size: 1.25rem; letter-spacing: 0.04em; text-decoration: none; } .aa-lib__link:hover, .aa-lib__link:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } /* Stretched link: expand the real 's hit area to cover the whole card, so a click anywhere on the navy box follows the link. Keeps one keyboard-focusable anchor (no nested/duplicate links), and the card shows the link cursor. */ .aa-lib__card:has(.aa-lib__link) { cursor: pointer; } .aa-lib__link::after { content: ""; position: absolute; inset: 0; } /* Reflect the link's hover state when hovering anywhere on the card. */ .aa-lib__card:hover .aa-lib__link { color: var(--wp--preset--color--secondary); text-decoration: underline; } @media (max-width: 781px) { .aa-lib { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } .aa-lib__head { padding-left: var(--wp--preset--spacing--20); } .aa-lib__title { font-size: 1.5rem; } .aa-lib__intro { font-size: 0.875rem; } .aa-lib__cards { max-width: none; gap: 16px; align-items: stretch; padding-inline: var(--wp--preset--spacing--20); } .aa-lib__card { width: auto; flex: 1 1 0; min-width: 0; min-height: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "desc desc" "link link"; column-gap: 8px; row-gap: 8px; padding: 24px 8px; } .aa-lib__icon { align-self: start; } .aa-lib__icon svg { height: 35px; } .aa-lib__card-title { font-size: 1.125rem; /* 18px */ } .aa-lib__card-text { font-size: 0.875rem; /* 14px */ } .aa-lib__link { justify-self: start; /* left-aligned on mobile */ font-size: 1rem; } } /* ── Tabbed mega-menu: native
/ + CSS :checked radio tabs. Matches the open-menu frames. ── */ .aa-mm-trigger { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; font-weight: 500; color: var(--wp--preset--color--contrast); padding: 0.25rem 0.4rem; } .aa-mm-trigger::-webkit-details-marker { display: none; } .aa-mm-trigger:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .aa-mm-icon-close { display: none; } .aa-megamenu[open] .aa-mm-icon-open { display: none; } .aa-megamenu[open] .aa-mm-icon-close { display: inline; } .aa-mm-panel { position: absolute; left: 0; /* Right edge stops at the right of the burger button (= left of the search icon). The header bar has no end padding, so the 80px search cell sits flush at the screen edge → the burger's right edge is 80px from it. */ right: 80px; top: 100%; z-index: 90; /* Figma open-menu (node 8:1237). Phones override this to 0.92 further down: on a small screen the 28% show-through slid headlines and photographs under the menu text and broke it up. On desktop the panel is wide and the type is larger, so the designed value holds. */ background-color: rgba(0, 0, 0, 0.72); color: var(--wp--preset--color--base); /* The panel hangs off a position:sticky header, so the header carries it along as the page scrolls and scrollY never moves -- anything taller than the viewport was unreachable by mouse, keyboard or AT. On a wide but short window (1280x320, or 200%+ zoom on a short window) the last links in the panel simply could not be got at. The mobile block further down already does this with 100dvh; desktop needs its own bound. */ max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; } /* Don't lay out the panel while closed — its absolute positioning otherwise escapes the native
hiding and adds horizontal scroll. */ .aa-megamenu:not([open]) .aa-mm-panel { display: none; } .aa-mm-inner { max-width: 1600px; margin-inline: auto; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); } /* --- Desktop: the tabbed mega-menu (unchanged) ------------------------ */ .aa-mm-tabs { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); } .aa-mm-tablist { display: flex; flex-wrap: wrap; /* Figma 8:1237: 16px, then the rule, then 16px. Same hairline the header's icon cells already use. */ gap: 16px; flex-basis: 100%; } .aa-mm-tablist > * + * { border-left: 1px solid #fff; padding-left: 16px; } .aa-mm-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .aa-mm-tab { cursor: pointer; padding-bottom: 0.5rem; border-bottom: 2px solid transparent; /* Figma 8:1237 draws every label solid white — the gold underline on the checked tab is what marks the open panel, not a dimmed colour. This was 0.75, which rendered rgb(196,196,196) and made the whole row read as disabled. */ color: #fff; font-weight: 500; font-size: 1.25rem; /* Figma 20px */ } .aa-mm-tab:hover { color: #fff; } /* A section with no drawer is a link in the tab row; it must not look different from its siblings, only behave differently. */ .aa-mm-tab--link { text-decoration: none; } .aa-mm-tab--link:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } .aa-mm-tabs:has( #aa-mm-1:focus-visible ) label[for="aa-mm-1"], .aa-mm-tabs:has( #aa-mm-2:focus-visible ) label[for="aa-mm-2"], .aa-mm-tabs:has( #aa-mm-3:focus-visible ) label[for="aa-mm-3"], .aa-mm-tabs:has( #aa-mm-4:focus-visible ) label[for="aa-mm-4"], .aa-mm-tabs:has( #aa-mm-5:focus-visible ) label[for="aa-mm-5"], .aa-mm-tabs:has( #aa-mm-6:focus-visible ) label[for="aa-mm-6"], .aa-mm-tabs:has( #aa-mm-7:focus-visible ) label[for="aa-mm-7"], .aa-mm-tabs:has( #aa-mm-8:focus-visible ) label[for="aa-mm-8"], .aa-mm-tabs:has( #aa-mm-9:focus-visible ) label[for="aa-mm-9"], .aa-mm-tabs:has( #aa-mm-10:focus-visible ) label[for="aa-mm-10"], .aa-mm-tabs:has( #aa-mm-11:focus-visible ) label[for="aa-mm-11"], .aa-mm-tabs:has( #aa-mm-12:focus-visible ) label[for="aa-mm-12"] { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } /* Where :has() is unsupported the only focus indicator would be the UA ring on a 1px, opacity-0 radio — a stray dot. Same fallback convention as .aa-linkboxes__link. The radio stops being visually hidden only while focused. */ @supports not selector(:has(*)) { .aa-mm-radio:focus-visible { width: auto; height: auto; opacity: 1; outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } } .aa-mm-panels { flex-basis: 100%; margin-top: var(--wp--preset--spacing--40); } .aa-mm-list { display: none; list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--wp--preset--spacing--60); } .aa-mm-list li { margin-bottom: var(--wp--preset--spacing--20); break-inside: avoid; } .aa-mm-list a { color: var(--wp--preset--color--base); text-decoration: none; font-size: var(--wp--preset--font-size--large); } .aa-mm-list a:hover, .aa-mm-list a:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } /* Active tab + matching panel. Covers up to 12 top-level items so the menu can grow from Appearance → Menus without a CSS change. Item 13 would get a tab that never highlights and a panel that never opens, so if the menu ever nears that, extend BOTH lists below and the :focus-visible list above together. */ .aa-mm-tabs:has( #aa-mm-1:checked ) label[for="aa-mm-1"], .aa-mm-tabs:has( #aa-mm-2:checked ) label[for="aa-mm-2"], .aa-mm-tabs:has( #aa-mm-3:checked ) label[for="aa-mm-3"], .aa-mm-tabs:has( #aa-mm-4:checked ) label[for="aa-mm-4"], .aa-mm-tabs:has( #aa-mm-5:checked ) label[for="aa-mm-5"], .aa-mm-tabs:has( #aa-mm-6:checked ) label[for="aa-mm-6"], .aa-mm-tabs:has( #aa-mm-7:checked ) label[for="aa-mm-7"], .aa-mm-tabs:has( #aa-mm-8:checked ) label[for="aa-mm-8"], .aa-mm-tabs:has( #aa-mm-9:checked ) label[for="aa-mm-9"], .aa-mm-tabs:has( #aa-mm-10:checked ) label[for="aa-mm-10"], .aa-mm-tabs:has( #aa-mm-11:checked ) label[for="aa-mm-11"], .aa-mm-tabs:has( #aa-mm-12:checked ) label[for="aa-mm-12"] { color: #fff; border-bottom-color: var(--wp--preset--color--secondary); } #aa-mm-1:checked ~ .aa-mm-panels .aa-mm-list[data-panel="1"], #aa-mm-2:checked ~ .aa-mm-panels .aa-mm-list[data-panel="2"], #aa-mm-3:checked ~ .aa-mm-panels .aa-mm-list[data-panel="3"], #aa-mm-4:checked ~ .aa-mm-panels .aa-mm-list[data-panel="4"], #aa-mm-5:checked ~ .aa-mm-panels .aa-mm-list[data-panel="5"], #aa-mm-6:checked ~ .aa-mm-panels .aa-mm-list[data-panel="6"], #aa-mm-7:checked ~ .aa-mm-panels .aa-mm-list[data-panel="7"], #aa-mm-8:checked ~ .aa-mm-panels .aa-mm-list[data-panel="8"], #aa-mm-9:checked ~ .aa-mm-panels .aa-mm-list[data-panel="9"], #aa-mm-10:checked ~ .aa-mm-panels .aa-mm-list[data-panel="10"], #aa-mm-11:checked ~ .aa-mm-panels .aa-mm-list[data-panel="11"], #aa-mm-12:checked ~ .aa-mm-panels .aa-mm-list[data-panel="12"] { display: block; } /* Phones swap the tabs for the stacked list below; exactly one is shown. */ .aa-mm-nav { display: none; } @media (max-width: 781px) { .aa-mm-tabs { display: none; } .aa-mm-nav { display: block; } } /* Stacked section list. Each row is the section link plus a caret button that opens its sub-list; the two are separate controls so tapping the name goes to the page and tapping the caret expands. Rows are full-width and generously tall because this is a touch target first. */ .aa-mm-nav { list-style: none; margin: 0; padding: 0; } .aa-mm-item + .aa-mm-item { border-top: 1px solid rgba(255, 255, 255, 0.16); } .aa-mm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); } .aa-mm-link { flex: 1 1 auto; display: block; padding: 1.25rem 0; color: #fff; text-decoration: none; font-weight: 500; font-size: 1.5rem; /* 18px at the 12px root */ } .aa-mm-link:hover, .aa-mm-link:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } /* The caret is its own control: 44px square so it clears the minimum touch target, and it must never swallow a tap meant for the link beside it. */ .aa-mm-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; } .aa-mm-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; } .aa-mm-caret { transition: transform 0.18s ease; } .aa-mm-toggle[aria-expanded="true"] .aa-mm-caret { transform: rotate(90deg); } @media ( prefers-reduced-motion: reduce ) { .aa-mm-caret { transition: none; } } .aa-mm-sub { list-style: none; margin: 0; padding: 0 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); } .aa-mm-sub[hidden] { display: none; } .aa-mm-sub li { margin-bottom: var(--wp--preset--spacing--20); } .aa-mm-sub a { display: block; padding: 0.375rem 0; color: #fff; text-decoration: none; font-size: var(--wp--preset--font-size--large); } .aa-mm-sub a:hover, .aa-mm-sub a:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } /* ── Search overlay: clicking the magnifier drops a full-width veil with a big single-line input, matching Figma "search" frame (node 8:947). Same no-JS
pattern as the mega-menu; the magnifier swaps to an X while open. ── */ .aa-search { height: 100%; } .aa-search__trigger { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-width: 80px; cursor: pointer; list-style: none; color: #fff; padding: 0; } .aa-search__trigger::-webkit-details-marker { display: none; } /* Figma: while open, the search cell turns white with a navy close (X). */ .aa-search[open] .aa-search__trigger { background-color: #fff; color: var(--wp--preset--color--navy); } .aa-search__trigger:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .aa-search__icon-close { display: none; } .aa-search[open] .aa-search__icon-open { display: none; } .aa-search[open] .aa-search__icon-close { display: inline; } .aa-search__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; /* Same semi-transparent black veil as the mega-menu (Figma 8:947). */ /* Matches the mega-menu veil — the two open from adjacent buttons over the same page, so they cannot differ. Figma value on desktop, 0.92 on phones; both overridden together in the max-width:781px block. */ background-color: rgba(0, 0, 0, 0.72); /* The veil covers exactly the hero banner: same height as .aa-hero (min-height: 100vh). */ height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding-top: 140px; /* Figma pt-140 */ } /* Don't lay out the veil while closed (absolute positioning escapes the native
hiding and would add horizontal/vertical scroll). */ .aa-search:not([open]) .aa-search__panel { display: none; } .aa-search__form { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); width: 964px; /* Figma bar width */ max-width: calc(100% - 2 * var(--wp--preset--spacing--50)); border-bottom: 2px solid #fff; /* white underline */ padding-bottom: 10px; } /* WCAG 2.4.7: the input drops its own outline, so surface keyboard focus on the bar itself — the gold underline thickens (clearly perceivable change). */ .aa-search__form:focus-within { border-bottom-width: 4px; } .aa-search__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-family: var(--wp--preset--font-family--noto); font-size: 4.5rem; /* Figma 72px */ line-height: 1; letter-spacing: 4.32px; /* Figma tracking */ padding-left: 16px; } .aa-search__input::placeholder { color: #fff; opacity: 1; } .aa-search__submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; background: transparent; border: 0; cursor: pointer; color: #fff; } .aa-search__submit:hover, .aa-search__submit:focus-visible { color: var(--wp--preset--color--secondary); } /* Hide the inline primary nav until the bar can actually hold it; the mega-menu trigger is the entry point below that, and it carries every link the inline nav does. The breakpoint is the bar's real intrinsic width: five nowrap items (the 35-character "Έρευνα & Επιστημονική Δραστηριότητα" is ~329px on its own) + the 285px logo + two 80px icon cells + gaps need >=1365px. At the old 900px the nav stayed visible down through widths where it pushed the burger AND the search trigger completely off-screen, so between 901px and 1364px there was no reachable navigation at all. If the menu labels change, re-measure: the bar needs about 0.025 x viewport + 1331 px. */ @media (max-width: 1365px) { .aa-primary-nav { display: none !important; } } /* Mobile: anchor the dropdown to the burger button so it drops straight down from the bar and its RIGHT edge lines up with the button's right edge. Making the
the positioned ancestor means right:0 = the button's right edge (no magic numbers), and top:100% = exactly under the 80px bar. */ @media (max-width: 781px) { .aa-megamenu { position: relative; } .aa-mm-panel { position: absolute; top: 100%; right: 0; left: auto; /* Span from ~the screen's left edge to the button's right edge. 80px is the widest an icon cell gets, so the left edge never goes off-screen (and the inner padding stays visible) regardless of the actual cell width. */ width: calc(100vw - var(--aa-mobile-cell)); /* Full-height overlay from under the icon cluster down (Figma 18:633, inset 52px 52px 0 0). */ height: calc(100vh - var(--aa-mobile-bar)); height: calc(100dvh - var(--aa-mobile-bar)); overflow-y: auto; } /* Lock the page behind an open header overlay (class added by akadimia.js). The overlay's own content still scrolls via its overflow-y:auto. */ html.aa-menu-open, html.aa-menu-open body { overflow: hidden; } /* Figma 18:3: the search is a thin row flush under the header bar — "Search" left-aligned with the magnifier on the right and a full-width underline — over a full-height dimmed hero. Anchor the panel to the (now relative)
like the mega-menu does, so top:100% lands exactly under the 80px bar and the dvh height fills to the bottom. Pin the form to the TOP. */ .aa-search { position: relative; } .aa-search__panel { position: absolute; top: 100%; left: auto; right: 0; width: 100vw; /* full-width veil, right edge at the screen edge */ height: calc(100vh - var(--aa-mobile-bar)); height: calc(100dvh - var(--aa-mobile-bar)); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; } .aa-search__form { width: auto; /* stretch to the panel via align-items:stretch */ max-width: none; box-sizing: border-box; /* keep side padding inside the width (no right-edge clip) */ padding: 18px 20px; border-bottom-width: 1px; } .aa-search__form:focus-within { border-bottom-width: 2px; } .aa-search__input { font-size: 1.75rem; letter-spacing: 0.04em; padding-left: 0; } .aa-search__submit { width: 32px; height: 32px; } .aa-search__submit svg { width: 100%; height: 100%; } } /* Tablet: shrink the oversized desktop placeholder so it stays on one line */ @media (max-width: 1200px) and (min-width: 782px) { .aa-search__input { font-size: clamp(2.5rem, 6vw, 4.5rem); } .aa-search__panel { padding-block: 96px; } } /* Visually-hidden helper for skip link / sr-only labels */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #fff; clip: auto; clip-path: none; color: #0d2035; display: block; height: auto; left: 5px; padding: 15px 23px 14px; top: 5px; width: auto; z-index: 100000; } /* ── Hero Banner block (akadimia/hero-banner) ───────────────────────────── Full-bleed banner: background image + navy overlay, with an independently positioned content group (title/text/button) and a foreground image, placed via CSS grid place-self (9-point positions set inline by render.php). */ .aa-hero-banner { position: relative; display: grid; grid-template: 1fr / 1fr; box-sizing: border-box; /* so min-height:100vh includes the padding (button stays in view) */ background-color: var(--wp--preset--color--navy); /* fallback until image loads */ background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; isolation: isolate; /* No section padding: image spacing comes solely from each image's own margin (0 = flush to the edge). The content group keeps its own inset. */ } .aa-hero-banner__overlay { position: absolute; inset: 0; z-index: 0; background-color: var(--wp--preset--color--navy); pointer-events: none; } .aa-hero-banner__content { grid-area: 1 / 1; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20); max-width: min(720px, 100%); padding: clamp(1.5rem, 2.5vw, 5.333rem); /* keeps the text/button inset from the edges */ color: var(--wp--preset--color--base); } /* Small letterspaced kicker above the hero title (e.g. "ΒΙΒΛΙΟΘΗΚΗ ΑΚΑΔΗΜΙΑΣ ΑΘΗΝΩΝ"). */ .aa-hero-banner__eyebrow { margin: 0; color: var(--wp--preset--color--base); font-size: clamp(1rem, 0.719vw, 1.533rem); letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(13, 32, 53, 0.6); /* holds AA over the photo */ } .aa-hero-banner__title { margin: 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--huge); line-height: 1.1; } /* Heroes that lead with an eyebrow use the big bold title + thin italic subtitle treatment (Figma AAbooks), matching the logo-lockup variant. */ .aa-hero-banner__content:has( .aa-hero-banner__eyebrow ) .aa-hero-banner__title { /* AAbooks and AAerevna draw this identically: 50px cap height on a 1920 canvas, i.e. a 70px face = 3.65vw. The cap has to clear that on a wide screen or the vw term stops driving and the title shrinks. */ font-size: clamp(2rem, 3.65vw, 7.787rem); font-weight: 700; /* PSD line lengths: 11.8em and 11.0em on AAbooks, ~11em on AAerevna — so the two-line break survives while the shorter title stays on one line. */ max-width: 12.5em; } .aa-hero-banner__content:has( .aa-hero-banner__eyebrow ) .aa-hero-banner__text { font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 3.413rem); /* PSD: 22px cap = a 31px face */ max-width: 52ch; text-shadow: 0 1px 12px rgba(13, 32, 53, 0.55); } .aa-hero-banner__text { margin: 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--large); } .aa-hero-banner__button { display: inline-block; margin-top: var(--wp--preset--spacing--20); padding: 0.7em 1.6em; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); text-decoration: none; border-radius: 2px; font-weight: 500; } .aa-hero-banner__button:hover, .aa-hero-banner__button:focus-visible { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--navy); } /* Brick -> gold is a 2.82:1 state change, just under the 3:1 a focus indicator needs. The navy ring is 9.12:1 against the gold it lands on. */ .aa-hero-banner__button:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -4px; } .aa-hero-banner__image { grid-area: 1 / 1; position: relative; z-index: 2; max-width: 90%; /* width comes from the per-image inline style; this only caps it on small screens */ height: auto; } /* Phones: both hero images share the single grid cell and are pushed to opposite bottom corners by an inline place-self, so they only stay apart while each is under half the cell wide. The desktop widths (360px and 220px) are wider than that on a phone, and the 90% cap above lets them overlap completely. Cap each to just under half, and trim the inline margin so the pair still clears at 320px. */ @media (max-width: 781px) { .aa-hero-banner__image { max-width: calc(50% - 24px); margin: 10px !important; /* overrides the per-image inline desktop margin */ } } /* Content lockup image (e.g. the "100 Χρόνια Ακαδημία Αθηνών" logo) shown above the hero subtitle. Width comes from the inline style; capped on small screens. */ .aa-hero-banner__content-logo { display: block; max-width: 100%; height: auto; margin-bottom: var(--wp--preset--spacing--20); filter: drop-shadow( 0 2px 14px rgba(13, 32, 53, 0.45) ); /* legibility over bright image, no heavy overlay */ } /* When the content group leads with a logo lockup, the subtitle is italic (Figma AAakadimia hero). Scoped so other heroes keep the upright text. */ .aa-hero-banner__content:has( .aa-hero-banner__content-logo ) .aa-hero-banner__text { /* Thin italic subtitle (PSD): Noto Sans Light Italic (300), ~2.7rem. */ font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.688vw, 3.6rem); max-width: 46ch; text-shadow: 0 1px 12px rgba(13, 32, 53, 0.55); /* keeps white subtitle at AA over lit areas */ } /* Stat bar pinned to the bottom of the hero: gold count-up numbers over a navy scrim, italic labels beneath. Full-bleed row, evenly distributed edge to edge. */ .aa-hero-banner__stats { grid-area: 1 / 1; place-self: end stretch; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(1rem, 1.562vw, 3.333rem); box-sizing: border-box; padding: clamp(2.5rem, 3.125vw, 6.667rem) clamp(1.5rem, 2.5vw, 5.333rem) clamp(1.75rem, 2.188vw, 4.667rem); /* Flat semi-transparent black band with a crisp top edge (per Figma — a neutral black veil like the header, ~rgba(0,0,0,0.5), not navy and not a gradient). Nudged to 0.6 so the white labels clear WCAG AA (4.5:1) over the bright marble. */ background: rgba(0, 0, 0, 0.6); pointer-events: none; /* decorative scrim; never blocks clicks on hero content */ } .aa-hero-banner__stat { display: flex; flex-direction: column; gap: 0.35rem; } .aa-hero-banner__stat-value { /* White, not the gold of the Figma frame: the client asked for the numbers to read as one with their labels underneath. */ color: var(--wp--preset--color--base); /* Noto Sans Black (900) — matches the Figma stat numbers, which are heavier than the theme's 700 body max. The 900 face is self-hosted (assets/fonts/noto-sans-900.woff2, digit/ASCII subset) and declared on the Noto Sans family in theme.json, so no external request and the same family as the rest of the site. */ font-weight: 900; font-size: clamp(2.25rem, 2.969vw, 6.333rem); line-height: 1; letter-spacing: 0; /* black weight sits tighter, like the design; tabular-nums keeps digits even */ font-variant-numeric: tabular-nums; /* fixed digit width: no jitter while counting */ } .aa-hero-banner__stat-label { color: var(--wp--preset--color--base); /* Noto Sans Light Italic (300) — the thin italic in the PSD. Real light+italic cut is self-hosted (assets/fonts/noto-sans-300-italic.woff2, Greek+Latin subset); the theme's other weights are upright, so without it this rendered as faux-italic 400. */ font-style: italic; font-weight: 300; font-size: clamp(1rem, 0.75vw, 1.6rem); letter-spacing: 0.04em; text-shadow: 0 1px 6px rgba(13, 32, 53, 0.7); /* extra insurance for AA over the photo */ } @media (max-width: 600px) { /* Two stats per row on phones instead of four squeezed columns. */ .aa-hero-banner__stat { flex: 0 0 40%; } } /* ========================================================================= Page intro (Figma AAakadimia — "Ανώτατο πνευματικό ίδρυμα της χώρας") Two columns: a right-aligned heading + body text, and an image, wrapped by a brick "bracket" frame. The top bar bleeds off the right of the viewport and the image overlaps it; a vertical bar + partial bottom bar + quick links close the shape. Image right by default; [data-media-side="left"] mirrors it. ========================================================================= */ .aa-page-intro { --aa-intro-brick: var(--wp--preset--color--primary); --aa-intro-bar: 8px; /* frame stroke (~9px in the 1920 PSD) */ --aa-intro-gutter: 74px; /* how far the corner stubs sit off the image edge */ --aa-intro-overlap: 38px; /* image overlaps the top bar by this much */ --aa-intro-under: 46px; /* drop the bottom bar to the first link's line */ --aa-intro-stub-top: 36px; /* length of the top-left down-stub */ --aa-intro-stub-bot: 44px; /* length of the bottom-left up-stub */ --aa-intro-rowgap: clamp(1rem, 1.156vw, 2.467rem); /* gap above the links row */ --aa-intro-link-size: clamp(1.3rem, 1.094vw, 2.333rem); --aa-intro-link-lh: 1.1; position: relative; box-sizing: border-box; padding-block: clamp(3rem, 3.75vw, 8rem); background: var(--wp--preset--color--base); overflow-x: clip; /* lets the top bar bleed to the viewport edge without a scrollbar */ } .aa-page-intro__inner { max-width: 1440px; /* the PSD lays the text+image out across ~1400px, not the full 1600 wide-size */ margin-inline: auto; padding-inline: clamp(1.25rem, 1.875vw, 4rem); box-sizing: border-box; display: grid; /* Text column is narrower than the image (PSD ≈ 513 : 762). Links get their own row under the image so the text column can centre against the image alone. */ grid-template-columns: 5fr 7fr; grid-template-areas: "body media" "space below" "space links"; column-gap: calc(var(--aa-intro-gutter) - var(--aa-intro-bar)); /* title right edge lands under the down-stub's inner edge */ row-gap: var(--aa-intro-rowgap); /* puts the first link on the bottom-bar line */ align-items: center; /* vertically centres the heading/text against the image */ } /* --- Text column: aligned toward the frame; title + body both inset off it --- */ .aa-page-intro__body { grid-area: body; text-align: right; padding-top: clamp(2rem, 2.812vw, 6rem); /* drop the title clear of the top-border section */ } .aa-page-intro__eyebrow { margin: 0 0 0.75rem; color: var(--aa-intro-brick); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .aa-page-intro__title { /* Same style as the home-page section titles (.aa-members__title / .aa-rc__title). */ margin: 0 0 clamp(0.9rem, 0.844vw, 1.8rem); color: var(--wp--preset--color--primary); font-size: 2.25rem; /* Figma 36px */ font-weight: 400; line-height: 1.1; text-wrap: balance; /* even 2-line break like the PSD, not a long line 1 + orphan */ /* The text column ends exactly where the frame's vertical bar ends, so every right-aligned line ran its last few pixels underneath the bar — plainest on a narrower screen, where the type is large against the same 8px stroke. Inset the title past the stroke and leave a little air beside it. */ padding-right: calc( var(--aa-intro-bar) + clamp(0.5rem, 0.833vw, 1.25rem) ); } .aa-page-intro__text { margin: 0; /* Only the body text is inset from the frame (~54px in the PSD); the title above runs to the frame line, its right edge under the down-stub. */ padding-right: clamp(1.5rem, 2.125vw, 4.533rem); /* Dark charcoal derived from --contrast so it tracks the palette; ~9:1 on white — clears WCAG AA (and AAA) for body text. */ color: color-mix( in srgb, var(--wp--preset--color--contrast) 88%, #fff ); font-size: 1.6rem; font-weight: 500; /* medium — heavier than the 400 default */ line-height: 1.45; } .aa-page-intro__text p { margin: 0 0 1em; } .aa-page-intro__text p:last-child { margin-bottom: 0; } /* --- Image + the brick frame (two corner brackets — the left side is open) --- */ .aa-page-intro__media { grid-area: media; position: relative; } .aa-page-intro__image { position: relative; z-index: 1; /* the image sits OVER the frame bars */ display: block; width: 100%; aspect-ratio: 76 / 50; /* matches the source photo (760×500) */ object-fit: cover; } /* Top-left bracket: the top bar (passes behind the image, bleeds off-screen right) plus a short down-stub. */ .aa-page-intro__media::after { content: ""; position: absolute; z-index: 0; top: var(--aa-intro-overlap); left: calc( -1 * var(--aa-intro-gutter) ); right: -100vw; /* clipped by .aa-page-intro's overflow-x: clip → reaches the viewport edge */ height: var(--aa-intro-stub-top); border-top: var(--aa-intro-bar) solid var(--aa-intro-brick); border-left: var(--aa-intro-bar) solid var(--aa-intro-brick); } /* Bottom-left bracket: the partial bottom bar plus a short up-stub. */ .aa-page-intro__media::before { content: ""; position: absolute; z-index: 0; bottom: calc( -1 * var(--aa-intro-under) ); left: calc( -1 * var(--aa-intro-gutter) ); right: 23%; /* bottom bar spans ~three-quarters of the image, then stops */ height: var(--aa-intro-stub-bot); border-bottom: var(--aa-intro-bar) solid var(--aa-intro-brick); border-left: var(--aa-intro-bar) solid var(--aa-intro-brick); } /* Timeline variant (AAbooks): the title sits lower, the frame's corner stubs are shorter, and BOTH bars run off the right edge of the screen. The copy under the image sits directly beneath the bottom bar, alongside the timeline. Scoped so the academy intro is unchanged. */ .aa-page-intro:has( .aa-page-intro__timeline ) { --aa-intro-stub-top: 26px; --aa-intro-stub-bot: 32px; } .aa-page-intro:has( .aa-page-intro__timeline ) .aa-page-intro__body { padding-top: clamp(3rem, 4.062vw, 8.667rem); } /* Text column spans the full height so the image + copy stack beside the timeline. */ .aa-page-intro:has( .aa-page-intro__timeline ) .aa-page-intro__inner { grid-template-areas: "body media" "body below" "body links"; align-items: start; } /* The bottom bar stops at 23% only to leave the quick links their line. With no links there is nothing to make room for, so it runs off the right edge like the top bar — as AAerevna and AAbooks both draw it (bar x868→1920 on the 1920 canvas). This covers the timeline intro too, which carries no links either. */ .aa-page-intro:not(:has( .aa-page-intro__links )) .aa-page-intro__media::before { right: -100vw; } /* Above the stacking breakpoint only — below it the frame is dropped and the single-column rules must win. */ @media (min-width: 881px) { /* --- The bottom bar, stopped short of the quick links ----------------------- The grid reserves a "below" row whether or not the block has copy for it, so with links but no below text the links fell a whole row short of the bar and the bar ended in mid-air beside them. Collapse the unused row, then draw the bar as the first cell of the links row. Its length is then the grid's answer rather than a percentage guess: the links track is sized to the links, so the bar ends one column gap before them whatever they say and however large they are set, instead of running on behind the words. --- */ .aa-page-intro__inner:not(:has( .aa-page-intro__below )) { grid-template-areas: "body media" "space links"; } /* The image is vertically centred in a row the text column makes taller, so the bar's distance from the image bottom is not fixed and it cannot be aligned to the links from there. Draw the bracket off the links row instead, centred on the first link, and let the media pseudo stand down. */ .aa-page-intro:not([data-media-side="left"]):has( .aa-page-intro__links ) .aa-page-intro__inner:not(:has( .aa-page-intro__below )) .aa-page-intro__media::before { content: none; } .aa-page-intro:not([data-media-side="left"]):has( .aa-page-intro__links ) .aa-page-intro__inner:not(:has( .aa-page-intro__below )) .aa-page-intro__links::before { content: ""; grid-row: 1; grid-column: 1; /* the spacer track — the links hold column 2 open */ justify-self: stretch; align-self: start; margin-left: calc( -1 * var(--aa-intro-gutter) ); /* reach back under the image's left edge */ /* Bottom edge lands on the first link's centre: half a line of it, less half the stroke, measured up from where the stub starts. */ margin-top: calc( ( var(--aa-intro-link-size) * var(--aa-intro-link-lh) / 2 ) - ( var(--aa-intro-bar) / 2 ) - var(--aa-intro-stub-bot) ); height: var(--aa-intro-stub-bot); border-bottom: var(--aa-intro-bar) solid var(--aa-intro-brick); border-left: var(--aa-intro-bar) solid var(--aa-intro-brick); } } /* --- Year timeline (Figma AAbooks "Ένας αιώνας γνώσης"): brick year + text, hairline-separated rows, sitting in the text column under the title. --- */ .aa-page-intro__timeline { list-style: none; margin: clamp(1rem, 1.094vw, 2.333rem) 0 0; /* Same inset off the frame line as the plain intro's body copy (/academy). */ padding: 0 clamp(1.5rem, 2.125vw, 4.533rem) 0 0; text-align: left; /* rows read left-to-right even though the column is right-aligned */ } .aa-page-intro__tl-item { display: flex; align-items: baseline; gap: clamp(1rem, 1.25vw, 2.667rem); padding-block: clamp(0.7rem, 0.688vw, 1.467rem); border-top: 1px solid var(--wp--preset--color--border); } .aa-page-intro__tl-item:first-child { border-top: 0; } .aa-page-intro__tl-year { flex: none; min-width: 4.5ch; color: var(--wp--preset--color--primary); font-size: clamp(1.2rem, 1.031vw, 2.2rem); font-weight: 900; /* PSD sets the dates in the black cut */ font-variant-numeric: tabular-nums; } .aa-page-intro__tl-text { color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1.05rem, 0.844vw, 1.8rem); line-height: 1.5; } /* --- Body copy under the image (used instead of / alongside the links) --- */ .aa-page-intro__below { grid-area: below; /* Clear the bottom bar (which hangs below the image) so the copy starts just beneath the border line, as in the PSD. */ margin-top: calc( var(--aa-intro-under) + var(--aa-intro-bar) + clamp(0.9rem, 1.094vw, 2.333rem) ); color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1.05rem, 0.844vw, 1.8rem); /* same size as the timeline text */ line-height: 1.5; } .aa-page-intro__below p { margin: 0 0 1em; } .aa-page-intro__below p:last-child { margin-bottom: 0; } /* --- Quick links: their own row, bottom-right, level with the bottom bar --- */ .aa-page-intro__links { grid-area: links; display: grid; /* Two tracks: the bottom bar draws itself into the first, the links sit in the second at their own width. Sizing the links track to the links is what stops the bar short of them — see the bar rule below — so the clearance holds at any wording and any type size. The spacer shrinks on narrow widths, down to nothing, so the links are never clipped. */ grid-template-columns: minmax(0, 81%) max-content; column-gap: clamp(0.75rem, 1.25vw, 2.667rem); /* the gap the bar stops in */ align-content: start; row-gap: clamp(0.55rem, 0.656vw, 1.4rem); text-align: left; } .aa-page-intro__link { grid-column: 2; justify-self: start; /* left-aligned from the bottom-bar end */ white-space: nowrap; /* Not a flex container: a flex item is blockified, which turns the caret's inline-block into block and hands it back the underline. See the caret block near the end of this file. The gap comes from the caret's margin. */ display: inline-block; color: var(--wp--preset--color--navy); font-size: var(--aa-intro-link-size); /* larger than the ~24px Figma links, per request */ font-weight: 500; line-height: var(--aa-intro-link-lh); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } /* Rendered as a span while its URL is empty — don't dress it as a link. */ span.aa-page-intro__link { text-decoration: none; opacity: 0.65; } .aa-page-intro__link:hover, .aa-page-intro__link:focus-visible { color: var(--aa-intro-brick); } .aa-page-intro__link-caret { font-weight: 500; } /* --- Mirror when the image is on the left --- */ .aa-page-intro[data-media-side="left"] .aa-page-intro__inner { grid-template-areas: "media body" "below space" "links space"; } .aa-page-intro[data-media-side="left"] .aa-page-intro__title { padding-right: 0; } .aa-page-intro[data-media-side="left"] .aa-page-intro__body { text-align: left; padding-right: 0; padding-left: clamp(2rem, 2.188vw, 4.667rem); /* frame is on the left now — inset from that side */ } .aa-page-intro[data-media-side="left"] .aa-page-intro__media::after { left: -100vw; right: calc( -1 * var(--aa-intro-gutter) ); border-left: 0; border-right: var(--aa-intro-bar) solid var(--aa-intro-brick); } .aa-page-intro[data-media-side="left"] .aa-page-intro__media::before { left: 23%; right: calc( -1 * var(--aa-intro-gutter) ); border-left: 0; border-right: var(--aa-intro-bar) solid var(--aa-intro-brick); } .aa-page-intro[data-media-side="left"] .aa-page-intro__links { align-items: flex-start; text-align: left; } /* --- Stack on small screens; drop the decorative frame (it needs the two columns) --- */ @media (max-width: 880px) { .aa-page-intro__inner, .aa-page-intro[data-media-side="left"] .aa-page-intro__inner { grid-template-columns: 1fr; grid-template-areas: "media" "body" "below" "links"; row-gap: clamp(1.25rem, 5vw, 2rem); } .aa-page-intro__body, .aa-page-intro[data-media-side="left"] .aa-page-intro__body { text-align: left; } .aa-page-intro__body, .aa-page-intro[data-media-side="left"] .aa-page-intro__body { padding: 0; } .aa-page-intro__media::before, .aa-page-intro__media::after { display: none; } .aa-page-intro__links { grid-template-columns: 1fr; /* no bar-end spacer once stacked — links sit at the left */ text-align: left; } .aa-page-intro__link { grid-column: 1; } } /* ========================================================================= Explore grid (Figma AAakadimia — "Εξερευνήστε την Ακαδημία") Navy section, gold heading + rule, a 3×2 grid of darker-navy cards. Each card: number + title, a gold icon straddling the top edge, description, underlined sub-links, and a gold action link. A gold accent line brackets the grid's left. ========================================================================= */ .aa-explore { --aa-exp-card: #061220; /* card fill — a touch darker than the section navy */ --aa-exp-gold: var(--wp--preset--color--secondary); --aa-exp-bar: 8px; /* accent stroke (thick, per PSD) */ /* Proportions read off the PSD (1920 canvas): cards start at 17.8% of the viewport, the left border at 14.4%, the section text at 4.6%. */ --aa-exp-indent: clamp(1.5rem, 12.5vw, 26.667rem); /* left margin: cards sit inset from the edge */ --aa-exp-foot: clamp(1rem, 3.125vw, 6.667rem); /* how far the left border sits off the cards */ --aa-exp-bottom: clamp(2.5rem, 5.625vw, 12rem); /* bottom border height up from the grid bottom */ --aa-exp-numcol: clamp(2.5rem, 2.125vw, 4.533rem); /* number gutter: text aligns with the title, not the number */ box-sizing: border-box; padding-block: clamp(3rem, 3.75vw, 8rem); background: var(--wp--preset--color--navy); overflow-x: clip; /* lets the top/bottom borders bleed to the right viewport edge */ } .aa-explore__inner { max-width: 2200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4.375vw, 9.333rem); box-sizing: border-box; } /* --- Heading + rule --- */ .aa-explore__head { display: flex; align-items: center; gap: clamp(1rem, 1.562vw, 3.333rem); margin-bottom: clamp(1.75rem, 1.875vw, 4rem); } .aa-explore__title { margin: 0; color: var(--aa-exp-gold); font-size: clamp(1.5rem, 1.406vw, 3rem); /* Figma ~36px */ font-weight: 700; line-height: 1.1; } .aa-explore__rule { flex: 1; height: var(--aa-exp-bar); /* same thickness as the accent borders */ background: var(--aa-exp-gold); margin-right: calc(50% - 50vw); /* bleed the top border to the right screen edge */ } /* --- Grid --- */ .aa-explore__grid { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--aa-exp-indent); /* left margin — cards sit inset from the edge */ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 2.031vw, 4.333rem) clamp(1.5rem, 1.719vw, 3.667rem); /* row-gap / column-gap — larger, per PSD */ } /* Left border: a thick vertical bar in the left margin — no top foot. */ .aa-explore__grid::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: var(--aa-exp-bottom); left: calc(var(--aa-exp-indent) - var(--aa-exp-foot)); width: var(--aa-exp-bar); background: var(--aa-exp-gold); pointer-events: none; } /* Bottom border: full-width gold line behind the cards (shows in the column gaps). */ .aa-explore__grid::after { content: ""; position: absolute; z-index: 0; left: calc(var(--aa-exp-indent) - var(--aa-exp-foot)); right: calc(50% - 50vw); /* bleed the bottom border to the right screen edge */ bottom: var(--aa-exp-bottom); height: var(--aa-exp-bar); background: var(--aa-exp-gold); pointer-events: none; } /* --- Card --- */ .aa-explore__card { position: relative; z-index: 1; /* sit in front of the bottom accent line */ display: flex; flex-direction: column; gap: clamp(0.85rem, 0.781vw, 1.667rem); padding: clamp(1rem, 0.938vw, 2rem); padding-top: clamp(1.5rem, 1.313vw, 2.8rem); background: var(--aa-exp-card); } .aa-explore__icon { position: absolute; top: 0; right: clamp(1.25rem, 1.094vw, 2.333rem); transform: translateY(-34%); /* straddle the card's top edge (PSD: ~1/3 above) */ width: clamp(38px, 2.5vw, 64px); height: auto; } .aa-explore__head-row { display: flex; align-items: baseline; gap: 0; margin: 0; padding-right: 3.5rem; /* keep the title clear of the icon */ } .aa-explore__num { flex: none; width: var(--aa-exp-numcol); /* fixed gutter so the title lines up with the text below */ color: var(--aa-exp-gold); font-size: clamp(1rem, 1vw, 2.133rem); font-weight: 600; letter-spacing: 0.05em; } .aa-explore__card-title { color: var(--wp--preset--color--base); font-size: clamp(1.5rem, 1.625vw, 3.467rem); /* PSD ~42px on a 1920 canvas */ font-weight: 700; line-height: 1.15; } .aa-explore__text { margin: 0; margin-left: var(--aa-exp-numcol); /* align with the title, past the number gutter */ color: color-mix( in srgb, #fff 72%, var(--wp--preset--color--navy) ); font-size: clamp(1rem, 0.656vw, 1.4rem); line-height: 1.5; } .aa-explore__links { list-style: none; margin: 0; margin-left: var(--aa-exp-numcol); /* align with the title */ padding: 0; /* Flow inline and wrap — short links pair up on a line, as in the PSD. The narrow box is deliberate: it folds the run of links over 2–3 lines instead of letting them stretch across the whole card. */ display: flex; flex-wrap: wrap; max-width: 58%; column-gap: clamp(1rem, 0.938vw, 2rem); row-gap: 0.3rem; } .aa-explore__link { color: var(--wp--preset--color--base); font-size: clamp(1rem, 0.688vw, 1.467rem); /* same size as the description, per PSD */ font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .aa-explore__link:hover, .aa-explore__link:focus-visible { color: var(--aa-exp-gold); } .aa-explore__action { margin-top: auto; /* pin to the bottom of the card */ margin-left: var(--aa-exp-numcol); /* align with the title */ /* Inline-block, not flex — see .aa-page-intro__link. This one underlines only on hover, so the caret picked up a stray rule under the pointer. */ display: inline-block; align-self: flex-start; color: var(--aa-exp-gold); font-size: clamp(1rem, 0.688vw, 1.467rem); /* same size as the description, per PSD */ font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; } .aa-explore__action:hover, .aa-explore__action:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* Gold figure pinned to the bottom of the card (AAbooks "280.000+ τόμοι"). */ .aa-explore__stat { margin: auto 0 0; /* pushes itself to the bottom of the card */ padding-top: clamp(0.75rem, 0.938vw, 2rem); color: var(--aa-exp-gold); font-size: clamp(1rem, 0.656vw, 1.4rem); letter-spacing: 0.02em; } /* When a card carries both a stat and an action link, only the stat should push. */ .aa-explore__stat + .aa-explore__action { margin-top: clamp(0.5rem, 0.563vw, 1.2rem); } /* --- "stacked" variant (AAbooks "Συλλογές Υλικού"): the label sits above the title instead of in a left gutter, and there are no icons. --- */ .aa-explore[data-variant="stacked"] .aa-explore__head-row { flex-direction: column; align-items: flex-start; gap: clamp(0.35rem, 0.437vw, 0.933rem); padding-right: 0; } .aa-explore[data-variant="stacked"] .aa-explore__num { width: auto; font-size: clamp(1rem, 0.781vw, 1.667rem); font-weight: 500; letter-spacing: 0.02em; } /* AAbooks sets a smaller card title and a noticeably larger description than the academy grid (measured off the PSD: title ×0.95, description ×1.35). */ .aa-explore[data-variant="stacked"] .aa-explore__card-title { font-size: clamp(1.4rem, 1.5vw, 3.2rem); } .aa-explore[data-variant="stacked"] .aa-explore__text { font-size: clamp(1.15rem, 0.906vw, 1.933rem); line-height: 1.45; } .aa-explore[data-variant="stacked"] .aa-explore__stat { font-size: clamp(1rem, 0.781vw, 1.667rem); } .aa-explore[data-variant="stacked"] .aa-explore__text, .aa-explore[data-variant="stacked"] .aa-explore__links, .aa-explore[data-variant="stacked"] .aa-explore__action, .aa-explore[data-variant="stacked"] .aa-explore__stat { margin-left: 0; /* no number gutter in this variant */ } /* --- Responsive: 2-up on tablets, 1-up on phones; drop the accent when stacked --- */ @media (max-width: 1024px) { .aa-explore { --aa-exp-indent: clamp(1.5rem, 8vw, 6rem); /* smaller left margin on tablet */ --aa-exp-foot: clamp(1.5rem, 3vw, 2.5rem); } .aa-explore__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .aa-explore { --aa-exp-indent: 0px; } .aa-explore__grid { grid-template-columns: 1fr; } .aa-explore__grid::before, .aa-explore__grid::after { display: none; } } /* ========================================================================= Feature cards (Figma AAakadimia — "Συνεργασίες & Διεθνή Δίκτυα") A full-bleed frieze band, then an eyebrow + brick heading and a 2×2 grid of navy cards. Each card has a brick top rule, a white line-art icon, a title, a description and an underlined link. Proportions read off the 1920 PSD: heading at 9.2% of the viewport, cards spanning 16.8%–82.3%. ========================================================================= */ .aa-netcards { box-sizing: border-box; background: var(--wp--preset--color--base); } .aa-netcards__band { display: block; width: 100%; height: auto; /* The frieze butts straight against the section above it, full-bleed. */ margin: 0; } .aa-netcards__inner { max-width: 1920px; margin-inline: auto; padding-inline: clamp(1.25rem, 6.875vw, 14.667rem); padding-block: clamp(2.5rem, 3.438vw, 7.333rem) clamp(3rem, 4.375vw, 9.333rem); box-sizing: border-box; } /* --- Heading --- */ .aa-netcards__head { margin-bottom: clamp(1.25rem, 1.406vw, 3rem); } .aa-netcards__eyebrow { margin: 0 0 clamp(0.5rem, 1.125vw, 2.4rem); color: color-mix( in srgb, var(--wp--preset--color--contrast) 62%, #fff ); font-size: clamp(0.85rem, 1.05vw, 2.24rem); letter-spacing: 0.14em; text-transform: uppercase; } .aa-netcards__title { margin: 0; color: var(--wp--preset--color--primary); /* Generous cap so the vw term stays in charge on wide viewports (~2300px CSS). */ font-size: clamp(1.5rem, 2.2vw, 4.693rem); /* PSD ~42px on a 1920 canvas */ font-weight: 900; /* black cut, as in the other PSD headings */ line-height: 1.1; } /* --- Grid: narrower than the heading, centred in the viewport --- */ .aa-netcards__grid { list-style: none; margin: 0 auto; padding: 0; width: 80%; /* lands the cards at ~16.8%–83.2% of the viewport, per PSD */ display: grid; grid-template-columns: repeat(var(--aa-net-cols, 2), 1fr); gap: clamp(0.85rem, 0.875vw, 1.867rem) clamp(0.75rem, 0.781vw, 1.667rem); } /* --- Card --- */ .aa-netcards__card { display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding: clamp(0.4rem, 0.55vw, 1.173rem) clamp(0.85rem, 1.05vw, 2.24rem) clamp(1.5rem, 2.344vw, 5rem); background: var(--wp--preset--color--navy); border-top: clamp(6px, 0.52vw, 13px) solid var(--wp--preset--color--primary); } /* Without an icon the title would sit too close to the brick rule — the icon normally supplies that breathing room (AAbooks "Εθνικές & Διεθνείς Βιβλιοθήκες"). */ .aa-netcards__card:not(:has( .aa-netcards__icon )) { padding-top: clamp(1.1rem, 1.77vw, 3.776rem); /* PSD: 34px on a 1920 canvas */ } .aa-netcards__icon { display: block; width: clamp(56px, 4.8vw, 123px); height: auto; margin-bottom: clamp(0.5rem, 0.9vw, 1.92rem); } .aa-netcards__card-title { margin: 0 0 0.15em; /* PSD sets the description almost directly beneath */ color: var(--wp--preset--color--base); font-size: clamp(1.05rem, 1.35vw, 2.88rem); font-weight: 700; line-height: 1.2; } .aa-netcards__text { margin: 0; color: color-mix( in srgb, #fff 82%, var(--wp--preset--color--navy) ); font-size: clamp(0.9rem, 1vw, 2.133rem); line-height: 1.45; } /* AAbooks sets this section's descriptions in the light italic cut, and gives the cards noticeably more air than the academy's: a wider title→text gap and a much deeper bottom padding (PSD: 32px and 68px on a 1920 canvas, card height 231px). */ .aa-netcards[data-variant="italic"] .aa-netcards__text { font-style: italic; font-weight: 300; } .aa-netcards[data-variant="italic"] .aa-netcards__card-title { margin-bottom: clamp(0.8rem, 1.67vw, 3.563rem); } .aa-netcards[data-variant="italic"] .aa-netcards__card { padding-bottom: clamp(1.5rem, 3.54vw, 7.552rem); } .aa-netcards[data-variant="italic"] .aa-netcards__grid { row-gap: clamp(0.6rem, 0.94vw, 2.005rem); /* PSD: 18px between the rows */ } .aa-netcards__link { margin-top: clamp(1.1rem, 2.031vw, 4.333rem); /* Inline-block, not flex — see .aa-page-intro__link. */ display: inline-block; color: var(--wp--preset--color--base); font-size: clamp(0.85rem, 0.9vw, 1.92rem); text-decoration: underline; text-underline-offset: 4px; } .aa-netcards__link:hover, .aa-netcards__link:focus-visible { color: var(--wp--preset--color--secondary); } /* --- Responsive --- */ @media (max-width: 900px) { .aa-netcards__grid { width: 100%; grid-template-columns: 1fr; } } /* ========================================================================= Catalog search / OPAC (Figma AAbooks — "Κατάλογος OPAC") Navy heading + right-bleeding rule on white, then a dark panel with the source tabs and search field on the left and gold figures on the right, then a full-bleed image band. The field submits to an external catalog — one endpoint per tab (see blocks/catalog-search/render.php). Proportions off the 1920 PSD: heading at 4.5%, panel inset ~7.9%, stats at 77.7%. ========================================================================= */ .aa-opac { --aa-opac-panel: #061220; /* same dark navy as the explore cards */ box-sizing: border-box; background: var(--wp--preset--color--base); overflow-x: clip; /* lets the heading rule bleed to the viewport edge */ } /* --- Heading band --- */ .aa-opac__head { display: flex; align-items: center; gap: clamp(1rem, 1.562vw, 3.333rem); padding: clamp(2.5rem, 3.125vw, 6.667rem) 0 clamp(1.5rem, 1.719vw, 3.667rem); padding-inline-start: clamp(1.25rem, 3.438vw, 7.333rem); } .aa-opac__heading { margin: 0; color: var(--wp--preset--color--navy); /* Caps are deliberately generous: the vw term must stay in charge on wide viewports (~2300px CSS), otherwise the PSD proportions collapse. */ font-size: clamp(1.4rem, 2.1vw, 4.48rem); font-weight: 900; /* black cut — the PSD headings are heavier than bold */ line-height: 1.1; white-space: nowrap; } .aa-opac__rule { flex: 1; height: clamp(4px, 0.52vw, 13px); /* PSD: 10px on a 1920 canvas */ background: var(--wp--preset--color--navy); margin-right: calc(50% - 50vw); /* bleeds to the right screen edge */ } /* --- Dark panel --- */ .aa-opac__panel { background: var(--aa-opac-panel); padding-block: clamp(2rem, 3.75vw, 8rem); padding-inline: clamp(1.25rem, 8vw, 17.067rem); /* PSD: content starts at 8% of the viewport */ } .aa-opac__inner { max-width: 2400px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.75rem, 3.125vw, 6.667rem); } .aa-opac__form { flex: 1 1 34rem; /* PSD: the search row ends at ~66% of the viewport, well short of the figures. */ max-width: 69%; min-width: 0; } .aa-opac__label { margin: 0 0 clamp(0.75rem, 1.25vw, 2.667rem); color: var(--wp--preset--color--secondary); font-style: italic; font-size: clamp(1rem, 1.7vw, 3.627rem); /* PSD sets this nearly as large as the title */ } .aa-opac__title { margin: 0 0 clamp(1rem, 1.562vw, 3.333rem); color: var(--wp--preset--color--base); font-size: clamp(1.25rem, 1.5vw, 3.2rem); font-weight: 700; line-height: 1.25; max-width: 27ch; /* holds the heading to two lines, as in the PSD */ } /* --- Source tabs (OPAC / digital library / …) --- Measured off search_section.png, expressed against the title's 1.5vw so the proportions hold at any width: labels at 0.68 of the title's cap height, 31/605 of the title's run as inner padding, and no gap — the tab boxes sit flush, which is what puts 62px of air between two labels. The tab row starts at the content's left edge, so the first label reads as indented. */ .aa-opac__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: clamp(0.9rem, 1.22vw, 2.603rem); border-bottom: 1px solid color-mix( in srgb, #fff 15%, transparent ); } .aa-opac__tab { position: relative; padding: 0 clamp(0.8rem, 1.5vw, 3.2rem) clamp(0.45rem, 0.56vw, 1.195rem); background: none; border: 0; /* 5.3:1 on the panel — the muted state still clears AA. */ color: color-mix( in srgb, #fff 50%, var(--aa-opac-panel) ); font-family: inherit; font-size: clamp(0.9rem, 1.02vw, 2.176rem); line-height: 1.3; cursor: pointer; } .aa-opac__tab:hover { color: var(--wp--preset--color--secondary); } .aa-opac__tab:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } /* Gold alone marks the active tab — stem widths in the draft are identical either side (3.57 vs 3.53 px), so it is not set in a heavier cut. */ .aa-opac__tab.is-active { color: var(--wp--preset--color--secondary); } /* The hook under the active tab: a short bottom bracket that curls up at both ends and rests on the row's rule without covering it. */ .aa-opac__tab.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: clamp(7px, 0.49vw, 13px); border: 2px solid var(--wp--preset--color--secondary); border-top: 0; border-radius: 0 0 clamp(7px, 0.49vw, 13px) clamp(7px, 0.49vw, 13px); } /* --- Search field + button --- */ .aa-opac__search { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 0.625vw, 1.333rem); margin-bottom: clamp(1rem, 1.188vw, 2.533rem); } .aa-opac__input { flex: 1 1 24rem; min-width: 0; box-sizing: border-box; padding: clamp(0.7rem, 0.625vw, 1.333rem) clamp(0.9rem, 0.75vw, 1.6rem); background: transparent; color: var(--wp--preset--color--base); border: 1px solid color-mix( in srgb, #fff 45%, transparent ); border-radius: 0; font-family: inherit; font-size: clamp(0.95rem, 1.094vw, 2.333rem); appearance: none; box-shadow: none; /* the field is required — don't inherit the UA's invalid glow */ } /* Hidden endpoint parameters. display:none still submits them; only `disabled` would drop them from the form data. */ .aa-opac__params { display: none; } .aa-opac__input::placeholder { /* 4.6:1 on the panel — placeholder text still clears WCAG AA. */ color: color-mix( in srgb, #fff 68%, var(--aa-opac-panel) ); opacity: 1; } .aa-opac__input:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; } .aa-opac__button { flex: none; padding: clamp(0.7rem, 0.625vw, 1.333rem) clamp(1.5rem, 1.5vw, 3.2rem); background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--navy); /* 8.6:1 on gold */ border: 0; border-radius: 0; font-size: clamp(0.95rem, 1.094vw, 2.333rem); font-weight: 600; cursor: pointer; } .aa-opac__button:hover, .aa-opac__button:focus-visible { background: color-mix( in srgb, var(--wp--preset--color--secondary) 82%, #fff ); } /* The hover background shift above is only 1.11:1, so on its own it is not a focus indicator. Navy on this gold is 9.12:1. */ .aa-opac__button:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: -4px; } /* --- Helper line under the field --- */ .aa-opac__hint { margin: 0; /* 8.9:1 on the panel — comfortably past AA for this small a size. */ color: color-mix( in srgb, #fff 78%, var(--aa-opac-panel) ); font-size: clamp(0.8rem, 0.906vw, 1.933rem); line-height: 1.4; } .aa-opac__hint[hidden] { display: none; } /* --- Gold figures --- */ .aa-opac__stats { flex: 0 1 auto; display: flex; flex-direction: column; gap: clamp(1rem, 1.25vw, 2.667rem); } .aa-opac__stat { display: flex; flex-direction: column; gap: 0.15rem; } .aa-opac__stat-value { color: var(--wp--preset--color--secondary); font-size: clamp(2rem, 2.812vw, 6rem); font-weight: 900; /* the black cut, as in the hero counters */ line-height: 1; } .aa-opac__stat-label { color: var(--wp--preset--color--base); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.25vw, 2.667rem); } /* --- Image band --- */ .aa-opac__band { display: block; width: 100%; height: auto; margin: 0; } @media (max-width: 860px) { .aa-opac__stats { flex-direction: row; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 3rem); } .aa-opac__heading { white-space: normal; } } /* ========================================================================= Access list (Figma AAbooks — "Πρόσβαση χωρίς όρια, από παντού") Navy heading + right-bleeding rule, an intro paragraph, rows of navy icon tiles with a bold title and description, then a right-aligned link. Proportions off the 1920 PSD: heading at 4.5%, intro at 6%, rows at 8.75%, link ending at 92%. Caps are generous so the vw terms stay in charge on wide viewports (~2300px CSS) instead of pinning to a max. ========================================================================= */ .aa-access { box-sizing: border-box; background: var(--wp--preset--color--base); overflow-x: clip; /* lets the heading rule bleed to the viewport edge */ } .aa-access__inner { max-width: 2400px; margin-inline: auto; padding-inline: clamp(1.25rem, 4.5vw, 9.6rem); padding-block: clamp(2.5rem, 5vw, 10.667rem) clamp(3rem, 5.625vw, 12rem); box-sizing: border-box; } /* --- Heading --- */ .aa-access__head { display: flex; align-items: center; gap: clamp(1rem, 1.875vw, 4rem); margin-bottom: clamp(1.25rem, 1.875vw, 4rem); } .aa-access__heading { margin: 0; color: var(--wp--preset--color--navy); font-size: clamp(1.4rem, 1.75vw, 3.733rem); font-weight: 900; /* black cut — the PSD headings are heavier than bold */ line-height: 1.15; } .aa-access__rule { flex: 1; height: clamp(4px, 0.52vw, 13px); /* PSD: 10px on a 1920 canvas */ background: var(--wp--preset--color--navy); margin-right: calc(50% - 50vw); /* bleeds to the right screen edge */ } /* --- Intro copy (indented slightly past the heading, per PSD) --- */ .aa-access__text { margin: 0 0 clamp(2rem, 3.125vw, 6.667rem); margin-inline-start: clamp(0.5rem, 1.5vw, 3.2rem); max-width: 52ch; color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1rem, 1.15vw, 2.453rem); line-height: 1.5; } .aa-access__text p { margin: 0 0 0.6em; } .aa-access__text p:last-child { margin-bottom: 0; } /* --- Rows --- */ .aa-access__list { list-style: none; margin: 0; margin-inline-start: clamp(0.75rem, 4.25vw, 9.067rem); padding: 0; display: flex; flex-direction: column; gap: clamp(1.25rem, 2.031vw, 4.333rem); } .aa-access__item { display: flex; align-items: flex-start; gap: clamp(1rem, 1.719vw, 3.667rem); } .aa-access__icon { flex: none; display: block; width: clamp(44px, 3.28vw, 84px); height: auto; } .aa-access__body { min-width: 0; } .aa-access__item-title { margin: 0; color: var(--wp--preset--color--navy); font-size: clamp(1rem, 1.2vw, 2.56rem); font-weight: 900; line-height: 1.3; } .aa-access__item-text { margin: 0; color: color-mix( in srgb, var(--wp--preset--color--contrast) 88%, #fff ); font-size: clamp(1rem, 1.15vw, 2.453rem); font-weight: 500; line-height: 1.35; } /* --- Right-aligned link --- */ .aa-access__cta { margin: clamp(1.75rem, 2.812vw, 6rem) 0 0; margin-inline-end: clamp(0.5rem, 3.4vw, 7.253rem); text-align: right; } .aa-access__link { display: inline-flex; align-items: baseline; gap: 0.45rem; color: var(--wp--preset--color--navy); font-size: clamp(1rem, 1.15vw, 2.453rem); text-decoration: none; } .aa-access__link:hover, .aa-access__link:focus-visible { color: var(--wp--preset--color--primary); } .aa-access__link-caret { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 780px) { .aa-access__list, .aa-access__text { margin-inline-start: 0; } .aa-access__cta { margin-inline-end: 0; text-align: left; } } /* ========================================================================= Footer (Figma 7:237 desktop / 17:702 mobile) Navy section over a darkened bookshelf/Athena background, white text, site map + follow/contact columns, brand logo bottom-left, legal bar. ========================================================================= */ .aa-footer { position: relative; padding: 0 clamp(16px, 2.5vw, 64px); /* Per Figma: navy tint (multiply) over the photo (normal). The multiply blend darkens the image while preserving its tonal detail, and keeps white text at WCAG 2.1 AA contrast even over the bright marble (~6.8:1). */ background-color: var(--wp--preset--color--navy); background-image: linear-gradient(0deg, rgba(33, 39, 50, 0.74) 0%, rgba(33, 39, 50, 0.74) 100%), url('assets/images/footer-bg.png'); background-blend-mode: multiply, normal; background-size: cover; background-position: center top; background-repeat: no-repeat; color: #fff; overflow: clip; } .aa-footer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 1600px; min-height: 600px; margin-inline: auto; padding-top: 64px; padding-bottom: 50px; } /* All footer text: white, Noto Sans, +0.06em tracking per the design. The legal nav is a core Navigation block whose links are forced to `color: inherit` by a high-specificity core rule, so we colour the nav container (.aa-footer__legal-nav) and the links inherit white from it — this overrides theme.json's dark `contrast` navigation colour. */ .aa-footer, .aa-footer a, .aa-footer .aa-footer__title, .aa-footer .aa-footer__legal-nav { color: #fff; letter-spacing: 0.06em; } .aa-footer a { text-decoration: none; } .aa-footer a:hover, .aa-footer a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } .aa-footer a:focus-visible, .aa-footer .aa-footer__totop:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } /* --- Top: intro (left) + nav block (right) --- */ .aa-footer__top { gap: clamp(2rem, 3.75vw, 8rem); justify-content: space-between; margin-bottom: 0; } .aa-footer__intro { flex: 0 1 auto; max-width: 696px; } .aa-footer__intro p { margin: 0 0 24px; font-size: 1.5rem; line-height: 1.4; } .aa-footer__intro p:last-child { margin-bottom: 0; } .aa-footer__nav { flex: 0 1 auto; max-width: 715px; display: flex; flex-direction: column; gap: 40px; } .aa-footer__title { margin: 0; font-size: 1.875rem; font-weight: 400; line-height: 1.2; color: #fff; } .aa-footer__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .aa-footer__list li { margin: 0; } .aa-footer__list a { font-size: 1.5rem; line-height: 1.2; } .aa-footer__rule { width: 100%; max-width: none; /* override core separator's 100px cap */ margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); background: none; } .aa-footer__cols { gap: clamp(1.5rem, 2.5vw, 5.333rem); margin-bottom: 0; } /* Follow column hugs its content; the contact column takes the rest so the e-mail address stays on one line at the design's font size. */ .aa-footer__cols > .wp-block-column:first-child { flex: 0 0 auto; } .aa-footer__cols > .wp-block-column:last-child { flex: 1 1 auto; } .aa-footer__contact a { overflow-wrap: anywhere; } .aa-footer__contact { margin: 24px 0 0; font-size: 1.5rem; line-height: 1.7; } /* --- Brand logo (bottom-left, pushed down so the photo shows through) --- */ /* A gallery whose captions belong under the pictures ---------------------- Core lays a gallery caption across the bottom of its image, over a dark gradient. On the map collection that is the worst place for it: what it covers is the map's OWN printed title, so the two read as one caption printed twice. Scoped to the class the restore tool writes, so galleries an editor builds by hand keep core's behaviour. --- */ .aa-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { align-self: flex-start; } .aa-gallery.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: static; max-height: none; padding: 0.65rem 0 0; background: none; color: #4d5866; font-size: 1.1rem; font-weight: 400; font-style: normal; line-height: 1.45; text-align: left; overflow: visible; } .aa-footer__brand { margin: auto 0 0; max-width: 286px; } .aa-footer__brand img { display: block; width: 286px; max-width: 100%; height: auto; } /* --- Bottom legal bar --- */ .aa-footer__bottom { display: flex; flex-direction: column; gap: 30px; margin-top: 30px; } .aa-footer__legal { gap: 16px; } .aa-footer__legal-nav .wp-block-navigation__container { gap: 16px; } .aa-footer__legal-nav .wp-block-navigation-item__content { font-size: 0.875rem; } .aa-footer__totop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; color: #fff; border-radius: 2px; } .aa-footer__totop svg { display: block; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* --- Mobile (single column, centered logo) --- */ @media (max-width: 781px) { .aa-footer__inner { min-height: 0; padding-top: 32px; } .aa-footer__top { gap: 40px; } .aa-footer__intro { max-width: none; } .aa-footer__intro p { font-size: 1.125rem; } .aa-footer__nav { max-width: none; gap: 24px; } .aa-footer__title { font-size: 1.25rem; } .aa-footer__list { margin-top: 16px; gap: 12px; } .aa-footer__list a, .aa-footer__contact { font-size: 1rem; } .aa-footer__cols { gap: 24px; } .aa-footer__brand { margin-top: 40px; margin-inline: auto; } } /* ========================================================================= Research fields (Figma AAerevna — "Τομείς Έρευνας") Navy heading + right-bleeding rule, an intro, a full-bleed navy band holding one gold icon + class label per column, three columns of linked centres, then a full-bleed navy strip of numbered notes. Proportions off the 1920 PSD: heading at x84 (4.4%), rule y2012-2022 (11px) running to the edge, intro at x112 (5.8%), band y2141-2259 (118px), column labels at x152/736/1352, notes strip y2710-2930 (221px). Caps are generous so the vw terms stay in charge on wide viewports (~2300px CSS). ========================================================================= */ .aa-fields { --aa-fields-navy: #061220; --aa-fields-icon: clamp(2.6rem, 5.312vw, 11.333rem); /* icon gutter box — PSD max artwork 103px */ --aa-fields-icon-gap: clamp(0.5rem, 0.938vw, 2rem); box-sizing: border-box; background: var(--wp--preset--color--base); overflow-x: clip; /* lets the heading rule bleed to the viewport edge */ } /* --- Heading + intro --- */ .aa-fields__head { display: flex; align-items: center; gap: clamp(1rem, 1.625vw, 3.467rem); padding: clamp(2.5rem, 3.125vw, 6.667rem) 0 0; padding-inline-start: clamp(1.25rem, 3.438vw, 7.333rem); } .aa-fields__heading { margin: 0; color: var(--wp--preset--color--navy); font-size: clamp(1.4rem, 2.05vw, 4.373rem); font-weight: 900; /* black cut, like the other section headings */ line-height: 1.1; white-space: nowrap; } .aa-fields__rule { flex: 1; height: clamp(4px, 0.57vw, 15px); /* PSD: 11px on a 1920 canvas */ background: var(--wp--preset--color--navy); margin-right: calc(50% - 50vw); /* bleeds to the right screen edge */ } .aa-fields__intro { margin: clamp(1rem, 1.5vw, 3.2rem) 0 clamp(1.5rem, 2.188vw, 4.667rem); padding-inline: clamp(1.25rem, 4.5vw, 9.6rem) clamp(1.25rem, 4.688vw, 10rem); color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1rem, 1.15vw, 2.453rem); line-height: 1.5; } .aa-fields__intro p { margin: 0 0 0.35em; } .aa-fields__intro p:last-child { margin-bottom: 0; } /* --- Shared grid: the band cells sit directly above their own list --- */ .aa-fields__grid { display: grid; grid-template-columns: repeat(var(--aa-fields-cols, 3), minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 5.333rem); box-sizing: border-box; /* PSD: column text starts at x152 (7.9%) and the widest list ends at x1751. */ padding-inline: clamp(1.25rem, 6.188vw, 13.2rem) clamp(1.25rem, 4.313vw, 9.2rem); } /* --- Navy band: icon hangs in the gutter, label lands on the column line --- */ .aa-fields__band { background: var(--aa-fields-navy); padding-block: clamp(0.75rem, 1.5vw, 3.2rem); } .aa-fields__band-cell { display: flex; align-items: center; gap: var(--aa-fields-icon-gap); /* The whole marker — icon first, then the class name — starts on its column's line, so each Τάξη reads as the heading of the list beneath it. The PSD hung the icons out in the gutter, which left the marker looking a column adrift and pushed the first icon into the edge of a narrow screen. */ min-width: 0; } .aa-fields__icon { flex: none; width: var(--aa-fields-icon); height: clamp(2.8rem, 5.625vw, 12rem); /* PSD: 111px band-height crop */ object-fit: contain; object-position: right center; /* variable artwork widths still end on one line */ } .aa-fields__class { color: var(--wp--preset--color--base); font-size: clamp(1rem, 1.25vw, 2.667rem); font-weight: 700; line-height: 1.2; } /* --- Centre lists --- */ .aa-fields__lists { padding-block: clamp(1.5rem, 2.125vw, 4.533rem) clamp(2rem, 3.125vw, 6.667rem); } .aa-fields__col { min-width: 0; } .aa-fields__col-title { margin: 0 0 clamp(1rem, 1.5vw, 3.2rem); color: var(--wp--preset--color--navy); font-size: clamp(1rem, 1.15vw, 2.453rem); font-weight: 700; line-height: 1.25; } .aa-fields__list { list-style: none; margin: 0; padding: 0; } .aa-fields__item { position: relative; padding-inline-start: clamp(0.7rem, 0.938vw, 2rem); margin-bottom: clamp(0.55rem, 0.8vw, 1.707rem); font-size: clamp(0.85rem, 0.875vw, 1.867rem); line-height: 1.45; } /* Gold bullet, sized off the text so it tracks the type. */ .aa-fields__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--wp--preset--color--secondary); } .aa-fields__link { color: color-mix( in srgb, var(--wp--preset--color--contrast) 88%, #fff ); } /* Underline only what is actually a link. Some entries have no page of their own and render as plain text; underlining those promised a destination. */ a.aa-fields__link { text-decoration-line: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: color-mix( in srgb, var(--wp--preset--color--contrast) 35%, #fff ); } a.aa-fields__link:hover, a.aa-fields__link:focus-visible { color: var(--wp--preset--color--primary); text-decoration-color: currentColor; } .aa-fields__more { display: inline-block; margin-top: clamp(1rem, 1.562vw, 3.333rem); color: var(--wp--preset--color--navy); font-size: clamp(0.95rem, 1.05vw, 2.24rem); text-decoration-line: underline; text-underline-offset: 0.3em; } .aa-fields__more:hover, .aa-fields__more:focus-visible { color: var(--wp--preset--color--primary); } .aa-fields__caret { margin-inline-start: 0.35em; } /* ========================================================================= Link Boxes (akadimia/link-boxes) The numbered navy strip that used to close the research-fields block, lifted out so any section can carry a row of destinations. Numbered by position, and the whole box is a link: the anchor wraps the title and is stretched across the box with ::after, which keeps one focus stop per box and keeps the accessible name the title rather than title plus description. Contrast on the #061220 band: gold number 10.4:1, white title 18.8:1, description 14.6:1 — all past WCAG 2.1 AA. ========================================================================= */ .aa-linkboxes { --aa-linkboxes-navy: #061220; --aa-linkboxes-num: clamp(0.85rem, 0.938vw, 2rem); --aa-linkboxes-gap: clamp(0.6rem, 1.062vw, 2.267rem); background: var(--aa-linkboxes-navy); padding-block: clamp(2rem, 2.875vw, 6.133rem); } .aa-linkboxes__heading { margin: 0 0 clamp(1.25rem, 1.875vw, 4rem); box-sizing: border-box; padding-inline: clamp(1.25rem, 5.375vw, 11.467rem) clamp(1.25rem, 3.125vw, 6.667rem); color: var(--wp--preset--color--secondary); font-size: clamp(1.35rem, 1.875vw, 4rem); font-weight: 400; line-height: 1.15; } .aa-linkboxes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: clamp(1.5rem, 2.5vw, 5.333rem); row-gap: clamp(1.75rem, 1.875vw, 4rem); box-sizing: border-box; padding-inline: clamp(1.25rem, 5.375vw, 11.467rem) clamp(1.25rem, 3.125vw, 6.667rem); } .aa-linkboxes__box { position: relative; /* anchor for the stretched link */ } .aa-linkboxes__head { display: flex; align-items: baseline; gap: var(--aa-linkboxes-gap); /* PSD: number at x132, title at x175 */ margin: 0 0 clamp(0.7rem, 1.25vw, 2.667rem); } .aa-linkboxes__num { flex: none; color: var(--wp--preset--color--secondary); font-size: var(--aa-linkboxes-num); font-weight: 700; font-variant-numeric: tabular-nums; } .aa-linkboxes__title { color: var(--wp--preset--color--base); font-size: clamp(1.1rem, 1.375vw, 2.933rem); font-weight: 700; line-height: 1.2; } .aa-linkboxes__text { /* Indented to the title, per the PSD. */ margin: 0; padding-inline-start: calc( var(--aa-linkboxes-num) * 1.6 + var(--aa-linkboxes-gap) ); color: color-mix( in srgb, #fff 88%, var(--aa-linkboxes-navy) ); font-size: clamp(0.9rem, 1vw, 2.133rem); line-height: 1.5; } .aa-linkboxes__link { color: inherit; text-decoration: none; } /* Stretch the link over the whole box so the box is clickable. */ .aa-linkboxes__link::after { content: ""; position: absolute; inset: 0; } .aa-linkboxes__link:hover, .aa-linkboxes__link:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; text-underline-offset: 0.18em; } /* The focus ring belongs on the box, since that is the hit area. */ .aa-linkboxes__box:has( .aa-linkboxes__link:focus-visible ) { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: clamp(0.5rem, 0.75vw, 1.25rem); } .aa-linkboxes__link:focus-visible { outline: none; /* moved to the box above */ } @supports not selector(:has(*)) { .aa-linkboxes__link:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } } .aa-linkboxes__box.is-linked:hover .aa-linkboxes__title { color: var(--wp--preset--color--secondary); } @media (prefers-reduced-motion: no-preference) { .aa-linkboxes__title, .aa-linkboxes__link { transition: color 150ms ease; } } @media (max-width: 860px) { .aa-fields__heading { white-space: normal; } .aa-fields__grid { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 5vw, 2.5rem); } .aa-fields__band .aa-fields__grid { row-gap: clamp(0.5rem, 2vw, 1rem); } } /* ========================================================================= Publications (Figma AAerevna — "Δημοσιεύματα") A lighter navy panel: gold heading + right-bleeding rule, a category list down the left, and a grid of darker cards crossed by a gold corner bracket — the vertical bar sits left of the cards, the horizontal rule runs BEHIND them and off the right edge. A highlight bar closes the panel, then a full-bleed band. Proportions off the 1920 PSD: panel y3013-4186, heading x46, rule y3152-3161 (10px) from x380 to the edge, categories at x80, cards x342-1844 in 3 columns (39px gaps, 340px rows, 60px row gap), bracket at x272 rising 87px above the grid and turning right 16% up from its bottom, bar y4027-4142. ========================================================================= */ .aa-pubs { --aa-pubs-panel: #0e2036; /* PSD (14,32,54) */ --aa-pubs-card: #061220; /* PSD (6,18,32) — same navy as the other cards */ --aa-pubs-bar-bg: #0b1423; /* PSD (11,20,35) */ --aa-pubs-stroke: clamp(4px, 0.52vw, 13px); /* PSD: 10px */ --aa-pubs-gutter: clamp(1rem, 3.438vw, 7.333rem); /* nav column → cards */ --aa-pubs-turn: clamp(2rem, 5.938vw, 12.667rem); /* height of the turn above the grid's bottom (PSD: 118px) */ box-sizing: border-box; background: var(--wp--preset--color--base); overflow-x: clip; /* lets the rule and bracket bleed to the viewport edge */ } .aa-pubs__panel { background: var(--aa-pubs-panel); padding-block: clamp(2.5rem, 4.062vw, 8.667rem) clamp(1.5rem, 1.875vw, 4rem); } /* --- Heading --- */ .aa-pubs__head { display: flex; align-items: center; gap: clamp(1rem, 2.188vw, 4.667rem); padding-inline-start: clamp(1.25rem, 1.875vw, 4rem); } .aa-pubs__heading { margin: 0; color: var(--wp--preset--color--secondary); font-size: clamp(1.4rem, 2.05vw, 4.373rem); font-weight: 900; line-height: 1.1; white-space: nowrap; } .aa-pubs__rule { flex: 1; height: var(--aa-pubs-stroke); background: var(--wp--preset--color--secondary); margin-right: calc(50% - 50vw); } /* --- Body: category column + card grid --- */ .aa-pubs__body { display: grid; /* PSD: categories at x80, bracket at x272, cards from x342 to x1844. */ grid-template-columns: minmax(0, 10vw) minmax(0, 1fr); column-gap: var(--aa-pubs-gutter); box-sizing: border-box; padding-inline: clamp(1.25rem, 3.25vw, 6.933rem) clamp(1.25rem, 3.125vw, 6.667rem); padding-top: clamp(0.75rem, 1.25vw, 2.667rem); } .aa-pubs__cats { list-style: none; margin: 0; padding: 0; display: grid; row-gap: clamp(0.5rem, 0.875vw, 1.867rem); } .aa-pubs__cat { display: inline-block; /* 8.6:1 on the panel. */ color: color-mix( in srgb, #fff 86%, var(--aa-pubs-panel) ); font-size: clamp(0.95rem, 1.26vw, 2.688rem); line-height: 1.3; white-space: nowrap; } .aa-pubs__cat.is-active { color: var(--wp--preset--color--base); text-decoration-line: underline; text-underline-offset: 0.3em; } a.aa-pubs__cat:hover, a.aa-pubs__cat:focus-visible { color: var(--wp--preset--color--secondary); } /* --- Cards + the gold bracket behind them --- */ .aa-pubs__cards { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--aa-pubs-cols, 3), minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 5.333rem) clamp(0.75rem, 1.625vw, 3.467rem); } /* The bracket is drawn in two pieces so the upright can start below the category list however long that list grows. Horizontal arm: sits under the cards (z-index 0 vs 1), so it shows only in the gaps between them and then runs off the right edge — as in the PSD. */ .aa-pubs__cards::before { content: ""; position: absolute; z-index: 0; left: calc( -1 * var(--aa-pubs-gutter) ); right: -100vw; bottom: var(--aa-pubs-turn); height: 0; border-bottom: var(--aa-pubs-stroke) solid var(--wp--preset--color--secondary); pointer-events: none; } /* Upright: the last child of the nav column. The column stretches to the grid's full height, so `flex: 1` makes the upright fill whatever is left BELOW the list — add categories and it simply starts lower. Its bottom margin matches the arm's offset, so the two always meet. */ .aa-pubs__nav { display: flex; flex-direction: column; } .aa-pubs__nav::after { content: ""; flex: 1 1 auto; align-self: end; width: var(--aa-pubs-stroke); min-height: clamp(1.5rem, 3.125vw, 6.667rem); /* a long list must not erase it */ margin-top: clamp(0.75rem, 2.062vw, 4.4rem); /* PSD: 41px clear of the last label */ margin-bottom: var(--aa-pubs-turn); /* The column edge is where the upright's INNER face belongs. */ margin-inline-end: calc( -1 * var(--aa-pubs-stroke) ); background: var(--wp--preset--color--secondary); } /* With no category list there is nothing to hang the upright from, so the arm carries it and the bracket rises above the grid as a single piece. */ .aa-pubs__body:not(:has( .aa-pubs__nav )) { grid-template-columns: minmax(0, 1fr); } .aa-pubs__body:not(:has( .aa-pubs__nav )) .aa-pubs__cards::before { top: calc( -1 * clamp(1rem, 3.563vw, 7.6rem) ); height: auto; border-left: var(--aa-pubs-stroke) solid var(--wp--preset--color--secondary); } .aa-pubs__card { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--aa-pubs-card); padding: clamp(1.1rem, 1.5vw, 3.2rem) clamp(1.1rem, 1.562vw, 3.333rem) clamp(1.1rem, 1.438vw, 3.067rem); } .aa-pubs__card-title { margin: 0 0 clamp(0.9rem, 1.438vw, 3.067rem); color: var(--wp--preset--color--base); font-size: clamp(1.1rem, 1.55vw, 3.307rem); font-weight: 700; line-height: 1.25; } .aa-pubs__card-text { margin: 0 0 clamp(1rem, 1.625vw, 3.467rem); /* 11.7:1 on the card. */ color: color-mix( in srgb, #fff 88%, var(--aa-pubs-card) ); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.55; } .aa-pubs__card-link { margin-top: auto; /* links line up across a row whatever the copy length */ align-self: start; color: var(--wp--preset--color--secondary); font-size: clamp(0.8rem, 1.02vw, 2.176rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .aa-pubs__card-link:hover, .aa-pubs__card-link:focus-visible { text-decoration-line: underline; text-underline-offset: 0.3em; } .aa-pubs__caret { margin-inline-start: 0.4em; } /* --- Closing highlight bar --- */ .aa-pubs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1rem, 1.562vw, 3.333rem); background: var(--aa-pubs-bar-bg); margin-block: clamp(1.5rem, 2.313vw, 4.933rem) 0; /* Aligned to the card grid, not the panel: PSD x342-1844. */ margin-inline: clamp(1.25rem, 13.875vw, 29.6rem) clamp(1.25rem, 3.125vw, 6.667rem); padding: clamp(1rem, 1.5vw, 3.2rem) clamp(1.1rem, 1.562vw, 3.333rem); } .aa-pubs__bar-copy { min-width: 0; } .aa-pubs__bar-title { margin: 0 0 0.35em; color: var(--wp--preset--color--base); font-size: clamp(1.1rem, 1.55vw, 3.307rem); font-weight: 700; line-height: 1.3; } .aa-pubs__bar-text { margin: 0; color: color-mix( in srgb, #fff 86%, var(--aa-pubs-bar-bg) ); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.45; } .aa-pubs__bar-link { flex: none; color: var(--wp--preset--color--secondary); font-size: clamp(1rem, 1.46vw, 3.115rem); font-weight: 600; } .aa-pubs__bar-link:hover, .aa-pubs__bar-link:focus-visible { text-decoration-line: underline; text-underline-offset: 0.3em; } /* --- Image band --- */ .aa-pubs__band { display: block; width: 100%; height: auto; margin: 0; } @media (max-width: 1024px) { .aa-pubs__body { grid-template-columns: 1fr; row-gap: clamp(1.25rem, 4vw, 2rem); } .aa-pubs__cats { grid-auto-flow: column; grid-auto-columns: max-content; column-gap: clamp(1rem, 3vw, 2rem); overflow-x: auto; } /* Stacked, there is no gutter for the bracket to live in. */ .aa-pubs__cards::before, .aa-pubs__nav::after { display: none; } .aa-pubs__bar { margin-inline: 0; } } @media (max-width: 780px) { .aa-pubs__heading { white-space: normal; } .aa-pubs__cards { grid-template-columns: 1fr; } } /* ========================================================================= Scholarships (Figma AAerevna — "Υποτροφίες") A brick heading over two navy cards, each capped by a brick rule, then a plain contact block on white. Proportions off the 1920 PSD: heading x179 (9.3%) y4865-4885, brick rules y4925-4934 (10px), cards x323-942 and x962-1581 (620 wide, 20px apart, fill to y5400), card inset 20px with 38px above the eyebrow, contact block from x344. ========================================================================= */ .aa-schol { --aa-schol-card: #0d2035; --aa-schol-pad: clamp(0.75rem, 1.04vw, 2.219rem); /* PSD: 20px inset */ box-sizing: border-box; background: var(--wp--preset--color--base); padding-block: clamp(2.5rem, 4.813vw, 10.267rem) clamp(3rem, 4.688vw, 10rem); } .aa-schol__heading { margin: 0 0 clamp(1rem, 1.5vw, 3.2rem); padding-inline-start: clamp(1.25rem, 7.25vw, 15.467rem); color: var(--wp--preset--color--primary); font-size: clamp(1.4rem, 2.05vw, 4.373rem); font-weight: 900; line-height: 1.1; } /* --- Cards --- */ .aa-schol__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--aa-schol-cols, 2), minmax(0, 1fr)); gap: clamp(0.75rem, 1.04vw, 2.219rem); box-sizing: border-box; padding-inline: clamp(1.25rem, 13.125vw, 28rem) clamp(1.25rem, 13.75vw, 29.333rem); } .aa-schol__card { display: flex; flex-direction: column; background: var(--aa-schol-card); border-top: clamp(4px, 0.52vw, 13px) solid var(--wp--preset--color--primary); padding: clamp(1.1rem, 1.625vw, 3.467rem) var(--aa-schol-pad) clamp(2rem, 3.688vw, 7.867rem); } .aa-schol__eyebrow { margin: 0 0 clamp(1rem, 1.625vw, 3.467rem); align-self: start; color: var(--wp--preset--color--base); font-size: clamp(0.95rem, 1.26vw, 2.688rem); line-height: 1.3; text-decoration-line: underline; text-underline-offset: 0.3em; } a.aa-schol__eyebrow:hover, a.aa-schol__eyebrow:focus-visible { color: var(--wp--preset--color--secondary); } .aa-schol__title { margin: 0 0 clamp(0.6rem, 1.04vw, 2.219rem); color: var(--wp--preset--color--base); font-size: clamp(1.05rem, 1.46vw, 3.115rem); font-weight: 700; line-height: 1.3; } .aa-schol__text { margin: 0 0 clamp(0.8rem, 1.09vw, 2.325rem); /* 11.4:1 on the card. */ color: color-mix( in srgb, #fff 88%, var(--aa-schol-card) ); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.5; } .aa-schol__meta { list-style: none; margin: 0 0 clamp(1rem, 1.438vw, 3.067rem); padding: 0; display: grid; row-gap: clamp(0.5rem, 0.78vw, 1.664rem); } .aa-schol__meta-link { color: color-mix( in srgb, #fff 86%, var(--aa-schol-card) ); font-size: clamp(0.85rem, 1.07vw, 2.283rem); line-height: 1.4; text-decoration-line: underline; text-underline-offset: 0.3em; } a.aa-schol__meta-link:hover, a.aa-schol__meta-link:focus-visible { color: var(--wp--preset--color--secondary); } .aa-schol__cta { margin-top: auto; /* CTAs line up across the row whatever the copy length */ align-self: start; color: var(--wp--preset--color--base); font-size: clamp(1rem, 1.26vw, 2.688rem); text-decoration-line: underline; text-underline-offset: 0.3em; } .aa-schol__cta:hover, .aa-schol__cta:focus-visible { color: var(--wp--preset--color--secondary); } .aa-schol__caret { margin-inline-start: 0.35em; } /* --- Contact block --- */ .aa-schol__contact { padding-inline: clamp(1.25rem, 14vw, 29.867rem) clamp(1.25rem, 4.688vw, 10rem); margin-top: clamp(1.25rem, 1.688vw, 3.6rem); color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1rem, 1.26vw, 2.688rem); line-height: 1.5; } .aa-schol__contact-title { margin: 0 0 clamp(0.9rem, 1.25vw, 2.667rem); } .aa-schol__contact-text { margin: 0 0 clamp(0.9rem, 1.25vw, 2.667rem); } .aa-schol__contact-text p { margin: 0; } .aa-schol__contact-link { color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); text-decoration-line: underline; text-underline-offset: 0.3em; } .aa-schol__contact-link:hover, .aa-schol__contact-link:focus-visible { color: var(--wp--preset--color--primary); } @media (max-width: 860px) { .aa-schol__cards { grid-template-columns: 1fr; } } /* ========================================================================= Awards (Figma AAerevna — "Βραβεία") Navy heading + right-bleeding rule and an intro on white, a full-bleed highlight band for the top distinction, then a navy panel of per-class contacts closing with a notice and its links. Proportions off the 1920 PSD: heading x87 (4.5%), rule y5792 to the edge, intro x114 (5.9%), highlight band y5921-6137 with copy at x152, panel y6155-6600 with columns at x176/685/1298 and their gold class labels hanging ~118px to the left, notice at x178, links from x1282. ========================================================================= */ .aa-awards { --aa-awards-band: #08111f; --aa-awards-panel: #061220; --aa-awards-taxis: clamp(2.6rem, 4.813vw, 10.267rem); /* gutter box for "Α΄ ΤΑΞΙΣ" */ --aa-awards-taxis-gap: clamp(0.4rem, 0.688vw, 1.467rem); box-sizing: border-box; background: var(--wp--preset--color--base); overflow-x: clip; /* lets the heading rule bleed to the viewport edge */ padding-top: clamp(2.5rem, 4.688vw, 10rem); } /* --- Heading + intro --- */ .aa-awards__head { display: flex; align-items: center; gap: clamp(1rem, 1.625vw, 3.467rem); padding-inline-start: clamp(1.25rem, 3.563vw, 7.6rem); } .aa-awards__heading { margin: 0; color: var(--wp--preset--color--navy); font-size: clamp(1.4rem, 2.05vw, 4.373rem); font-weight: 900; line-height: 1.1; white-space: nowrap; } .aa-awards__rule { flex: 1; height: clamp(4px, 0.52vw, 13px); background: var(--wp--preset--color--navy); margin-right: calc(50% - 50vw); } .aa-awards__intro { margin: clamp(1rem, 1.5vw, 3.2rem) 0 clamp(1.5rem, 2.188vw, 4.667rem); padding-inline: clamp(1.25rem, 4.625vw, 9.867rem) clamp(1.25rem, 4.688vw, 10rem); color: color-mix( in srgb, var(--wp--preset--color--contrast) 85%, #fff ); font-size: clamp(1rem, 1.26vw, 2.688rem); line-height: 1.5; } .aa-awards__intro p { margin: 0 0 0.35em; } .aa-awards__intro p:last-child { margin-bottom: 0; } /* --- Highlight band (the top distinction) --- */ .aa-awards__highlight { background: var(--aa-awards-band); padding-block: clamp(1.5rem, 2.313vw, 4.933rem); /* PSD leaves a white seam between the band and the panel below. */ margin-bottom: clamp(0.5rem, 0.875vw, 1.867rem); } .aa-awards__highlight-inner { padding-inline: clamp(1.25rem, 6.188vw, 13.2rem) clamp(1.25rem, 3.906vw, 8.333rem); } .aa-awards__eyebrow { margin: 0 0 clamp(0.9rem, 1.313vw, 2.8rem); color: var(--wp--preset--color--secondary); font-size: clamp(1rem, 1.26vw, 2.688rem); line-height: 1.3; } .aa-awards__hl-title { margin: 0 0 clamp(0.9rem, 1.25vw, 2.667rem); color: var(--wp--preset--color--base); font-size: clamp(1.15rem, 1.65vw, 3.52rem); font-weight: 700; line-height: 1.25; } .aa-awards__hl-text { margin: 0; color: var(--wp--preset--color--base); font-size: clamp(1rem, 1.26vw, 2.688rem); font-weight: 600; line-height: 1.5; } /* --- Contact panel --- */ .aa-awards__panel { background: var(--aa-awards-panel); padding-block: clamp(1.75rem, 2.688vw, 5.733rem) clamp(2rem, 2.688vw, 5.733rem); } .aa-awards__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--aa-awards-cols, 3), minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 5.333rem); row-gap: clamp(1.75rem, 1.875vw, 4rem); box-sizing: border-box; padding-inline: clamp(1.25rem, 7.188vw, 15.333rem) clamp(1.25rem, 3.906vw, 8.333rem); } .aa-awards__col { min-width: 0; } .aa-awards__col-head { display: flex; align-items: baseline; gap: var(--aa-awards-taxis-gap); /* Hang the class label in the gutter so the TITLE lines up with the contact details below it, as the PSD draws it. */ margin: 0 0 clamp(0.9rem, 1.25vw, 2.667rem); margin-inline-start: calc( -1 * ( var(--aa-awards-taxis) + var(--aa-awards-taxis-gap) ) ); } .aa-awards__taxis { flex: none; width: var(--aa-awards-taxis); text-align: end; color: var(--wp--preset--color--secondary); font-size: clamp(0.8rem, 1.02vw, 2.176rem); font-weight: 600; letter-spacing: 0.04em; } .aa-awards__col-title { color: var(--wp--preset--color--base); font-size: clamp(1.1rem, 1.55vw, 3.307rem); font-weight: 700; line-height: 1.2; } .aa-awards__name { margin: 0 0 clamp(0.5rem, 0.813vw, 1.733rem); /* 12.6:1 on the panel. */ color: color-mix( in srgb, #fff 90%, var(--aa-awards-panel) ); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.4; } .aa-awards__line { margin: 0 0 clamp(0.35rem, 0.62vw, 1.323rem); } .aa-awards__contact { color: var(--wp--preset--color--secondary); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.4; overflow-wrap: anywhere; /* long addresses must not widen the column */ } a.aa-awards__contact:hover, a.aa-awards__contact:focus-visible { text-decoration-line: underline; text-underline-offset: 0.25em; } /* --- Closing notice --- */ .aa-awards__bar { display: grid; /* PSD: the copy ends at x1022 and the links begin at x1282 — two thirds across the bar's content box, NOT hard against the right edge, which is where space-between would have put them. */ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; column-gap: 0; row-gap: clamp(1.25rem, 2.5vw, 5.333rem); margin-top: clamp(1.75rem, 2.688vw, 5.733rem); padding-inline: clamp(1.25rem, 7.25vw, 15.467rem) clamp(1.25rem, 3.906vw, 8.333rem); } .aa-awards__bar-copy { min-width: 0; } .aa-awards__bar-title { margin: 0 0 clamp(0.4rem, 0.73vw, 1.557rem); color: var(--wp--preset--color--base); font-size: clamp(1.1rem, 1.55vw, 3.307rem); font-weight: 700; line-height: 1.3; } .aa-awards__bar-text { margin: 0; color: color-mix( in srgb, #fff 86%, var(--aa-awards-panel) ); font-size: clamp(0.9rem, 1.12vw, 2.389rem); line-height: 1.45; } .aa-awards__bar-links { display: grid; /* PSD: 72px between the two cap tops, less a ~1.3 line box. */ row-gap: clamp(0.7rem, 1.76vw, 3.755rem); justify-items: start; } .aa-awards__bar-link { color: var(--wp--preset--color--secondary); /* Measured identical to the notice title and the column titles: 21px cap (a 29.4px face) with a 4px stem — same size, same bold cut. */ font-size: clamp(1.1rem, 1.55vw, 3.307rem); font-weight: 700; line-height: 1.3; } .aa-awards__bar-link:hover, .aa-awards__bar-link:focus-visible { text-decoration-line: underline; text-underline-offset: 0.3em; } .aa-awards__caret { margin-inline-start: 0.35em; } @media (max-width: 900px) { .aa-awards__heading { white-space: normal; } .aa-awards__grid { grid-template-columns: 1fr; } .aa-awards__bar { grid-template-columns: 1fr; } /* Stacked, there is no gutter for the class label to hang in. */ .aa-awards__col-head { margin-inline-start: 0; } .aa-awards__taxis { width: auto; text-align: start; } } /* ========================================================================= Page head (Claude mockups — Contact / News List / Article / Generic Page) Navy bar carrying a breadcrumb, an optional category chip, the title and a standfirst. `--cover` is the same bar backed by the page's featured image (core/cover with useFeaturedImage), so one template serves both an image hero and a plain navy band; the navy background under the overlay is what keeps the no-image case solid rather than washed out. Sizes follow the theme's clamp(min, Xvw, max) scale at 1 rem = 12px: title 54px, standfirst 21px, crumbs 15px at a 1920 viewport. ========================================================================= */ .aa-pagehead { box-sizing: border-box; } .aa-pagehead--cover { /* core/cover is transparent behind its overlay — without this the no-image case would show the page background through a 70% dim. */ background-color: var(--wp--preset--color--navy); } .aa-pagehead--cover .wp-block-cover__inner-container { width: 100%; } .aa-pagehead__crumbs { margin: 0 0 clamp(0.6rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--secondary); font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .aa-pagehead__crumbs a { color: inherit; text-decoration: none; } .aa-pagehead__crumbs a:hover, .aa-pagehead__crumbs a:focus-visible { text-decoration: underline; } .aa-pagehead__title { margin: 0 0 clamp(0.5rem, 0.521vw, 1.111rem); color: var(--wp--preset--color--base); font-size: clamp(1.9rem, 2.813vw, 6rem); font-weight: 700; line-height: 1.15; } .aa-pagehead__sub { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: clamp(1.05rem, 1.094vw, 2.333rem); line-height: 1.6; } .aa-pagehead__date { margin: clamp(0.6rem, 0.833vw, 1.778rem) 0 0; color: rgba(255, 255, 255, 0.75); font-size: clamp(0.85rem, 0.781vw, 1.667rem); } /* Category chip — core/post-terms renders a plain inline list of links. */ .aa-pagehead__chip { margin: 0 0 clamp(0.6rem, 0.729vw, 1.556rem); font-size: 0; } .aa-pagehead__chip a { display: inline-block; margin-inline-end: 0.4em; padding: clamp(0.2rem, 0.26vw, 0.556rem) clamp(0.5rem, 0.625vw, 1.333rem); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .aa-pagehead__chip a:hover, .aa-pagehead__chip a:focus-visible { text-decoration: underline; } .aa-pagehead--article .aa-pagehead__title { font-size: clamp(1.6rem, 2.24vw, 4.778rem); } /* Lead paragraph used to open the Βραβεία / Υποτροφίες pages. */ .aa-lead { margin: 0; font-size: clamp(1.05rem, 1.146vw, 2.444rem); line-height: 1.75; } /* ========================================================================= News list (archive-academy_news) A row of category links over a three-up card grid. The eyebrow uses brick rather than the mockup's gold: gold on white measures ~2.6:1, well under the 4.5:1 that WCAG 2.1 AA asks for body text, while brick on white is 5.1:1. Gold is kept for dark grounds, where it reaches 9.2:1 on navy. ========================================================================= */ .aa-newstabs { margin-bottom: clamp(1.5rem, 2.083vw, 4.444rem); padding-bottom: clamp(0.75rem, 1.042vw, 2.222rem); border-bottom: 1px solid var(--wp--preset--color--border); } .aa-newstabs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 1.875vw, 4rem); } .aa-newstabs__list li { margin: 0; } .aa-newstabs__list a { color: #4d5866; font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .aa-newstabs__list a:hover, .aa-newstabs__list a:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; } .aa-newstabs__list .current-cat > a { color: var(--wp--preset--color--primary); font-weight: 700; } /* core/categories appends the count in a nested span. */ .aa-newstabs__list .post-count { color: #6b7280; font-weight: 400; } .aa-newsgrid .wp-block-post-template { gap: clamp(1.5rem, 2.083vw, 4.444rem); } .aa-newscard { display: flex; flex-direction: column; } .aa-newscard__media img { width: 100%; height: 100%; object-fit: cover; } .aa-newscard__cat { margin: 0; color: var(--wp--preset--color--primary); font-size: clamp(0.75rem, 0.677vw, 1.444rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .aa-newscard__cat a { color: inherit; text-decoration: none; } .aa-newscard__cat a:hover, .aa-newscard__cat a:focus-visible { text-decoration: underline; } .aa-newscard__title { margin: 0; font-size: clamp(1.1rem, 1.146vw, 2.444rem); line-height: 1.35; } .aa-newscard__title a { color: var(--wp--preset--color--navy); text-decoration: none; } .aa-newscard__title a:hover, .aa-newscard__title a:focus-visible { text-decoration: underline; } .aa-newscard__date { margin: 0; color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); } .aa-newscard__excerpt { margin: 0; color: #3b4757; font-size: clamp(0.9rem, 0.833vw, 1.778rem); line-height: 1.6; } .aa-newscard__more { color: var(--wp--preset--color--primary); font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 700; text-decoration: none; } .aa-newscard__more:hover, .aa-newscard__more:focus-visible { text-decoration: underline; } /* The pinned announcement: a tinted panel, a gold edge and a badge that says so in words, so the distinction does not rest on colour alone. */ .aa-newscard--pinned { box-sizing: border-box; padding: clamp(1rem, 1.111vw, 2.37rem); background-color: var(--wp--preset--color--surface); border-top: 4px solid var(--wp--preset--color--primary); } .aa-newscard__pin { display: inline-flex; align-items: center; gap: 0.4em; align-self: start; margin: 0 0 clamp(0.7rem, 0.903vw, 1.926rem); padding: 0.3em 0.75em; border-radius: 999px; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: clamp(0.7rem, 0.625vw, 1.333rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .aa-newscard__pin svg { flex: none; width: 1em; height: 1em; } /* ========================================================================= Article (single-academy_news) — body beside a "more news" rail. ========================================================================= */ .aa-article { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(2rem, 3.333vw, 7.111rem); align-items: start; } .aa-article__main { min-width: 0; } .aa-article__media img { width: 100%; height: 100%; object-fit: cover; } .aa-article__aside { min-width: 0; } .aa-article__aside-title { margin: 0 0 clamp(0.9rem, 1.042vw, 2.222rem); color: var(--wp--preset--color--primary); font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .aa-related .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .aa-related__item { padding-bottom: clamp(0.9rem, 1.042vw, 2.222rem); margin-bottom: clamp(0.9rem, 1.042vw, 2.222rem); border-bottom: 1px solid var(--wp--preset--color--border); } .aa-related .wp-block-post-template > li:last-child .aa-related__item { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .aa-related__date { margin: 0; color: #4d5866; font-size: clamp(0.8rem, 0.677vw, 1.444rem); } .aa-related__title { margin: 0; font-size: clamp(0.95rem, 0.833vw, 1.778rem); line-height: 1.4; } .aa-related__title a { color: var(--wp--preset--color--navy); text-decoration: none; } .aa-related__title a:hover, .aa-related__title a:focus-visible { text-decoration: underline; } /* ========================================================================= Share links (akadimia/share-links) ========================================================================= */ .aa-share { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(0.75rem, 1.042vw, 2.222rem); margin-top: clamp(2rem, 2.5vw, 5.333rem); padding-top: clamp(1.25rem, 1.667vw, 3.556rem); border-top: 1px solid var(--wp--preset--color--border); } .aa-share__label { margin: 0; color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .aa-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.042vw, 2.222rem); } .aa-share__link { color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); text-decoration: none; } .aa-share__link:hover, .aa-share__link:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; } /* ========================================================================= Entry list (akadimia/entry-list — Βραβεία / Υποτροφίες) Filters, then one card per entry: copy on the left, meta pairs on the right, document links along the foot. The filter row is hidden until JS reveals it, so with scripting off every entry stays listed and no dead control is exposed. ========================================================================= */ .aa-entries { box-sizing: border-box; } .aa-entries__eyebrow { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--primary); font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .aa-entries__heading { margin: 0 0 clamp(0.6rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--navy); font-size: clamp(1.4rem, 1.875vw, 4rem); font-weight: 700; line-height: 1.2; } .aa-entries__intro { margin: 0 0 clamp(1.5rem, 1.667vw, 3.556rem); color: #3b4757; font-size: clamp(0.95rem, 0.938vw, 2rem); line-height: 1.7; max-width: 70ch; } /* Filters. The mockups (Awards / Scholarships, identical in both) draw these as plain uppercase text with a brick underline on the active one — the rule they sit on belongs to the row itself, so the active tab's negative bottom margin can drop its 2px border exactly onto that line. */ .aa-entries__filters { margin-bottom: 36px; } .aa-entries__filter-row { display: flex; flex-wrap: wrap; gap: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--border); } .aa-entries__filter { appearance: none; cursor: pointer; background: transparent; border: 0; border-radius: 0; padding: 0; color: #4d5866; font-family: inherit; font-size: 13px; font-weight: 600; line-height: normal; letter-spacing: 0.05em; text-transform: uppercase; } .aa-entries__filter:hover { color: var(--wp--preset--color--primary); } .aa-entries__filter.is-active { color: var(--wp--preset--color--primary); font-weight: 700; padding-bottom: 18px; margin-bottom: -21px; border-bottom: 2px solid var(--wp--preset--color--primary); } .aa-entries__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.9rem, 1.042vw, 2.222rem); } .aa-entries__card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); } .aa-entries__body { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(1.25rem, 1.458vw, 3.111rem); padding: clamp(1.25rem, 1.667vw, 3.556rem); } .aa-entries__main { min-width: 0; } .aa-entries__tags { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.5rem, 0.625vw, 1.333rem); } .aa-entries__tag { color: var(--wp--preset--color--primary); font-size: clamp(0.75rem, 0.677vw, 1.444rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .aa-entries__badge { padding: clamp(0.1rem, 0.156vw, 0.333rem) clamp(0.4rem, 0.521vw, 1.111rem); border: 1px solid var(--wp--preset--color--border); color: #4d5866; font-size: clamp(0.7rem, 0.625vw, 1.333rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .aa-entries__title { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--navy); font-size: clamp(1.15rem, 1.302vw, 2.778rem); font-weight: 700; line-height: 1.3; } .aa-entries__text { margin: 0; color: #3b4757; font-size: clamp(0.9rem, 0.833vw, 1.778rem); line-height: 1.7; } .aa-entries__meta { margin: 0; display: flex; flex-direction: column; gap: clamp(0.6rem, 0.729vw, 1.556rem); min-width: 0; } .aa-entries__meta-pair { margin: 0; } .aa-entries__meta-label { margin: 0 0 0.2em; color: #5c6773; font-size: clamp(0.7rem, 0.625vw, 1.333rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .aa-entries__meta-value { margin: 0; color: var(--wp--preset--color--contrast); font-size: clamp(0.9rem, 0.833vw, 1.778rem); } .aa-entries__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: var(--wp--preset--color--border); border-top: 1px solid var(--wp--preset--color--border); } .aa-entries__doc { display: flex; align-items: center; gap: clamp(0.5rem, 0.625vw, 1.333rem); padding: clamp(0.6rem, 0.729vw, 1.556rem) clamp(0.75rem, 0.833vw, 1.778rem); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); text-decoration: none; } .aa-entries__doc:hover, .aa-entries__doc:focus-visible { background: var(--wp--preset--color--base); } .aa-entries__doc:hover .aa-entries__doc-label, .aa-entries__doc:focus-visible .aa-entries__doc-label { text-decoration: underline; } .aa-entries__doc-kind { flex-shrink: 0; padding: clamp(0.15rem, 0.208vw, 0.444rem) clamp(0.3rem, 0.365vw, 0.778rem); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: clamp(0.65rem, 0.573vw, 1.222rem); font-weight: 700; letter-spacing: 0.06em; } .aa-entries__doc-label { font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; } .aa-entries__doc-meta { margin-inline-start: auto; color: #5c6773; font-size: clamp(0.75rem, 0.677vw, 1.444rem); } /* ========================================================================= Attached documents (inc/documents.php). The same row as .aa-entries__doc -- badge, label, size -- because it is the same thing: a file to open. Here it is a list rather than a grid, since an announcement's attachments are read in the order they were posted and a two-column grid would read across before it reads down. ========================================================================= */ .aa-docs { margin: clamp(2rem, 2.5vw, 5.333rem) 0 0; } .aa-docs__title { margin: 0 0 clamp(0.75rem, 0.833vw, 1.778rem); color: var(--wp--preset--color--navy); font-size: clamp(1rem, 1.042vw, 2.222rem); font-weight: 700; line-height: 1.3; } .aa-docs__list { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--wp--preset--color--border); border-block: 1px solid var(--wp--preset--color--border); } .aa-docs__item { margin: 0; } .aa-docs__link { display: flex; align-items: center; gap: clamp(0.5rem, 0.625vw, 1.333rem); padding: clamp(0.6rem, 0.729vw, 1.556rem) clamp(0.75rem, 0.833vw, 1.778rem); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); text-decoration: none; } .aa-docs__link:hover, .aa-docs__link:focus-visible { background: var(--wp--preset--color--base); } /* Surface to white is a 1.04:1 shift — it reads as hover, not as focus. The ring is brick on surface, 4.6:1, and sits inside the row because the rows are flush against each other and an outside ring would be clipped by its neighbour. */ .aa-docs__link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; } .aa-docs__link:hover .aa-docs__label, .aa-docs__link:focus-visible .aa-docs__label { text-decoration: underline; } .aa-docs__kind { flex-shrink: 0; padding: clamp(0.15rem, 0.208vw, 0.444rem) clamp(0.3rem, 0.365vw, 0.778rem); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: clamp(0.65rem, 0.573vw, 1.222rem); font-weight: 700; letter-spacing: 0.06em; } .aa-docs__label { font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; /* A filename can be one unbroken 90-character word; let it wrap rather than push the size out of the row. */ overflow-wrap: anywhere; } .aa-docs__meta { flex-shrink: 0; margin-inline-start: auto; padding-inline-start: clamp(0.5rem, 0.625vw, 1.333rem); color: #5c6773; font-size: clamp(0.75rem, 0.677vw, 1.444rem); white-space: nowrap; } .aa-entries__note { margin: clamp(1.25rem, 1.458vw, 3.111rem) 0 0; color: #4d5866; font-size: clamp(0.85rem, 0.781vw, 1.667rem); line-height: 1.7; max-width: 80ch; } /* ========================================================================= Info columns (akadimia/info-columns) `plain` sits on the page; `panel` is the navy box beside an announcement. ========================================================================= */ .aa-info { box-sizing: border-box; } .aa-info__eyebrow { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--primary); font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .aa-info__heading { margin: 0 0 clamp(1rem, 1.25vw, 2.667rem); color: var(--wp--preset--color--navy); font-size: clamp(1.3rem, 1.667vw, 3.556rem); font-weight: 700; line-height: 1.2; } .aa-info__grid { display: grid; grid-template-columns: repeat(var(--aa-info-cols, 1), minmax(0, 1fr)); gap: clamp(1.5rem, 2.083vw, 4.444rem); } .aa-info__col { min-width: 0; } .aa-info__col-title { margin: 0 0 clamp(0.75rem, 0.833vw, 1.778rem); color: var(--wp--preset--color--navy); font-size: clamp(1.05rem, 1.042vw, 2.222rem); font-weight: 700; line-height: 1.3; } .aa-info__list { margin: 0; display: flex; flex-direction: column; gap: clamp(0.75rem, 0.938vw, 2rem); } .aa-info__pair { margin: 0; } .aa-info__label { margin: 0 0 0.2em; color: #5c6773; font-size: clamp(0.75rem, 0.677vw, 1.444rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .aa-info__value { margin: 0; color: var(--wp--preset--color--contrast); font-size: clamp(0.95rem, 0.885vw, 1.889rem); line-height: 1.6; } .aa-info__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .aa-info__link:hover, .aa-info__link:focus-visible { color: var(--wp--preset--color--primary); } .aa-info__cta { margin: clamp(1.25rem, 1.458vw, 3.111rem) 0 0; } .aa-info__cta-link { color: var(--wp--preset--color--primary); font-size: clamp(0.9rem, 0.833vw, 1.778rem); font-weight: 700; text-decoration: none; } .aa-info__cta-link:hover, .aa-info__cta-link:focus-visible { text-decoration: underline; } .aa-info__caret { margin-inline-start: 0.35em; } /* Navy panel variant. */ .aa-info--panel { background: var(--wp--preset--color--navy); padding: clamp(1.25rem, 1.667vw, 3.556rem); } .aa-info--panel .aa-info__eyebrow { color: var(--wp--preset--color--secondary); } .aa-info--panel .aa-info__heading, .aa-info--panel .aa-info__col-title, .aa-info--panel .aa-info__value { color: var(--wp--preset--color--base); } .aa-info--panel .aa-info__label { color: var(--wp--preset--color--secondary); } .aa-info--panel .aa-info__cta-link { color: var(--wp--preset--color--secondary); } /* ========================================================================= Volume grid (akadimia/volume-grid — Εκδόσεις) ========================================================================= */ .aa-volumes { box-sizing: border-box; } .aa-volumes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: clamp(0.9rem, 1.25vw, 2.667rem); margin-bottom: clamp(1.5rem, 2.083vw, 4.444rem); } .aa-volumes__eyebrow { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--primary); font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .aa-volumes__heading { margin: 0; color: var(--wp--preset--color--navy); font-size: clamp(1.4rem, 1.875vw, 4rem); font-weight: 700; line-height: 1.2; } .aa-volumes__more { color: var(--wp--preset--color--primary); font-size: clamp(0.9rem, 0.833vw, 1.778rem); font-weight: 700; text-decoration: none; white-space: nowrap; } .aa-volumes__more:hover, .aa-volumes__more:focus-visible { text-decoration: underline; } .aa-volumes__caret { margin-inline-start: 0.35em; } .aa-volumes__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--aa-volumes-cols, 4), minmax(0, 1fr)); gap: clamp(1.25rem, 1.667vw, 3.556rem); } .aa-volumes__item { min-width: 0; } .aa-volumes__link { color: inherit; text-decoration: none; display: block; } .aa-volumes__cover { display: block; aspect-ratio: 3 / 4; margin-bottom: clamp(0.6rem, 0.833vw, 1.778rem); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); overflow: hidden; } .aa-volumes__img { width: 100%; height: 100%; object-fit: cover; display: block; } .aa-volumes__title { display: block; color: var(--wp--preset--color--navy); font-size: clamp(0.95rem, 0.833vw, 1.778rem); font-weight: 700; line-height: 1.4; } .aa-volumes__link:hover .aa-volumes__title, .aa-volumes__link:focus-visible .aa-volumes__title { text-decoration: underline; } .aa-volumes__meta { display: block; margin-top: 0.3em; color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); } /* ========================================================================= Newsletter (akadimia/newsletter) ========================================================================= */ .aa-newsletter { box-sizing: border-box; background: var(--wp--preset--color--navy); padding-block: clamp(2.5rem, 3.75vw, 8rem); padding-inline: clamp(1.25rem, 2.5vw, 5.333rem); } .aa-newsletter__inner { max-width: 1600px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 5.333rem); align-items: center; } .aa-newsletter__rule { display: block; width: clamp(2.5rem, 3.125vw, 6.667rem); height: 3px; margin-bottom: clamp(0.75rem, 1.042vw, 2.222rem); background: var(--wp--preset--color--secondary); } .aa-newsletter__heading { margin: 0 0 clamp(0.5rem, 0.625vw, 1.333rem); color: var(--wp--preset--color--base); font-size: clamp(1.4rem, 1.875vw, 4rem); font-weight: 700; line-height: 1.2; } .aa-newsletter__text { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: clamp(0.95rem, 0.938vw, 2rem); line-height: 1.7; max-width: 52ch; } .aa-newsletter__form { display: flex; flex-wrap: wrap; gap: 0; } .aa-newsletter__input { flex: 1 1 14rem; min-width: 0; box-sizing: border-box; border: 1px solid var(--wp--preset--color--base); border-radius: 0; padding: clamp(0.7rem, 0.833vw, 1.778rem) clamp(0.75rem, 0.938vw, 2rem); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-family: inherit; font-size: clamp(0.9rem, 0.833vw, 1.778rem); } .aa-newsletter__button { appearance: none; cursor: pointer; border: 1px solid var(--wp--preset--color--primary); border-radius: 0; padding: clamp(0.7rem, 0.833vw, 1.778rem) clamp(1.25rem, 1.667vw, 3.556rem); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-family: inherit; font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .aa-newsletter__button:hover { background: #96432b; border-color: #96432b; } .aa-newsletter__note { margin: clamp(0.6rem, 0.729vw, 1.556rem) 0 0; color: rgba(255, 255, 255, 0.62); font-size: clamp(0.8rem, 0.729vw, 1.556rem); line-height: 1.6; } /* ========================================================================= Checklist notice (akadimia/checklist-notice — Υποτροφίες) ========================================================================= */ .aa-checklist { box-sizing: border-box; } .aa-checklist__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 2.083vw, 4.444rem); background: var(--wp--preset--color--navy); padding: clamp(1.5rem, 2.083vw, 4.444rem); } .aa-checklist__heading { margin: 0 0 clamp(0.6rem, 0.729vw, 1.556rem); color: var(--wp--preset--color--base); font-size: clamp(1.2rem, 1.458vw, 3.111rem); font-weight: 700; line-height: 1.25; } .aa-checklist__text { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: clamp(0.9rem, 0.833vw, 1.778rem); line-height: 1.75; } .aa-checklist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.6rem, 0.729vw, 1.556rem); } .aa-checklist__item { display: flex; align-items: flex-start; gap: clamp(0.5rem, 0.625vw, 1.333rem); } .aa-checklist__tick { flex-shrink: 0; color: var(--wp--preset--color--secondary); font-size: clamp(0.9rem, 0.833vw, 1.778rem); line-height: 1.6; } .aa-checklist__label { color: rgba(255, 255, 255, 0.92); font-size: clamp(0.9rem, 0.833vw, 1.778rem); line-height: 1.6; } /* ========================================================================= Narrow screens — the new sections collapse to one column. ========================================================================= */ @media (max-width: 900px) { .aa-article { grid-template-columns: 1fr; } .aa-entries__body { grid-template-columns: 1fr; } .aa-newsletter__inner { grid-template-columns: 1fr; align-items: start; } .aa-checklist__panel { grid-template-columns: 1fr; } .aa-volumes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aa-info__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .aa-volumes__grid { grid-template-columns: 1fr; } .aa-entries__docs { grid-template-columns: 1fr; } } /* ========================================================================= Constrained-layout note. Core gives every child of an .is-layout-constrained group `max-width: ` plus `margin-left/right: auto !important` — those auto margins are what centre the content column itself. So a child that sets its own, narrower max-width centres inside the column instead of sitting on its left edge, which is what pushed the page-head title into the middle while the breadcrumb stayed put. Overriding the margins is not the fix: it drags the element out to the page edge, away from its siblings. The measure has to come from the container instead, so these elements simply do not cap their own width. Elements inside our own block markup (aa-entries, aa-newsletter) are not constrained-layout children and keep their max-width. ========================================================================= */ /* ========================================================================= Intro + figures (Βραβεία) The lead paragraph beside the two standout figures. The mockup carries these under the hero rather than inside it — in the hero they collide with the title once the banner is shorter than full height. ========================================================================= */ .aa-introstats { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 5.333rem); align-items: start; } .aa-introstats__figures { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.25vw, 2.667rem); padding-inline-start: clamp(1rem, 1.667vw, 3.556rem); border-inline-start: 1px solid var(--wp--preset--color--border); } .aa-introstats__value { margin: 0; color: var(--wp--preset--color--primary); font-size: clamp(1.3rem, 1.667vw, 3.556rem); font-weight: 700; line-height: 1.1; } .aa-introstats__label { margin: 0.3em 0 0; color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); line-height: 1.5; } @media (max-width: 900px) { .aa-introstats { grid-template-columns: 1fr; } .aa-introstats__figures { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--wp--preset--color--border); padding-top: clamp(0.9rem, 1.25vw, 2.667rem); } } /* ------------------------------------------------------------------------- Page head as the first block on a hero-template page. The page-home template floats the header as a translucent veil because those pages open with a full-bleed image hero. A navy page head in that slot has no image to sit over, so the bar covered its breadcrumb. Only the top padding is left to CSS here (the pattern sets no inline padding-top), which lets the 80px bar be added on just this template. ------------------------------------------------------------------------- */ .aa-pagehead { padding-top: clamp(2.5rem, 3.333vw, 7.111rem); } .page-template-page-home .aa-pagehead { padding-top: calc( 80px + clamp(2.5rem, 3.333vw, 7.111rem) ); } /* ------------------------------------------------------------------------- News list, second pass against the mockup. The archive opens on an image hero rather than a bare navy strip, the card grid keeps a page margin instead of running to the window edge, the current category carries a brick underline sitting on the tab row's own rule, and pagination numbers are circles with the current page filled navy. ------------------------------------------------------------------------- */ .aa-pagehead--tall { min-height: 440px !important; /* mockup heroHeight */ } .aa-pagehead--tall .wp-block-cover__inner-container { align-self: end; } .aa-newsbody { box-sizing: border-box; padding-inline: clamp(1.25rem, 2.5vw, 5.333rem); } /* Current category — the underline overlaps the row's bottom rule. */ .aa-newstabs__list .current-cat > a { position: relative; display: inline-block; padding-bottom: clamp(0.75rem, 1.042vw, 2.222rem); margin-bottom: calc( -1 * clamp(0.75rem, 1.042vw, 2.222rem) - 1px ); border-bottom: 2px solid var(--wp--preset--color--primary); } /* Pagination — circles, current page filled. */ .aa-newsgrid__pagination { gap: clamp(0.5rem, 0.729vw, 1.556rem); } .aa-newsgrid__pagination .wp-block-query-pagination-numbers { display: flex; align-items: center; gap: clamp(0.35rem, 0.417vw, 0.889rem); } .aa-newsgrid__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: clamp(2rem, 1.875vw, 4rem); min-height: clamp(2rem, 1.875vw, 4rem); padding: 0; line-height: 1; flex: 0 0 auto; border-radius: 50%; color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 600; text-decoration: none; } .aa-newsgrid__pagination .page-numbers:hover, .aa-newsgrid__pagination .page-numbers:focus-visible { color: var(--wp--preset--color--primary); } .aa-newsgrid__pagination .page-numbers.current { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); font-weight: 700; } .aa-newsgrid__pagination .wp-block-query-pagination-previous, .aa-newsgrid__pagination .wp-block-query-pagination-next { color: #4d5866; font-size: clamp(0.8rem, 0.729vw, 1.556rem); font-weight: 600; text-decoration: none; } .aa-newsgrid__pagination .wp-block-query-pagination-previous:hover, .aa-newsgrid__pagination .wp-block-query-pagination-next:hover, .aa-newsgrid__pagination .wp-block-query-pagination-previous:focus-visible, .aa-newsgrid__pagination .wp-block-query-pagination-next:focus-visible { color: var(--wp--preset--color--primary); } /* Card rhythm, matched to the mockup (18/8/10/12/14px on its 1440 canvas). */ .aa-newscard__media { margin: 0 0 clamp(0.9rem, 1.25vw, 2.667rem); } .aa-newscard__cat { margin: 0 0 clamp(0.4rem, 0.556vw, 1.185rem); } .aa-newscard__title { margin: 0 0 clamp(0.5rem, 0.694vw, 1.481rem); } .aa-newscard__date { margin: 0 0 clamp(0.6rem, 0.833vw, 1.778rem); } .aa-newscard__excerpt { margin: 0 0 clamp(0.7rem, 0.972vw, 2.074rem); } .aa-newscard__more { margin: 0; align-self: start; } /* ------------------------------------------------------------------------- Image-backed page heads read as heroes, so they take the hero-banner block's inset and type scale rather than inventing a second hero style — /news/ then sits beside /library/ and /research/. That scale also lands on the mockup's own numbers: 3.65vw is 52px at its 1440 canvas, exactly its title size. The cover uses a default (not constrained) layout, so these max-widths cap the measure without core's auto margins re-centring them. ------------------------------------------------------------------------- */ .aa-pagehead--cover .wp-block-cover__inner-container { box-sizing: border-box; width: 100%; max-width: none; align-self: end; padding-inline: clamp(1.5rem, 2.5vw, 5.333rem); } /* Fixed px from the mockups, which all draw this hero identically: 440px tall, 48px inset, 12px breadcrumb, 18px italic standfirst. Only the title differs — 46px on the generic page, 52px on the news and publications banners. */ .aa-pagehead--cover .aa-pagehead__crumbs { margin: 0 0 12px; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 0.1em; } .aa-pagehead--cover .aa-pagehead__title { margin: 0 0 10px; font-size: 46px; font-weight: 600; line-height: 1.2; max-width: 20ch; } .aa-pagehead--tall .aa-pagehead__title { font-size: 52px; } .aa-pagehead--cover .aa-pagehead__sub { margin: 0; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.5; max-width: 640px; /* News List and Publications */ text-shadow: 0 1px 12px rgba(13, 32, 53, 0.55); } /* Awards and Scholarships give the standfirst a wider measure. */ :is( .aa-awardspage, .aa-scholpage ) .aa-pagehead__sub { max-width: 680px; } /* The pagination's own margin attribute is discarded — core/query-pagination does not support spacing.margin — so the gap above it lives here, matched to the section's bottom padding so the row sits evenly between the grid and the footer. */ .aa-newsgrid__pagination { margin-top: var(--wp--preset--spacing--60); } /* ========================================================================= Mobile header + open menu (Figma akadimiaAthinwn_mobile, nodes 11:249 and 18:312, drawn on a 390px canvas). The bar is 60px there, not the 80px it uses from tablet up, and the two icon cells are 52px wide with their dividers running the full bar height. The open menu puts the top-level items in a single sideways-scrolling row above the sub-items, rather than stacking every level in one long column. ========================================================================= */ @media (max-width: 781px) { :root { --aa-mobile-bar: 60px; /* Figma 11:249 frame height */ --aa-mobile-cell: 52px; /* icon cell; also the panel's right inset */ } .aa-header__bar { height: var(--aa-mobile-bar); padding-inline-start: 16px; } /* Logo 165x54 sitting 6px below the top of the bar (Figma 11:274). */ .aa-header__bar .aa-logo { margin-top: 6px; } .aa-logo img { height: 54px; } .aa-header__icons > *, .aa-header__icons .aa-megamenu .aa-mm-trigger, .aa-search__trigger { min-width: var(--aa-mobile-cell); } /* Glyphs: burger 21.6x15.3, magnifier 16x16 (Figma 11:265 / 11:271). */ .aa-mm-trigger .aa-mm-icon-open { width: 21.6px; height: 15.3px; } .aa-search__trigger .aa-search__icon-open { width: 16px; height: 16px; } .aa-mm-trigger .aa-mm-icon-close, .aa-search__trigger .aa-search__icon-close { width: 18px; height: 18px; } /* Panel padding, Figma 18:633: pt 56, pl 16, pb 32. */ .aa-mm-inner { max-width: none; margin-inline: 0; padding: 56px 24px 32px 24px; } /* --- Stacked section rows (replaces the Figma 18:634 tab strip) ------- */ .aa-mm-link { /* Fixed px, not rem: this is a Figma mobile frame value, and as rem it grew with the root size instead of staying at the designed 18px. */ font-size: 18px; letter-spacing: 1.08px; padding-block: 14px; } .aa-mm-sub { padding-inline: 0 16px; padding-block-end: 24px; } .aa-mm-sub li { margin-bottom: 16px; } .aa-mm-sub li:last-child { margin-bottom: 0; } .aa-mm-sub a { font-size: 16px; font-weight: 500; letter-spacing: 1.08px; } } /* ========================================================================= News article — matched to Design/mockups/News Article.dc.html. Sizes and spacing are the mockup's own fixed px on its own breakpoint (isMobile = innerWidth < 860), not this theme's 1920-calibrated vw clamps: a vw term fitted to one width drifts at every other, which is what made the 38px title render near 50px on a 1920 screen. Colour and typeface stay on the theme's tokens — see MOCKUP-FIDELITY.md. ========================================================================= */ .aa-pagehead--article { /* Mockup titleBarPad, with theme navy in place of its #102A46. */ padding: 64px 48px 48px; } .aa-pagehead--article .aa-pagehead__crumbs { margin: 0 0 16px; font-size: 12px; font-weight: 400; line-height: normal; /* the mockup leaves these at the font's own leading */ letter-spacing: 0.1em; } .aa-pagehead--article .aa-pagehead__chip { margin: 0 0 18px; } .aa-pagehead--article .aa-pagehead__chip a { line-height: normal; padding: 5px 12px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .aa-pagehead--article .aa-pagehead__title { margin: 0 0 18px; font-size: 38px; font-weight: 600; line-height: 1.25; } .aa-pagehead--article .aa-pagehead__date { margin: 0; font-size: 14px; line-height: normal; color: rgba(255, 255, 255, 0.7); } /* Body: a 900px measure inside 48px gutters (the mockup's max-width:900px on a content-box section), beside the related-news rail at 2fr/1fr. */ .aa-article { box-sizing: border-box; /* The theme pads the root 18px each side; the mockup measures its gutters from the window edge. Core forces margin-inline:auto on constrained-layout children, so the padding is reclaimed by over-widening rather than by a negative margin — the auto margins then keep it centred, and max-width still caps it on desktop. */ width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)); max-width: 996px; padding: 72px 48px; grid-template-columns: 2fr 1fr; gap: 56px; } .aa-article__media { margin: 0 0 32px; } .aa-article__main :where(p) { font-size: 17px; line-height: 1.8; margin: 0 0 22px; } .aa-article__main .wp-block-quote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--wp--preset--color--secondary); font-style: italic; color: var(--wp--preset--color--navy); } .aa-article__main .wp-block-quote :where(p) { font-size: 20px; line-height: 1.6; margin: 0; } /* Related-news rail. The mockup labels this in gold on a light ground (2.6:1); brick keeps the same weight at 5.1:1. */ .aa-article__aside-title { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; } .aa-article .aa-related__item { margin-bottom: 22px; padding-bottom: 20px; } .aa-article .aa-related__date { margin: 0 0 6px; font-size: 12px; } .aa-article .aa-related__title { font-size: 15px; line-height: 1.4; } @media (max-width: 859px) { .aa-pagehead--article { padding: 40px 20px 32px; } .aa-pagehead--article .aa-pagehead__title { font-size: 28px; } .aa-article { padding: 40px 20px; grid-template-columns: 1fr; } } /* ========================================================================= Announcements — matched to Design/mockups/Announcement.dc.html. Same title bar and body measure as a news article; the differences are the gold type chip and the details panel in the rail. ========================================================================= */ /* The announcement type reads as a gold chip with navy text (9.2:1), where a press release uses the brick chip. */ .aa-pagehead--announcement .aa-pagehead__chip a { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--navy); } .aa-anndetails { box-sizing: border-box; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); padding: 28px; margin: 0 0 28px; } .aa-anndetails__title { margin: 0 0 16px; color: var(--wp--preset--color--secondary); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; } .aa-anndetails__list { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 14px; } .aa-anndetails__row { margin: 0; } .aa-anndetails__label { margin: 0; font-weight: 700; line-height: 1.5; } .aa-anndetails__value { margin: 0; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .aa-anndetails__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .aa-anndetails__link:hover, .aa-anndetails__link:focus-visible { color: var(--wp--preset--color--secondary); } /* The date line under the title reuses the page head's own date styling. */ .aa-anndetails--line { margin: 0; } /* "Invitation" lead and the abstract card inside an announcement body. */ .aa-article__main .aa-abstract { margin: 32px 0; padding: 28px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); } .aa-article__main .aa-abstract :where(p) { font-size: 15px; line-height: 1.75; margin: 0; } .aa-article__main .aa-abstract :where(h3) { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--wp--preset--color--navy); } /* Fallback hero image for cover page heads. page.html uses the page's featured image, but most pages have none — without this they would render as 440px of flat navy. The container's own background sits below core's .wp-block-cover__image-background (z-index 0) and below the tint span (z-index 1), so a page with a featured image simply covers it, and either way the overlay treatment is identical. */ .aa-pagehead--cover { background-image: url( "assets/images/hero-academy.jpg" ); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ========================================================================= Contact — matched to Design/mockups/Contact.dc.html. Fixed px on the mockup's own 860px breakpoint; colour and typeface stay on the theme's tokens (MOCKUP-FIDELITY.md). The mockup's map placeholder is an OpenStreetMap frame here. ========================================================================= */ .aa-pagehead--contact { /* The navy band runs full width while its content holds a 1400px measure, centred. Done with padding rather than a constrained layout: constrained children get margin-inline:auto, which would re-centre the standfirst against the breadcrumb and title once it caps itself at 640px. */ padding: 64px max( 48px, calc( ( 100% - 1400px ) / 2 ) ) 48px; } /* The page-home template floats the 80px header over the page, so the mockup's 64px is measured from under the bar rather than from the top of the viewport — otherwise the breadcrumb sits behind it. */ .page-template-page-home .aa-pagehead--contact { padding-top: calc( 80px + 64px ); } .aa-pagehead--contact .aa-pagehead__crumbs, .aa-pagehead--contact .aa-pagehead__title, .aa-pagehead--contact .aa-pagehead__sub { margin-inline: 0; } .aa-pagehead--contact .aa-pagehead__crumbs { margin: 0 0 16px; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 0.1em; } .aa-pagehead--contact .aa-pagehead__title { margin: 0 0 14px; font-size: 44px; font-weight: 600; line-height: 1.2; } .aa-pagehead--contact .aa-pagehead__sub { margin: 0; max-width: 640px; font-size: 17px; font-style: italic; line-height: 1.6; color: rgba(255, 255, 255, 0.8); } /* Details beside the map. The theme pads the root 18px each side and core forces margin-inline:auto on constrained children, so the section reclaims that width instead of fighting the margins — same approach as .aa-article. */ .aa-contact-top { box-sizing: border-box; width: calc( 100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px) ); max-width: 1496px; /* 1400 measure + 48px gutters */ padding: 80px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .aa-contact-top .aa-info__heading { margin: 0 0 24px; font-size: 26px; font-weight: 600; } .aa-contact-top .aa-info__list { gap: 20px; font-size: 16px; line-height: 1.7; } .aa-contact-top .aa-info__label { margin: 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--navy); } .aa-contact-top .aa-info__value { font-size: 16px; line-height: 1.7; } .aa-contact-top .aa-info__cta { margin: 32px 0 0; } .aa-contact-top .aa-info__cta-link { font-size: 14px; font-weight: 700; } /* --- Map (akadimia/osm-map) ------------------------------------------- */ .aa-map { box-sizing: border-box; } .aa-map__frame { position: relative; aspect-ratio: var(--aa-map-ratio, 4/3); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); overflow: hidden; } .aa-map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .aa-map__frame--placeholder { display: grid; place-items: center; color: #4d5866; font-size: 14px; } .aa-map__link-wrap { margin: 12px 0 0; } .aa-map__link { color: var(--wp--preset--color--primary); font-size: 14px; font-weight: 700; text-decoration: none; } .aa-map__link:hover, .aa-map__link:focus-visible { text-decoration: underline; } /* --- Virtual tour (akadimia/virtual-tour) ----------------------------- */ .aa-vtour { box-sizing: border-box; } .aa-vtour__heading { margin: 0 0 24px; color: var(--wp--preset--color--primary); font-size: clamp(1.5rem, 1.5vw, 2rem); font-weight: 600; text-align: center; } .aa-vtour__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .aa-vtour__item { margin: 0; min-width: 0; } .aa-vtour__item.is-wide { grid-column: 1 / -1; } .aa-vtour__figure { margin: 0; } .aa-vtour__frame { position: relative; aspect-ratio: var(--aa-vtour-ratio, 16/9); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); overflow: hidden; } .aa-vtour__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .aa-vtour__frame--placeholder { display: grid; place-items: center; color: #4d5866; font-size: 14px; text-align: center; padding: 8px; } .aa-vtour__caption { margin: 12px 0 0; } .aa-vtour__link { color: var(--wp--preset--color--primary); font-size: 14px; font-weight: 700; text-decoration: none; } .aa-vtour__link:hover, .aa-vtour__link:focus-visible { text-decoration: underline; } .aa-vtour__credit { color: #4d5866; font-size: 13px; } .aa-vtour__author { color: inherit; } /* Click-to-load preview: a still and a play control, no third-party request until someone asks for the tour. The control is a link in the markup and a button once view.js has upgraded it, so both are styled here. */ .aa-vtour__frame--preview { display: grid; place-items: center; } .aa-vtour__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .aa-vtour__play { position: relative; /* over the still */ display: inline-flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); margin: 0; padding: 12px 20px 12px 14px; border: 0; border-radius: 999px; background: rgba(13, 32, 53, 0.86); /* navy, so the label holds contrast over any still */ color: #fff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; } .aa-vtour__play:hover, .aa-vtour__play:focus-visible { background: var(--wp--preset--color--primary); } /* Keyboard focus needs an indicator of its own: navy -> brick is the same shift as :hover, and the control sits on a photograph, so a ring that depends on the backdrop is no use. Gold reads against both the pill and the stills. */ .aa-vtour__play:focus-visible { outline: 3px solid var(--wp--preset--color--secondary); outline-offset: 3px; } .aa-vtour__play-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; /* The triangle, drawn rather than fetched. */ clip-path: circle(50%); position: relative; } .aa-vtour__play-icon::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--wp--preset--color--navy); } .aa-vtour__frame--preview:has( .aa-vtour__poster ) { background: var(--wp--preset--color--navy); } /* --- The tour in a window over the page ------------------------------------- A native , so focus, Escape and the inert page behind it are the browser's doing rather than ours. It is sized to the viewport rather than to the block's own ratio: the reason to open it is the room, and the dialog is appended to the body, where the block's --aa-vtour-ratio does not reach. --- */ .aa-vtour-dialog { width: min(1400px, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 0; border-radius: 4px; background: var(--wp--preset--color--navy, #0d2035); color: var(--wp--preset--color--base, #ffffff); overflow: hidden; } .aa-vtour-dialog::backdrop { background: rgba(6, 18, 32, 0.82); } .aa-vtour-dialog__bar { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; } .aa-vtour-dialog__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; } .aa-vtour-dialog__close { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .aa-vtour-dialog__close:hover { border-color: transparent; background: var(--wp--preset--color--primary, #b15235); } /* The window sits on navy, so a focus ring borrowed from the backdrop would be invisible. Gold, as on the play control. */ .aa-vtour-dialog__close:focus-visible { outline: 3px solid var(--wp--preset--color--secondary, #f4b646); outline-offset: 2px; } .aa-vtour-dialog__close span { position: relative; display: block; width: 100%; height: 100%; } .aa-vtour-dialog__close span::before, .aa-vtour-dialog__close span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; } .aa-vtour-dialog__close span::before { transform: rotate(45deg); } .aa-vtour-dialog__close span::after { transform: rotate(-45deg); } .aa-vtour-dialog__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(92vh - 64px); /* the bar */ background: #000; } /* A 16/9 box across a phone held upright is shorter than the figure the tour was opened from, which would make the window pointless. Give it the height the screen actually has. */ @media (max-width: 780px) and (orientation: portrait) { .aa-vtour-dialog__stage { aspect-ratio: 3 / 4; } } /* One per row once two no longer fit side by side. */ @media (max-width: 880px) { .aa-vtour__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } } /* --- Departments (akadimia/directory-grid) ---------------------------- */ .aa-directory, .aa-directory.alignwide { box-sizing: border-box; width: calc( 100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px) ); max-width: 1496px; /* 1400 measure + 48px gutters */ margin-inline: auto; padding: 0 48px 100px; } .aa-directory__eyebrow { margin: 0 0 12px; color: var(--wp--preset--color--primary); font-size: 12px; line-height: normal; letter-spacing: 0.1em; text-transform: uppercase; } .aa-directory__heading { margin: 0 0 40px; color: var(--wp--preset--color--navy); font-size: 30px; font-weight: 600; line-height: 1.2; } /* Cards sit on gold with a 2px gap, so the gold reads as hairlines between. */ .aa-directory__grid { display: grid; grid-template-columns: repeat(var(--aa-directory-cols, 4), minmax(0, 1fr)); gap: 2px; background: var(--wp--preset--color--secondary); } .aa-directory__card { display: block; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); padding: 28px; text-decoration: none; } a.aa-directory__card:hover, a.aa-directory__card:focus-visible { background: #14283f; } .aa-directory__name { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 600; line-height: 1.3; } a.aa-directory__card:hover .aa-directory__name, a.aa-directory__card:focus-visible .aa-directory__name { text-decoration: underline; } .aa-directory__note { display: block; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } .aa-directory__foot { margin: 28px 0 0; color: #4d5866; font-size: 14px; } @media (max-width: 859px) { .aa-pagehead--contact { padding: 40px 20px 32px; } .aa-pagehead--contact .aa-pagehead__title { font-size: 30px; } .aa-contact-top { padding: 48px 20px; grid-template-columns: 1fr; } .aa-directory { padding: 0 20px 64px; } .aa-directory__grid { grid-template-columns: 1fr; } } /* ========================================================================= Publications — matched to Design/mockups/Publications.dc.html. ========================================================================= */ .aa-pubs-cats, .aa-pubs-cats.alignwide { box-sizing: border-box; width: calc( 100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px) ); max-width: 1496px; /* 1400 measure + 48px gutters */ margin-inline: auto; padding: 80px 48px; } /* Nested in the publications wrapper, the section box belongs to the wrapper — otherwise the block's own gutters are counted twice and the columns narrow. */ .aa-pubs-cats .aa-directory, .aa-pubs-cats .aa-directory.alignwide { width: auto; max-width: none; margin-inline: 0; padding: 0; } /* Light card variant: white cards on the hairline colour, as the series grid. */ .aa-directory--light .aa-directory__grid { background: var(--wp--preset--color--border); } .aa-directory--light .aa-directory__card { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); padding: 36px; } a.aa-directory--light .aa-directory__card:hover, .aa-directory--light a.aa-directory__card:hover, .aa-directory--light a.aa-directory__card:focus-visible { background: var(--wp--preset--color--surface); } .aa-directory__tag { display: block; margin-bottom: 14px; color: var(--wp--preset--color--primary); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; } .aa-directory--light .aa-directory__name { margin-bottom: 14px; color: var(--wp--preset--color--navy); font-size: 20px; font-weight: 600; } .aa-directory__list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #3b4757; } .aa-directory__line { display: block; line-height: 1.5; } /* Recent volumes. */ .aa-volumes, .aa-volumes.alignwide { box-sizing: border-box; width: calc( 100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px) ); max-width: 1496px; margin-inline: auto; padding: 0 48px 100px; } .aa-volumes__head { display: block; margin-bottom: 40px; } .aa-volumes__eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 0.1em; } .aa-volumes__heading { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; } .aa-volumes__grid { gap: 32px; } .aa-volumes__cover { aspect-ratio: 3 / 4; margin-bottom: 16px; } .aa-volumes__title { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; } .aa-volumes__meta { margin-top: 0; font-size: 13px; color: #4d5866; } @media (max-width: 859px) { .aa-pagehead--tall { min-height: 320px !important; } .aa-pagehead--cover .wp-block-cover__inner-container { padding-inline: 20px; } .aa-pagehead--cover .aa-pagehead__title, .aa-pagehead--tall .aa-pagehead__title { font-size: 34px; } .aa-pagehead--cover .aa-pagehead__sub { font-size: 15px; } .aa-pubs-cats, .aa-pubs-cats.alignwide { padding: 48px 20px; } .aa-volumes, .aa-volumes.alignwide { padding: 0 20px 64px; } .aa-volumes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================= Awards — matched to Design/mockups/Awards.dc.html. Fixed px on the mockup's 860px breakpoint. Colour and typeface stay on the theme's tokens (MOCKUP-FIDELITY.md), so the mockup's #12243C card and #C0603A top rule are navy and primary here. ========================================================================= */ :is( .aa-awardspage, .aa-scholpage ) :where( .aa-introstats, .aa-netcards__inner, .aa-entries, .aa-directory, .aa-info ) { box-sizing: border-box; } /* The wrapper is alignfull, so it has already escaped the root padding — each section only has to cap its measure and centre. Repeating the root-padding compensation here would push them wider than the 1400 the mockup uses. */ .aa-awardspage .aa-introstats, .aa-awardspage .aa-netcards__inner, .aa-awardspage .aa-entries, .aa-awardspage .aa-directory--light, :is( .aa-awardspage, .aa-scholpage ) .aa-info { width: 100%; max-width: 1496px; /* 1400 measure + 48px gutters */ margin-inline: auto; } /* Intro + the two standout figures. */ .aa-introstats { padding: 80px 48px 60px; grid-template-columns: 1.4fr 1fr; gap: 32px; } .aa-introstats .aa-lead { font-size: 19px; line-height: 1.75; max-width: none; } .aa-introstats__figures { gap: 18px; padding-inline-start: 32px; border-inline-start: 1px solid var(--wp--preset--color--border); } .aa-introstats__value { font-size: 30px; font-weight: 400; /* the mockup sets no weight on this figure */ line-height: 1; } .aa-introstats__label { margin-top: 6px; font-size: 14px; line-height: 1.5; } /* Class cards: navy, brick top rule, icon over name and description. */ .aa-awardspage .aa-netcards { background: transparent; padding: 0; } .aa-awardspage .aa-netcards__inner { padding: 0 48px 80px; } .aa-awardspage .aa-netcards__eyebrow { margin: 0 0 12px; font-size: 12px; line-height: normal; letter-spacing: 0.1em; } .aa-awardspage .aa-netcards__title { margin: 0 0 32px; font-size: 30px; font-weight: 600; line-height: 1.2; } .aa-awardspage .aa-netcards__grid { /* The PSD design insets this grid to 80% of its container; the mockup runs it the full width of the section. */ width: 100%; margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .aa-awardspage .aa-netcards__card { background: #12243c; border-top: 3px solid var(--wp--preset--color--primary); padding: 32px 28px 28px; } .aa-awardspage .aa-netcards__icon { width: 44px; height: 44px; margin: 0 0 28px; } .aa-awardspage .aa-netcards__card-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; } .aa-awardspage .aa-netcards__text { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); } /* Announced awards. */ :is( .aa-awardspage, .aa-scholpage ) .aa-entries { width: 100%; max-width: 1496px; margin-inline: auto; } .aa-awardspage .aa-entries { padding: 0 48px 80px; /* Awards listPad */ } .aa-scholpage .aa-entries { padding: 80px 48px; /* Scholarships listPad */ } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__eyebrow { margin: 0 0 12px; font-size: 12px; line-height: normal; letter-spacing: 0.1em; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__heading { margin: 0 0 12px; font-size: 30px; font-weight: 600; line-height: 1.2; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__intro { margin: 0 0 32px; max-width: 760px; font-size: 16px; line-height: 1.7; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__list { gap: 20px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__body { grid-template-columns: 2fr 1fr; gap: 28px; padding: 32px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__tags { gap: 12px; margin-bottom: 12px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__tag { font-size: 11px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__badge { padding: 3px 10px; font-size: 11px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__title { margin: 0 0 12px; font-size: 21px; font-weight: 600; line-height: 1.3; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__text { font-size: 15px; line-height: 1.7; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__meta { gap: 14px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__meta-label { margin-bottom: 4px; font-size: 11px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__meta-value { font-size: 15px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__docs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 10px; background: #fbfaf8; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__doc { gap: 12px; padding: 14px 16px; background: #fbfaf8; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__doc-kind { padding: 4px 7px; font-size: 10px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__doc-label { font-size: 14px; } /* "How to apply" steps: numbered cards on a lighter navy, 2px gaps. */ .aa-directory--steps { background: var(--wp--preset--color--navy); padding: 80px 48px; max-width: none; width: auto; margin-inline: 0; } .aa-directory--steps .aa-directory__rule { display: block; } .aa-directory--steps .aa-directory__heading { margin: 0 0 40px; color: var(--wp--preset--color--base); font-size: 30px; } .aa-directory--steps .aa-directory__grid { max-width: 1400px; margin-inline: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #1d3a5a; } .aa-directory--steps .aa-directory__card { background: #0c2138; padding: 36px; } .aa-directory--steps .aa-directory__tag { margin-bottom: 14px; color: var(--wp--preset--color--secondary); font-size: 12px; letter-spacing: 0.06em; } .aa-directory--steps .aa-directory__name { margin-bottom: 14px; font-size: 19px; font-weight: 600; } .aa-directory--steps .aa-directory__note { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); } /* Laureates: white cards on hairlines. */ .aa-awardspage .aa-directory--light { padding: 0 48px 80px; } .aa-awardspage .aa-directory--light .aa-directory__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aa-awardspage .aa-directory--light .aa-directory__card { padding: 32px; } .aa-awardspage .aa-directory--light .aa-directory__tag { margin-bottom: 12px; font-size: 11px; letter-spacing: 0.08em; } .aa-awardspage .aa-directory--light .aa-directory__name { margin-bottom: 10px; font-size: 19px; } .aa-awardspage .aa-directory--light .aa-directory__note { font-size: 15px; line-height: 1.7; color: #3b4757; } /* Class secretariats. */ :is( .aa-awardspage, .aa-scholpage ) .aa-info { padding: 72px 48px 100px; border-top: 1px solid var(--wp--preset--color--border); } :is( .aa-awardspage, .aa-scholpage ) .aa-info__eyebrow { margin: 0 0 20px; color: var(--wp--preset--color--secondary); font-size: 13px; line-height: normal; letter-spacing: 0.06em; } :is( .aa-awardspage, .aa-scholpage ) .aa-info__grid { grid-template-columns: 1fr 1fr; gap: 40px; } :is( .aa-awardspage, .aa-scholpage ) .aa-info__col-title { margin: 0 0 14px; font-size: 20px; font-weight: 600; } :is( .aa-awardspage, .aa-scholpage ) .aa-info__list { gap: 14px; } :is( .aa-awardspage, .aa-scholpage ) .aa-info__label { font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--contrast); } :is( .aa-awardspage, .aa-scholpage ) .aa-info__value { font-size: 17px; line-height: 1.6; } @media (max-width: 859px) { .aa-introstats { padding: 48px 20px; grid-template-columns: 1fr; } .aa-introstats__figures { padding-inline-start: 0; border-inline-start: 0; } .aa-awardspage .aa-netcards__inner, .aa-awardspage .aa-entries, .aa-awardspage .aa-directory--light { padding: 0 20px 48px; } .aa-awardspage .aa-netcards__grid, :is( .aa-awardspage, .aa-scholpage ) .aa-entries__docs, .aa-awardspage .aa-directory--light .aa-directory__grid, .aa-directory--steps .aa-directory__grid { grid-template-columns: 1fr; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__body { grid-template-columns: 1fr; padding: 24px 20px; } .aa-entries__filter-row { gap: 18px; } :is( .aa-awardspage, .aa-scholpage ) .aa-entries__docs { padding: 8px; } .aa-directory--steps { padding: 48px 20px; } :is( .aa-awardspage, .aa-scholpage ) .aa-info { padding: 48px 20px; } :is( .aa-awardspage, .aa-scholpage ) .aa-info__grid { grid-template-columns: 1fr; } } /* ========================================================================= Scholarships — matched to Design/mockups/Scholarships.dc.html. Shares the entry cards, filters and contact block with Awards (identical in both mockups); what differs is the centred intro, the notice panel and the section paddings. ========================================================================= */ .aa-scholpage .aa-lead-wrap { box-sizing: border-box; width: 100%; max-width: 1096px; /* 1000 measure + 48px gutters */ margin-inline: auto; padding: 80px 48px 60px; text-align: center; } .aa-scholpage .aa-lead-wrap .aa-lead { max-width: none; font-size: 19px; line-height: 1.75; } /* "Πριν υποβάλετε αίτηση" notice. */ .aa-scholpage .aa-checklist { width: 100%; max-width: 1496px; margin-inline: auto; padding: 0 48px 80px; } .aa-scholpage .aa-checklist__panel { padding: 48px; grid-template-columns: 1fr 1.2fr; gap: 40px; } .aa-scholpage .aa-checklist__heading { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.25; } .aa-scholpage .aa-checklist__text { font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.75); } .aa-scholpage .aa-checklist__list { gap: 14px; } .aa-scholpage .aa-checklist__item { gap: 12px; } .aa-scholpage .aa-checklist__tick { font-size: 15px; line-height: 1.6; } .aa-scholpage .aa-checklist__label { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } @media (max-width: 859px) { .aa-scholpage .aa-lead-wrap { padding: 48px 20px; } .aa-scholpage .aa-entries { padding: 48px 20px; } .aa-scholpage .aa-checklist { padding: 0 20px 48px; } .aa-scholpage .aa-checklist__panel { padding: 32px 24px; grid-template-columns: 1fr; } .aa-scholpage .aa-info { padding: 48px 20px; } .aa-scholpage .aa-info__grid { grid-template-columns: 1fr; } } /* A call to action with nowhere to go yet: keep the type, drop every affordance that says "click me" -- no underline, no caret, no pointer. */ .aa-schol__cta.is-inert { cursor: default; text-decoration: none; opacity: 0.72; } /* ========================================================================= Link carets — the "›" that trails a call to action. These sit inside the , so they inherit its underline. A descendant cannot switch an ancestor's text-decoration off (it propagates, and `text-decoration: none` on the child does nothing) — but an atomic inline-level box is never decorated by its ancestor. So display: inline-block is what actually removes the underline; the text-decoration below only guards against a rule setting it directly, as .aa-access__link-caret did. The catch: a flex or grid item is blockified, so inside a display:flex link this inline-block computes to block and the underline comes straight back. A link that carries a caret must not be a flex container. Added a caret in a new block? Add its class here. ========================================================================= */ .aa-access__link-caret, .aa-awards__caret, .aa-explore__action-caret, .aa-fields__caret, .aa-info__caret, .aa-netcards__link-caret, .aa-page-intro__link-caret, .aa-pubs__caret, .aa-schol__caret, .aa-volumes__caret { display: inline-block; text-decoration: none; /* The gap now comes from margin, not from a space in the markup. A space between the label and the caret is part of the link's text, so it was underlined — a short rule running up to the caret, which reads as the caret itself being underlined. */ margin-inline-start: 0.35em; } /* ========================================================================= Phones darken both header overlays. Figma draws the veil at rgba(0,0,0,0.72) (open-menu, node 8:1237) and that holds on desktop. On a phone the 28% show-through slides headlines and photographs under the menu text and breaks it up, so the veil goes to 0.92 there — 8% show-through, an essentially flat ground. This lives at the end of the file on purpose: .aa-search__panel is declared after the earlier mobile block, and a media query adds no specificity, so an override placed before it silently loses. ========================================================================= */ @media (max-width: 781px) { .aa-mm-panel, .aa-search__panel { background-color: rgba(0, 0, 0, 0.92); } } /* ========================================================================= Phone layout corrections. Kept at the end of the file so these win over the section rules above without needing extra specificity. ========================================================================= */ @media (max-width: 781px) { /* The stats sit in the hero's single grid cell, pushed to the bottom edge, which works while the hero is wide. On a phone the copy grows tall enough to reach them and the two overlap. Give the hero a second row so the numbers sit below the text instead of on top of it. */ .aa-hero-banner { grid-template: 1fr auto / 1fr; } .aa-hero-banner__content { grid-area: 1 / 1; } .aa-hero-banner__stats { grid-area: 2 / 1; place-self: end stretch; } /* Long unbroken Greek words in the hero title reached the right edge on narrow screens. Hold the inset and let the title break rather than run into the border. */ .aa-hero-banner__content { padding-inline: 24px; } .aa-hero-banner__title, .aa-hero-banner__text { overflow-wrap: break-word; } /* The header overlay pulls content up by a fixed 80px, but the bar is --aa-mobile-bar (60px) here, so the hero was hauled 20px off the top of the screen and every line inside it sat 20px high. Pull by the actual bar height. */ .page-template-page-home .wp-site-blocks > main { margin-block-start: calc( -1 * var(--aa-mobile-bar) ); } /* Centred on a phone: the hero copy is short and a left rag looks accidental in a narrow column. */ .aa-hero-banner__content { align-items: center; text-align: center; } /* The stats read as a band under the photograph rather than a caption laid over its bottom edge — on a phone the image is too short to carry both. */ .aa-hero-banner__stats { background-color: var(--wp--preset--color--navy); } /* The category row is wider than the screen, and it was being clipped by an ancestor instead of scrolling: a flex child defaults to min-width:auto and so refuses to shrink below its content, which stops its own overflow-x from ever engaging. */ .aa-pubs__body, .aa-pubs__nav { min-width: 0; } .aa-pubs__cats { min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; } .aa-pubs__cat { flex: 0 0 auto; white-space: nowrap; } /* The first section's heading is a 36px Figma value meant for a desktop column; at phone width it swallowed the screen. */ .aa-page-intro__title { font-size: 26px; /* The container's 20px inset is the whole gap, so a long line wraps hard against it and reads as touching the edge. Pull the wrap point in. */ padding-right: 12px; overflow-wrap: break-word; } .aa-page-intro__text { font-size: 16px; padding-right: 0; } .aa-page-intro__eyebrow { font-size: 13px; } } /* ========================================================================= Research centre — Design/mockups/Academy of Athens - Research Centre.html Layout from the design; palette from the theme (MOCKUP-FIDELITY G1/G2): the mockup's warm grey ground and its serif are not carried over. The hero and the sibling band are navy, the breadcrumb and the "all centres" link are gold on navy where that is 9.2:1, and the active tab takes brick. ========================================================================= */ .aa-centre { display: block; /* Core gives an .alignfull child the root padding so its content keeps the page's gutter. This block is a full-bleed band whose inner wrappers set their own inset, so the padding would inset the navy itself. */ padding-inline: 0; } /* --- Hero --------------------------------------------------------------- */ .aa-centre__hero { position: relative; background-color: var(--wp--preset--color--navy); background-size: cover; background-position: center; color: var(--wp--preset--color--base); } /* A photograph needs a scrim or the white type sits on unpredictable tone. */ .aa-centre__hero.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(13, 32, 53, 0.72) 0%, rgba(13, 32, 53, 0.9) 100% ); } .aa-centre__hero-inner { position: relative; max-width: 1400px; margin-inline: auto; padding: clamp(2.5rem, 4.5vw, 9.6rem) clamp(1.5rem, 2.5vw, 5.333rem) clamp(2rem, 3vw, 6.4rem); } .aa-centre__crumbs { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: clamp(0.75rem, 1vw, 2rem); color: var(--wp--preset--color--secondary); font-size: clamp(0.9rem, 0.75vw, 1.6rem); letter-spacing: 0.08em; text-transform: uppercase; } .aa-centre__crumbs a { color: inherit; text-decoration: none; } .aa-centre__crumbs a:hover, .aa-centre__crumbs a:focus-visible { text-decoration: underline; } .aa-centre__title { margin: 0; max-width: 20ch; color: var(--wp--preset--color--base); font-size: clamp(2rem, 3.25vw, 6.933rem); line-height: 1.12; font-weight: 600; } /* On a section page the centre's name sits above the section title, so a visitor always knows which centre they are inside. */ .aa-centre__eyebrow { margin: 0 0 0.5rem; font-size: clamp(0.85rem, 0.78vw, 1.66rem); letter-spacing: 0.06em; text-transform: uppercase; } .aa-centre__eyebrow a { color: var(--wp--preset--color--secondary); text-decoration: none; } .aa-centre__eyebrow a:hover, .aa-centre__eyebrow a:focus-visible { text-decoration: underline; } .aa-centre__section { max-width: 1400px; margin-inline: auto; padding: clamp(2.5rem, 4vw, 8.533rem) clamp(1.5rem, 2.5vw, 5.333rem); } .aa-centre__section .aa-centre__prose { max-width: 72rem; } .aa-centre__line { margin: clamp(0.5rem, 0.75vw, 1.6rem) 0 0; font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.05vw, 2.24rem); color: color-mix( in srgb, #fff 88%, var(--wp--preset--color--navy) ); } /* Switcher: a
, so it works with no JavaScript. */ .aa-centre__switch { position: absolute; right: clamp(1.5rem, 2.5vw, 5.333rem); bottom: clamp(2rem, 3vw, 6.4rem); z-index: 3; } .aa-centre__switch > summary { display: flex; align-items: center; gap: 0.75em; padding: 0.7em 1em; border: 1px solid color-mix( in srgb, #fff 45%, transparent ); color: var(--wp--preset--color--base); font-size: clamp(0.85rem, 0.72vw, 1.55rem); cursor: pointer; list-style: none; } .aa-centre__switch > summary::-webkit-details-marker { display: none; } .aa-centre__switch > summary:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; } .aa-centre__switch-cue { font-weight: 600; } .aa-centre__switch-list { position: absolute; right: 0; z-index: 4; margin: 0.35rem 0 0; padding: 0.5rem 0; min-width: 26rem; max-height: 22rem; overflow-y: auto; list-style: none; background-color: var(--wp--preset--color--navy); border: 1px solid color-mix( in srgb, #fff 25%, transparent ); } .aa-centre__switch-list a { display: block; padding: 0.5em 1em; color: var(--wp--preset--color--base); text-decoration: none; font-size: clamp(0.85rem, 0.72vw, 1.55rem); } .aa-centre__switch-list a:hover, .aa-centre__switch-list a:focus-visible { background-color: color-mix( in srgb, #fff 12%, transparent ); color: var(--wp--preset--color--secondary); } /* 12% white over navy is a 1.43:1 shift. Gold on navy is 9.12:1. */ .aa-centre__switch-list a:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: -2px; } /* --- Section tabs ------------------------------------------------------- */ /* Same strip as the news categories and the section tabs. */ .aa-centre__tabs { border-bottom: 1px solid var(--wp--preset--color--border); background-color: var(--wp--preset--color--base); } .aa-centre__tabs ul { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 0.9vw, 1.4rem) clamp(0.9rem, 1.875vw, 4rem); max-width: 1400px; margin-inline: auto; padding: clamp(1rem, 1.4vw, 2.4rem) clamp(1.5rem, 2.5vw, 5.333rem); list-style: none; } .aa-centre__tabs li { margin: 0; max-width: 100%; } .aa-centre__tab { color: #4d5866; font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .aa-centre__tab:hover, .aa-centre__tab:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; } .aa-centre__tab.is-current { color: var(--wp--preset--color--primary); font-weight: 700; } /* --- Ταυτότητα + facts -------------------------------------------------- */ .aa-centre__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 28%, 34rem); gap: clamp(2rem, 3.5vw, 7.467rem); max-width: 1400px; margin-inline: auto; padding: clamp(2.5rem, 4vw, 8.533rem) clamp(1.5rem, 2.5vw, 5.333rem); } .aa-centre__heading { margin: 0 0 clamp(1rem, 1.5vw, 3.2rem); color: var(--wp--preset--color--navy); font-size: clamp(1.6rem, 2vw, 4.267rem); font-weight: 600; } .aa-centre__prose p { margin: 0 0 1.15em; color: var(--wp--preset--color--contrast); font-size: clamp(1rem, 0.95vw, 2.027rem); line-height: 1.75; } .aa-centre__empty { color: #4d5866; font-style: italic; } .aa-centre__facts dl { margin: 0; border: 1px solid var(--wp--preset--color--border); } .aa-centre__fact { padding: clamp(0.9rem, 1.15vw, 2.453rem) clamp(1rem, 1.35vw, 2.88rem); } .aa-centre__fact + .aa-centre__fact { border-top: 1px solid var(--wp--preset--color--border); } .aa-centre__fact dt { margin: 0 0 0.35em; color: #4d5866; font-size: clamp(0.75rem, 0.62vw, 1.32rem); letter-spacing: 0.09em; text-transform: uppercase; } .aa-centre__fact dd { margin: 0; color: var(--wp--preset--color--contrast); font-size: clamp(0.95rem, 0.9vw, 1.92rem); } .aa-centre__fact dd.is-empty { color: #8a949d; } /* Supervisor, phone, e-mail, website. Underlined as well as coloured, since brick on white clears 4.5:1 but not the 3:1 a colour-only link also needs against the text around it. An address breaks anywhere rather than widening the column it sits in. */ .aa-centre__fact-link { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; } .aa-centre__fact-link:hover, .aa-centre__fact-link:focus-visible { color: var(--wp--preset--color--navy); } /* --- Other centres ------------------------------------------------------ */ .aa-centre__others { background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--base); } .aa-centre__others-inner { max-width: 1400px; margin-inline: auto; padding: clamp(2.5rem, 4vw, 8.533rem) clamp(1.5rem, 2.5vw, 5.333rem); } .aa-centre__rule { display: block; width: 3.5rem; height: 2px; margin-bottom: clamp(1rem, 1.5vw, 3.2rem); background-color: var(--wp--preset--color--secondary); } .aa-centre__others-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 2vw, 4.267rem); } .aa-centre__others-head h2 { margin: 0; /* theme.json gives headings the navy colour; on the navy band that is invisible, so state it. */ color: var(--wp--preset--color--base); font-size: clamp(1.6rem, 2vw, 4.267rem); font-weight: 600; } .aa-centre__all { color: var(--wp--preset--color--secondary); text-decoration: none; font-size: clamp(0.9rem, 0.78vw, 1.66rem); } .aa-centre__all:hover, .aa-centre__all:focus-visible { text-decoration: underline; } .aa-centre__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .aa-centre__card { padding: clamp(1.25rem, 1.75vw, 3.733rem) clamp(1rem, 1.5vw, 3.2rem); border-left: 1px solid color-mix( in srgb, #fff 22%, transparent ); } .aa-centre__card:last-child { border-right: 1px solid color-mix( in srgb, #fff 22%, transparent ); } .aa-centre__card-class { margin: 0 0 0.6em; color: var(--wp--preset--color--secondary); font-size: clamp(0.72rem, 0.6vw, 1.28rem); letter-spacing: 0.09em; text-transform: uppercase; } .aa-centre__card-title { margin: 0; font-size: clamp(1rem, 1vw, 2.133rem); line-height: 1.35; font-weight: 600; } .aa-centre__card-title a { color: var(--wp--preset--color--base); text-decoration: none; } .aa-centre__card-title a:hover, .aa-centre__card-title a:focus-visible { color: var(--wp--preset--color--secondary); text-decoration: underline; } @media (max-width: 781px) { .aa-centre__hero-inner { padding: 32px 24px 96px; } .aa-centre__title { font-size: 28px; max-width: none; } .aa-centre__line { font-size: 15px; } .aa-centre__switch { right: 24px; bottom: 24px; left: 24px; } .aa-centre__switch-list { min-width: 0; width: 100%; } .aa-centre__body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 24px; } .aa-centre__heading, .aa-centre__others-head h2 { font-size: 22px; } .aa-centre__prose p { font-size: 16px; } .aa-centre__others-inner { padding: 32px 24px; } /* One column: the vertical rules that separate four cards become a stack of horizontal ones. */ .aa-centre__grid { grid-template-columns: minmax(0, 1fr); } .aa-centre__card { border-left: 0; border-top: 1px solid color-mix( in srgb, #fff 22%, transparent ); padding-inline: 0; } .aa-centre__card:last-child { border-right: 0; border-bottom: 1px solid color-mix( in srgb, #fff 22%, transparent ); } } /* ========================================================================= Imported archive content The pages migrated from the old site are raw HTML, not blocks. They carry that site's own conventions — data-align on images, text-align-justify and text-align-center on paragraphs — none of which meant anything here, so every image rendered as a full-width block and the text ran underneath it in one long column. Scoped to .aa-imported .entry-content so it only touches migrated prose, never the block-built pages. ========================================================================= */ /* A 1280px measure is far too wide to read comfortably. Narrowing the layout variable moves the constrained children in with it, rather than fighting each one. */ .aa-imported .entry-content { --wp--style--global--content-size: 72rem; } /* An imported body can still carry a block — a map under an address, say — and a theme block names every element it owns with an aa- class and brings its own spacing, colour and scale. These prose rules stop at that boundary; migrated markup carries no classes of its own, so nothing real is excluded. */ .aa-imported .entry-content p:not([class*="aa-"]) { margin: 0 0 1.15em; line-height: 1.75; } .aa-imported .entry-content h2:not([class*="aa-"]), .aa-imported .entry-content h3:not([class*="aa-"]) { margin: 1.8em 0 0.6em; color: var(--wp--preset--color--navy); line-height: 1.25; } .aa-imported .entry-content h2:not([class*="aa-"]) { font-size: clamp(1.45rem, 1.6vw, 3.413rem); } .aa-imported .entry-content h3:not([class*="aa-"]) { font-size: clamp(1.2rem, 1.25vw, 2.667rem); } .aa-imported .entry-content h2:first-child:not([class*="aa-"]), .aa-imported .entry-content h3:first-child:not([class*="aa-"]) { margin-top: 0; } /* Imported prose is full of bare DOIs and long URLs used as link text. They have no break opportunity, so on a phone they push the page sideways. */ .aa-imported .entry-content, .aa-person .entry-content { overflow-wrap: break-word; } .aa-imported .entry-content a:not([class*="aa-"]) { color: var(--wp--preset--color--primary); /* theme.json sets elements.link to textDecoration:none with the underline only on hover/focus. Brick #b15235 against this body text is 2.95:1 — just under the 3:1 that WCAG 1.4.1 requires before colour alone may identify a link, and far worse against the muted body colours. There are ~2,400 links in migrated prose, so they get a permanent underline. Scoped to .aa-imported, which the theme sets only on migrated bodies, and away from the aa- classes a theme block owns, so no block UI is touched. */ /* !important because 19 anchors across 2 imported posts carry an inline style="text-decoration:none" paste artifact, and an inline style beats any author rule. Stripping those from post_content is a content fix; until then the cue has to win here. */ text-decoration: underline !important; text-underline-offset: 0.15em; } .aa-imported .entry-content ul, .aa-imported .entry-content ol { margin: 0 0 1.15em; padding-left: 1.4em; line-height: 1.7; } .aa-imported .entry-content li { margin-bottom: 0.35em; } .aa-imported .entry-content img { max-width: 100%; height: auto; } /* The old site's alignment attributes. WordPress's constrained layout sets margin-inline: auto !important on every child, which would drag a floated image back to the centre, so the float margins have to answer in kind. */ .aa-imported .entry-content img[data-align="right"] { float: right; margin: 0.4rem 0 1.5rem 2rem !important; } .aa-imported .entry-content img[data-align="left"] { float: left; margin: 0.4rem 2rem 1.5rem 0 !important; } .aa-imported .entry-content img[data-align="center"] { display: block; margin: 2rem auto !important; } .aa-imported .entry-content .text-align-justify { text-align: justify; text-justify: inter-word; } .aa-imported .entry-content .text-align-center { text-align: center; } /* Tables arrive unstyled and are usually wider than the column. */ .aa-imported .entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 0.95em; } .aa-imported .entry-content th, .aa-imported .entry-content td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--wp--preset--color--border); text-align: start; vertical-align: top; } .aa-imported .entry-content th { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); } .aa-imported .entry-content :is( table, pre ) { display: block; max-width: 100%; overflow-x: auto; } @media (max-width: 781px) { /* A 300px image floated beside text leaves a column too narrow to read, so the floats come off and the images run full width. */ .aa-imported .entry-content img[data-align="right"], .aa-imported .entry-content img[data-align="left"], .aa-imported .entry-content img[data-align="center"] { float: none; display: block; width: 100%; margin: 1.25rem 0 !important; } /* Justified text on a narrow measure opens rivers of white space. */ .aa-imported .entry-content .text-align-justify { text-align: start; } } /* A library card with no destination yet: keep the type, drop the affordances that promise a link. */ .aa-lib__link.is-inert { cursor: default; text-decoration: none; opacity: 0.72; } /* -------------------------------------------------------------------------- Personnel — a research centre's staff (single view) The portrait sits beside the biography on a wide screen and above it on a phone; the text is imported HTML, so it is left to flow around the float. -------------------------------------------------------------------------- */ /* A fixed 3:4 frame. The portraits were sent by eighty different people and range from 180x222 to 2055x2560 — between 0.67 and 0.81 wide — so left to themselves they gave every profile a differently shaped photo. The frame holds the shape and the image fills it; the crop is taken off the bottom rather than the middle, because a portrait puts the face high. */ .aa-person__photo { float: left; width: 220px; aspect-ratio: 3 / 4; margin: 0.35rem 2rem 1.25rem 0; shape-margin: 1rem; overflow: hidden; border-radius: var(--wp--preset--border-radius--md, 6px); background-color: var(--wp--preset--color--surface); } .aa-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .aa-person .entry-content::after { content: ""; display: block; clear: both; } .aa-person__rank { margin-block: 0 1.5rem; color: var(--wp--preset--color--primary, #0b2545); font-size: 1.0625rem; } .aa-person__files { margin-block: 0.5rem 0; padding-inline-start: 1.25rem; } .aa-person__files li { margin-block: 0.35rem; } /* A researcher's details, from the form the Academy sends them. Cleared past the portrait: the photo floats, and on a short biography the rows would otherwise wrap into the narrow gutter beside it. */ .aa-person__meta { clear: left; margin: clamp(2rem, 2.5vw, 5.333rem) 0 0; padding-top: clamp(1.25rem, 1.458vw, 3.111rem); border-top: 1px solid var(--wp--preset--color--border); } .aa-person__meta-title { margin: 0 0 clamp(0.75rem, 0.833vw, 1.778rem); color: var(--wp--preset--color--navy); font-size: clamp(1rem, 1.042vw, 2.222rem); font-weight: 700; line-height: 1.3; } .aa-person__list { margin: 0; } /* Term beside value on a wide screen, stacked on a narrow one. The row is its own grid rather than the list being one, so a value that runs to several lines keeps its term aligned to the top of it. */ .aa-person__row { display: grid; grid-template-columns: minmax(9rem, 14%) 1fr; gap: 0 clamp(0.75rem, 0.833vw, 1.778rem); padding-block: clamp(0.45rem, 0.521vw, 1.111rem); border-bottom: 1px solid var(--wp--preset--color--border); } .aa-person__row:last-child { border-bottom: 0; } .aa-person__term { margin: 0; color: var(--wp--preset--color--navy); font-weight: 600; } .aa-person__value { margin: 0; overflow-wrap: break-word; } /* The focus ring is drawn here rather than left to the underline the theme adds on focus: an underline alone is also the hover cue, so on its own it does not tell the keyboard where it is. */ .aa-person__value a:focus-visible, .aa-person__links a:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .aa-person__fields, .aa-person__links { display: flex; flex-wrap: wrap; gap: clamp(0.35rem, 0.417vw, 0.889rem) clamp(0.5rem, 0.625vw, 1.333rem); margin: 0; padding: 0; list-style: none; } /* Keywords, not links: the pill is the only thing that separates one from the next, so it carries no colour a link would. */ .aa-person__field { padding: 0.2em 0.7em; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); } /* Wider apart than the keyword pills: these are underlined, and at the pills' spacing three of them read as one underlined run. */ .aa-person__links { column-gap: clamp(1rem, 1.25vw, 2.667rem); } .aa-person__links a { text-decoration: underline; } @media (max-width: 781px) { .aa-person__row { grid-template-columns: 1fr; gap: 0.15rem; } } @media (max-width: 781px) { .aa-person__photo { float: none; width: min(220px, 60%); margin-inline: 0 0; } } /* Personnel listing. Only a sixth of the records carry a portrait, so the cards lead with the name instead — a photo on one card in six made the grid ragged. */ .aa-peoplegrid .wp-block-post-template { /* Track width is capped at 100% so a narrow screen drops to one column instead of keeping three and pushing the page sideways. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2.25rem 2rem; } /* A grid item is min-width:auto by default, so one unbreakable e-mail address in a summary was widening its whole column past the screen. */ .aa-peoplegrid .wp-block-post-template > li { min-width: 0; } .aa-peoplecard { overflow-wrap: break-word; display: flex; flex-direction: column; gap: 0.35rem; padding-block-end: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-peoplecard__name a { color: var(--wp--preset--color--primary, #0b2545); text-decoration: none; } .aa-peoplecard__name a:hover, .aa-peoplecard__name a:focus-visible { text-decoration: underline; } .aa-peoplecard__role { color: var(--wp--preset--color--accent, #a4343a); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; } .aa-peoplecard__role a { color: inherit; text-decoration: none; } .aa-peoplecard__bio { margin-block: 0.35rem 0; line-height: 1.6; } /* -------------------------------------------------------------------------- Buildings — one page per address, with its map and what it houses -------------------------------------------------------------------------- */ .aa-place__address { margin-block: 0 1.5rem; color: var(--wp--preset--color--primary, #0b2545); font-size: 1.125rem; font-weight: 600; } .aa-place .aa-map { margin-block: 0 2rem; } .aa-place ul { margin-block: 0.35rem 1.5rem; padding-inline-start: 1.25rem; } .aa-place li { margin-block: 0.35rem; } /* A section page with no text of its own lists what sits beneath it. */ .aa-section-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem 2rem; } .aa-section-list__item { min-width: 0; padding-block-end: 0.75rem; border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-section-list__item a { color: var(--wp--preset--color--primary, #0b2545); font-size: 1.0625rem; text-decoration: none; } .aa-section-list__item a:hover, .aa-section-list__item a:focus-visible { text-decoration: underline; } /* -------------------------------------------------------------------------- Section tabs — the rest of the section, across the top of an imported page. Set like the news category strip (.aa-newstabs): small uppercase links that wrap, the one you are on in the brand colour, one hairline under the lot. -------------------------------------------------------------------------- */ /* The strip sits above the content group, which brings its own top padding — so the wrapper supplies the space under the hero and the strip supplies none under itself. This puts it in exactly the box .aa-newsbody gives the news categories: a wide child of
, not of the padded content group. */ .aa-sectiontabs-wrap { box-sizing: border-box; /* The same inset .aa-newsbody gives the news categories, so the two strips start on the same line. */ padding-inline: clamp(1.25rem, 2.5vw, 5.333rem); } /* Spacing hangs off the strip, not its wrapper: the wrapper is in the template for every page, and most pages are not part of a section — an empty box with padding would push every one of them down. */ .aa-sectiontabs-wrap .aa-sectiontabs { margin-top: var(--wp--preset--spacing--60); margin-bottom: 0; } .aa-sectiontabs { margin-bottom: clamp(1.5rem, 2.083vw, 4.444rem); padding-bottom: clamp(0.75rem, 1.042vw, 2.222rem); border-bottom: 1px solid var(--wp--preset--color--border); } .aa-sectiontabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 0.9vw, 1.4rem) clamp(0.9rem, 1.875vw, 4rem); } .aa-sectiontabs li { margin: 0; max-width: 100%; } .aa-sectiontabs__tab { color: #4d5866; font-size: clamp(0.85rem, 0.781vw, 1.667rem); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .aa-sectiontabs__tab:hover, .aa-sectiontabs__tab:focus-visible { color: var(--wp--preset--color--primary); text-decoration: underline; } .aa-sectiontabs__tab.is-current { color: var(--wp--preset--color--primary); font-weight: 700; } /* -------------------------------------------------------------------------- Accordions in imported prose. The migrated pages use native
/ — Συμβούλια - Επιτροπές alone has twenty-five. They work with no script, but unstyled they were a stack of hairline rows with the browser's own triangle, indistinguishable from a bullet list. -------------------------------------------------------------------------- */ .entry-content details:not(.aa-centre__switch) { border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .entry-content details:not(.aa-centre__switch) > summary { position: relative; display: block; /* removes the browser's own marker in every engine */ padding: 1.1em 2.5rem 1.1em 0; color: var(--wp--preset--color--navy, #0b2545); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; } .entry-content details:not(.aa-centre__switch) > summary::-webkit-details-marker { display: none; } /* The chevron, drawn from a rotated corner so it needs no image. */ .entry-content details:not(.aa-centre__switch) > summary::after { content: ""; position: absolute; inset-inline-end: 0.5rem; top: 1.5em; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform 0.2s ease; } .entry-content details:not(.aa-centre__switch)[open] > summary::after { transform: translateY(-25%) rotate(-135deg); } .entry-content details:not(.aa-centre__switch) > summary:hover, .entry-content details:not(.aa-centre__switch) > summary:focus-visible, .entry-content details:not(.aa-centre__switch)[open] > summary { color: var(--wp--preset--color--primary, #a4343a); } .entry-content details:not(.aa-centre__switch) > .details-wrapper, .entry-content details:not(.aa-centre__switch) > div { padding-block: 0 1.35rem; } @media (prefers-reduced-motion: reduce) { .entry-content details:not(.aa-centre__switch) > summary::after { transition: none; } } /* -------------------------------------------------------------------------- Printed catalogue — series strip, filters, and the volumes that match. The series strip reuses .aa-sectiontabs so it reads like every other tab row on the site; only the spacing below it differs. -------------------------------------------------------------------------- */ .aa-publist__series { margin-bottom: clamp(1.25rem, 1.6vw, 2.25rem); } .aa-publist__within { margin: 0 0 clamp(1rem, 1.4vw, 2rem); color: var(--wp--preset--color--primary, #b15235); font-size: 0.9375rem; font-weight: 600; } /* --- Filters ------------------------------------------------------------ */ .aa-publist__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem clamp(1rem, 1.6vw, 2rem); align-items: end; margin-bottom: clamp(1.25rem, 1.8vw, 2.5rem); padding-bottom: clamp(1.25rem, 1.8vw, 2.5rem); border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-publist__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; min-width: 0; } .aa-publist__field label { color: var(--wp--preset--color--navy, #0b2545); font-size: 0.78125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .aa-publist__field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 0.7em 0.85em; border: 1px solid var(--aa-field-border, #767f8c); border-radius: 2px; background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #1c1c1c); font: inherit; font-size: 0.9375rem; } .aa-publist__field input:focus-visible { outline: 2px solid var(--wp--preset--color--primary, #b15235); outline-offset: 1px; } .aa-publist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0; } .aa-publist__submit { padding: 0.75em 1.6em; border: 0; border-radius: 2px; background: var(--wp--preset--color--navy, #0b2545); color: var(--wp--preset--color--base, #fff); font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } .aa-publist__submit:hover, .aa-publist__submit:focus-visible { background: var(--wp--preset--color--primary, #b15235); } .aa-publist__clear { color: var(--wp--preset--color--primary, #b15235); font-size: 0.875rem; } /* --- Results ------------------------------------------------------------ */ .aa-publist__count { margin: 0 0 clamp(1rem, 1.4vw, 2rem); color: #4d5866; font-size: 0.875rem; } .aa-publist__items { list-style: none; margin: 0; padding: 0; } .aa-publist__item { padding-block: clamp(1.25rem, 1.6vw, 2.25rem); border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-publist__item:first-child { border-top: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-publist__title { margin: 0 0 0.4rem; overflow-wrap: break-word; font-size: clamp(1.05rem, 1.05vw, 1.35rem); font-weight: 600; line-height: 1.35; } .aa-publist__title a { color: var(--wp--preset--color--navy, #0b2545); text-decoration: none; } .aa-publist__title a:hover, .aa-publist__title a:focus-visible { color: var(--wp--preset--color--primary, #b15235); text-decoration: underline; } .aa-publist__facts { margin: 0 0 0.5rem; overflow-wrap: break-word; color: #4d5866; font-size: 0.875rem; } .aa-publist__excerpt { margin: 0 0 0.6rem; max-width: 62rem; /* Bibliographic descriptions run ISBNs and long titles together with no break opportunity; without this they push the page sideways on a phone. */ overflow-wrap: break-word; color: color-mix( in srgb, var(--wp--preset--color--contrast, #1c1c1c) 88%, #fff ); font-size: 0.9375rem; line-height: 1.6; } .aa-publist__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin: 0; font-size: 0.9375rem; } .aa-publist__more a { color: var(--wp--preset--color--primary, #b15235); text-decoration: underline; text-underline-offset: 3px; } .aa-publist__price { color: var(--wp--preset--color--navy, #0b2545); font-weight: 700; } .aa-publist__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: clamp(1.5rem, 2vw, 2.75rem); font-size: 0.9375rem; } .aa-publist__page { color: var(--wp--preset--color--primary, #b15235); } .aa-publist__page-of { color: #4d5866; } .aa-publist__empty { margin: clamp(1.5rem, 2vw, 2.75rem) 0; color: #4d5866; } /* The cover beside the record, where the volume has one ----------------------- Most of the catalogue has no cover scan, so the row has to read correctly with the figure absent: the featured-image block renders nothing at all then, and the body — the only item left — takes the full width by itself. A fixed column would have squeezed it instead. --- */ .aa-pubsingle__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(1.5rem, 3vw, 3.5rem); } .aa-pubsingle__cover { flex: 0 0 auto; /* The covers the Academy supplies are small scans — a little over 400px on the long edge for most of them — so the column stops where they stop looking like photographs of paper. */ width: min(100%, 20rem); margin: 0; } .aa-pubsingle__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--preset--color--border, #d8dce2); box-shadow: 0 0.5rem 1.5rem rgba(13, 32, 53, 0.12); } .aa-pubsingle__body { flex: 1 1 24rem; min-width: 0; } /* A volume's catalogue record, under its description. */ .aa-pubfacts { margin-top: clamp(1.5rem, 2vw, 2.75rem); padding-top: clamp(1.25rem, 1.6vw, 2.25rem); border-top: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-pubfacts__list { margin: 0; } .aa-pubfacts__row { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 0.35rem 1.5rem; padding-block: 0.55rem; border-bottom: 1px solid var(--wp--preset--color--border, #e3e6ea); } .aa-pubfacts__row dt { margin: 0; color: #4d5866; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .aa-pubfacts__row dd { margin: 0; min-width: 0; color: var(--wp--preset--color--contrast, #1c1c1c); font-size: 0.9375rem; overflow-wrap: break-word; } .aa-pubfacts__back { margin: clamp(1.25rem, 1.6vw, 2.25rem) 0 0; font-size: 0.9375rem; } @media (max-width: 600px) { .aa-pubfacts__row { grid-template-columns: 1fr; gap: 0.15rem; } } /* A named service in the access list links out to it. */ .aa-access__item-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .aa-access__item-title a:hover, .aa-access__item-title a:focus-visible { color: var(--wp--preset--color--primary, #b15235); } /* Embedded tours and 3-D models arrive with the width and height they had on the old site, which is wider than a phone. Let them scale to the column. */ .entry-content iframe { display: block; max-width: 100%; width: 100%; aspect-ratio: 16 / 10; height: auto; margin-block: 0 1.5rem; border: 0; } /* Sub-series of the selected series, under the main strip. Quieter than the tabs above so the two rows read as a hierarchy rather than as rivals. */ .aa-publist__subseries { margin: calc(-1 * clamp(0.5rem, 0.8vw, 1rem)) 0 clamp(1.25rem, 1.6vw, 2.25rem); } .aa-publist__subseries ul { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(0.75rem, 1.2vw, 1.75rem); margin: 0; padding: 0; list-style: none; } .aa-publist__subseries li { margin: 0; max-width: 100%; } .aa-publist__sub { display: inline-flex; align-items: baseline; gap: 0.4rem; color: #4d5866; font-size: 0.875rem; text-decoration: none; overflow-wrap: break-word; } .aa-publist__sub:hover, .aa-publist__sub:focus-visible { color: var(--wp--preset--color--primary, #b15235); text-decoration: underline; } .aa-publist__sub.is-current { color: var(--wp--preset--color--primary, #b15235); font-weight: 700; } .aa-publist__sub-count { color: #8a93a0; font-size: 0.78125rem; font-variant-numeric: tabular-nums; }