/* ========================================================================== SMSTSD theme — the ONLY stylesheet we author (CLAUDE.md rule 4). Loaded last, after Crafto's vendors/style/responsive and the base-demo elearning.css. Crafto is 100% CSS-custom-property driven, so per-page brand colour is a matter of redefining --base-color on a body-level class. These overrides sit on body.level-* / body.dept-* (specificity 0,1,1) so they beat elearning.css, which redefines the same custom properties on :root (0,1,0). ========================================================================== */ /* Fonts (Google Sans — the digital brand font, via Google Fonts) + neutral. Set on the level classes so --alt-font beats elearning.css's :root override to 'Space Grotesk'. Google Fonts serves weights 400–700 only: no fw-300/800. */ body.level-faculty, body.dept-marine, body.dept-sustainable { --primary-font: 'Google Sans', sans-serif; --alt-font: 'Google Sans', sans-serif; --core-neutral: #C1B8AC; } /* Department colour tokens — defined once, used by body.dept-* below and by the Home department boxes (which show both colours on a faculty page). */ :root { --marine-color: #1731CF; /* Marine — Ocean Blue */ --sustainable-color: #E3F519; /* Sustainable — Vibrant Yellow */ } /* Brand accent per level — drives .bg-base-color, .text-base-color, .btn-base-color, link hover, etc. body.dept-* is a COLOUR SCHEME, not a department slug: a department picks one in the admin (DepartmentPage → Brand → Colour scheme), and the value must match a block here. Adding a scheme means adding it to DEPARTMENT_COLOUR_SCHEMES in models.py and adding, below, its --base-color, its .btn-base-color text colour, its .dept-box-* / .dept-mark-* rules, and — if it is light, as the yellow is — its .bg-base-color text colour, dept-nav variant and light-header rules. */ body.level-faculty { --base-color: #009681; } /* Faculty — Ocean Teal */ body.dept-marine { --base-color: var(--marine-color); } body.dept-sustainable { --base-color: var(--sustainable-color); } /* Button text on .btn-base-color: elearning.css forces --dark-gray. Teal/blue need white for contrast; yellow keeps dark text. */ body.level-faculty .btn.btn-base-color, body.dept-marine .btn.btn-base-color { color: #fff; } body.dept-sustainable .btn.btn-base-color { color: var(--dark-gray); } /* Link hover uses the brand accent (elearning.css sets it to --dark-gray). */ body.level-faculty a:hover, body.dept-marine a:hover, body.dept-sustainable a:hover { color: var(--base-color); } /* Vibrant Yellow has poor contrast on white — keep dark text on yellow backgrounds (brand rule): banners, pills, overlays on the yellow department. */ body.dept-sustainable .bg-base-color { color: var(--dark-gray); } /* -------------------------------------------------------------------------- Department sub-nav (includes/dept_nav.html). Client, 2026-09-24: the bar takes the **department colour** and sits flush under the banner, so banner + sub-nav read as one coloured block instead of a white strip below it. Under the photo banners (news article, research area, module) it reads as a department-colour strip. The department name that used to sit at the left was removed as a repetition of the banner heading — "Overview" carries its link. The active item is marked by weight + an underline, never colour alone. All department-page CSS lives here, never inline or elsewhere. -------------------------------------------------------------------------- */ .dept-nav { background-color: var(--base-color); border-top: 1px solid rgba(255, 255, 255, 0.15); } /* One row that scrolls sideways whenever the items do not fit — at any width, not below a breakpoint (client, 2026-09-25: on an iPad mini in landscape, 1133px, the six Marine items wrapped and "News" dropped to a second row). The centring is done with auto margins on the first and last item rather than justify-content: center, on purpose: auto margins share out spare space while there is some and collapse to 0 the moment the row overflows, so the items are centred while they fit and the first one is still reachable at scrollLeft 0 when they do not. justify-content: center would push it out of reach. */ .dept-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dept-nav ul::-webkit-scrollbar { display: none; } .dept-nav li { flex: 0 0 auto; } .dept-nav li:first-child { margin-left: auto; } .dept-nav li:last-child { margin-right: auto; } .dept-nav a { display: block; padding: 14px 18px; font-family: var(--alt-font); font-weight: 500; color: #fff; border-bottom: 2px solid transparent; white-space: nowrap; } /* body.dept-* prefix: the global `body.dept-marine a:hover { color: var(--base-color) }` is (0,2,2) and would otherwise paint these links the bar's own colour. */ body.level-dept .dept-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.55); } body.level-dept .dept-nav a.is-active { font-weight: 700; border-bottom-color: #fff; } /* Sustainable Development: dark text on Vibrant Yellow (brand rule — never white or thin light lines on yellow). */ body.dept-sustainable .dept-nav { border-top-color: rgba(0, 0, 0, 0.12); } body.dept-sustainable .dept-nav a { color: var(--dark-gray); } body.dept-sustainable .dept-nav a:hover { color: var(--dark-gray); border-bottom-color: rgba(0, 0, 0, 0.4); } body.dept-sustainable .dept-nav a.is-active { border-bottom-color: var(--dark-gray); } /* White variant (client, 2026-09-24): the four pages whose banner is a photograph — news article, research area, module — set `photo_banner` in the view. A department-colour bar under a photo reads as an unrelated stripe, so there the bar keeps the white treatment and the accent goes back to the department colour. */ .dept-nav-light .dept-nav { background-color: #fff; border-top: none; border-bottom: 1px solid var(--extra-medium-gray); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } .dept-nav-light .dept-nav a { color: var(--dark-gray); } body.level-dept .dept-nav-light .dept-nav a:hover, body.level-dept .dept-nav-light .dept-nav a.is-active { color: var(--base-color); border-bottom-color: var(--base-color); } /* Vibrant Yellow is never text or a thin line on white (brand rule) — fall back to dark. */ body.dept-sustainable .dept-nav-light .dept-nav a:hover, body.dept-sustainable .dept-nav-light .dept-nav a.is-active { color: var(--dark-gray); border-bottom-color: var(--dark-gray); } /* Phones/tablets: tighter padding so more of the row is visible at once, and the first item flush with the container edge (at these widths the row always overflows, so it is always left-anchored). The scrolling itself is in the base rules above and applies at every width. */ @media (max-width: 991px) { .dept-nav a { padding: 12px 14px; } .dept-nav li:first-child a { padding-left: 0; } } /* -------------------------------------------------------------------------- Page hero banner. Crafto's navbar is position:fixed (~84px), so the first section needs a fixed top offset. Crafto's numeric .pt-* utilities are percentage-based (collapse on mobile), so we use an explicit helper here. Reduced on client feedback (2026-09-24) from 150/70 and 120/50 to shorten every inner-page banner — see NOTES.md. The top value must stay clear of the navbar: 120 - 84 leaves a 36px gap above the title on desktop. -------------------------------------------------------------------------- */ .page-hero { padding-top: 120px; padding-bottom: 45px; } @media (max-width: 991px) { .page-hero { padding-top: 110px; padding-bottom: 40px; } } /* -------------------------------------------------------------------------- Brand logos (real SMSTSD/CUT SVGs). Crafto caps navbar logos at 46px and toggles default↔alt on sticky; we only cap the height (never set width, or the hidden logo's width:0 toggle breaks). Footer logo is not toggled. -------------------------------------------------------------------------- */ header .navbar-brand img { max-height: 42px; } /* NB: the faculty footer lockup actually renders at 39px — elearning.css's `footer .footer-logo img` (0,1,2) outranks this selector (0,1,1). Left as is; 39px is the intended footer size. See NOTES.md. */ .footer-logo img { max-height: 42px; width: auto; } /* Cyprus University of Technology logo in the footer bottom bar (includes/footer.html). Its own class, not .footer-logo, and at the same specificity as elearning.css's `footer .footer-logo img` so the height here is the one that applies. The wordmark is set on three lines, so it needs more height than the single-line faculty lockup to stay legible at this size. */ footer .footer-university-logo img { max-height: 56px; width: auto; } footer .footer-university-logo { transition: opacity 0.3s ease; } footer .footer-university-logo:hover { opacity: 0.7; } /* Home mission photo (pages/home.html): the full institutional lockup sits over the image, so it uses the white artwork on a darkened photo. The lockup is ~7.75:1, so width is what sizes it — cap it short of the padding so it never touches the edges of the frame. */ .mission-photo-logo { width: 100%; max-width: 340px; height: auto; } /* The photo under it: Crafto's stand-ins are all 16:9, which leaves the column half empty next to a tall text block — cropped to 4:5 so the two columns carry similar weight. Goes back to 3:2 when the columns stack. Same pattern as .objectives-image. */ .mission-photo { aspect-ratio: 4 / 5; object-fit: cover; } @media (max-width: 991px) { .mission-photo { aspect-ratio: 3 / 2; } } /* -------------------------------------------------------------------------- Yellow department header. Where the hero is Vibrant Yellow the header uses Crafto's header-light variant (class set in includes/header.html) — dark links and icons — and the black logo. **Not on pages whose banner is a photograph** (`body.dept-photo-banner`, from the view's `photo_banner`): dark links over a dark image are unreadable, which is what the Sustainable programme page showed. Sticky state is unchanged (dark on white). -------------------------------------------------------------------------- */ body.dept-sustainable:not(.dept-photo-banner) header .navbar-brand .default-logo { visibility: hidden; opacity: 0; width: 0; } body.dept-sustainable:not(.dept-photo-banner) header .navbar-brand .alt-logo { visibility: visible; opacity: 1; width: auto; } body.dept-sustainable:not(.dept-photo-banner) header .navbar .navbar-nav .dropdown-toggle { color: var(--dark-gray); } /* -------------------------------------------------------------------------- News owner badge (includes/news_card.html). News belongs either to one department or to the Faculty, and the card says which: a filled chip on the image, top-left, carrying the owner's brand colour AND its name — never the colour on its own. Yellow keeps dark text (brand rule); teal and blue take white. The "placeholder" tag sits bottom-right, so they never collide. -------------------------------------------------------------------------- */ .news-owner { position: absolute; top: 12px; left: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 3px; font-family: var(--alt-font); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-owner-faculty { background-color: #009681; color: #fff; } /* Ocean Teal */ .news-owner-marine { background-color: var(--marine-color); color: #fff; } .news-owner-sustainable { background-color: var(--sustainable-color); color: var(--dark-gray); } /* -------------------------------------------------------------------------- Pagination (includes/news_grid.html, .pagination-style-01). Crafto strips the background from the first and last .page-item, assuming they are always the prev/next arrows -- its demo always renders both. Ours are conditional (no "previous" on page 1, no "next" on the last), so the active number can land first or last and Crafto's rule leaves it white on transparent: invisible. Restore its own active style; same specificity, and theme.css loads last. */ .pagination-style-01 .page-item.active .page-link { background: var(--dark-gray); color: var(--white); } /* -------------------------------------------------------------------------- Home hero slider (includes/hero_slider.html, from demo-business.html 80–149). Overlay, image fit and pagination are Crafto/Bootstrap utilities (.opacity-extra-medium, .object-fit-cover, .swiper-light-pagination). Height is set here rather than with Crafto's .h-*px utilities: the client asked for a banner 25% shorter than the demo's (2026-09-25) and Crafto has no utility at 413 / 375 / 338px — it jumps 400 → 450 → 500. The three values are the demo's 550 / 500 / 450 less a quarter, at Crafto's own md (≤991px) and sm (≤767px) breakpoints, so the proportions of the original are kept. -------------------------------------------------------------------------- */ .hero-slider { height: 413px; } @media (max-width: 991px) { .hero-slider { height: 375px; } } @media (max-width: 767px) { .hero-slider { height: 338px; } } /* From lg up the header is transparent and lies over the top of the slider, so centre the slide's text in the space below it rather than the whole banner — otherwise a two- or three-line title pushes the kicker up under the logo. */ @media (min-width: 992px) { .hero-slider .swiper-slide > .container { padding-top: 90px; } } /* -------------------------------------------------------------------------- Home department boxes (element-sliding-box.html 843–886, style 04). Crafto's main.js drives the hover-expand widths; we only supply the department colour per box, the logo size, and dark text on yellow. Keyed on the department's colour scheme, not its slug. */ .dept-boxes .dept-box-marine .sliding-box-img { background-color: var(--marine-color); } .dept-boxes .dept-box-sustainable .sliding-box-img { background-color: var(--sustainable-color); } /* Title colour lives here, not as a .text-white utility (that carries !important and would defeat the dark-on-yellow brand rule). */ .dept-boxes .dept-box-marine .title { color: #fff; } .dept-boxes .dept-box-sustainable .title { color: var(--dark-gray); } /* never white on yellow */ .dept-boxes .dept-box-logo { width: 70%; max-width: 520px; height: auto; } /* Crafto's tablet fallback assumes 3+ boxes (33.33% each); with two, fill the row. */ @media (max-width: 1199px) and (min-width: 992px) { .dept-boxes .sliding-box-item { width: 50% !important; } } /* -------------------------------------------------------------------------- Home memberships & partnerships strip (home.html). Client, 2026-09-25: one row of tiles that scrolls sideways on iPhone and iPad when they do not all fit, instead of wrapping into a 2- or 3-across grid. The row itself is Bootstrap utilities (.d-flex .flex-nowrap .overflow-x-auto .gap-3); the only thing missing is the tile width, and it is the width that decides when the strip scrolls. `flex: 1 0 150px` means: never shrink below 150px, grow to share any spare width. So the five tiles fill a desktop row with no scrollbar, and as soon as 5 × 150px + gaps exceeds the container (below roughly 850px — every iPad and every phone) the strip scrolls with the tiles at their full size. 150px also leaves part of the next tile showing at both iPhone and iPad widths, which is what tells the reader it scrolls. -------------------------------------------------------------------------- */ .partner-strip > .partner-item { flex: 1 0 150px; } /* Momentum scrolling on iOS, and stop a tile being left half-scrolled. */ .partner-strip { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .partner-strip > .partner-item { scroll-snap-align: start; } /* The focus ring on a tile is drawn 3px outside it (see Accessibility, below), so give the scroller room to show it instead of clipping it. */ .partner-strip { padding-top: 4px; padding-bottom: 4px; } /* -------------------------------------------------------------------------- Home news cards (demo-elearning.html 776–861, "Latest articles"). Isotope dropped — plain Bootstrap grid; .blog-masonry kept only for Crafto's card styling (card-top bar + pointer, badge shadow, image hover zoom). -------------------------------------------------------------------------- */ /* Gradient stand-ins are 1920px wide — crop them to the demo's 600×425 card slot. */ .news-card .blog-image img { width: 100%; aspect-ratio: 600 / 425; object-fit: cover; } /* Category badge sits on --base-color: white text on teal/blue, dark on yellow (brand rule) if the card is reused on the Sustainable pages. Crafto gives .categories-btn a 5px left margin meant for inline lists — not needed here. */ .news-card .categories-btn { color: #fff; margin-left: 0; } .news-card .categories-btn:hover { color: #fff; opacity: 0.85; } body.dept-sustainable .news-card .categories-btn, body.dept-sustainable .news-card .categories-btn:hover { color: var(--dark-gray); } /* The badge and the date sit side by side on one line each, at every width — a wrapped card top makes that card's image start lower than its row's. The tight spot is the 3-across cards at 992–1199px (250px inside Crafto's 20px padding), where "Ανακοινώσεις" (113px) and the date (143px) used to squash onto two lines each; there the padding, gap and date shrink to fit. */ .news-card .card-top { gap: 10px; } .news-card .categories-btn, .news-card .card-top .blog-date { white-space: nowrap; } @media (min-width: 992px) and (max-width: 1199.98px) { .blog-masonry .news-card .card-top { padding-left: 15px; padding-right: 15px; gap: 6px; } .news-card .categories-btn { padding-left: 10px; padding-right: 10px; } .news-card .card-top .blog-date { font-size: 13px; } .blog-masonry .news-card .blog-date i { margin-right: 5px; } } /* Event card (includes/event_card.html): the day/month badge over the image comes from blog-date.html, where Crafto sizes it only inside .blog-date .feature-box — the same size here. Dark text on Vibrant Yellow (brand rule) if the card is ever reused on the Sustainable pages. */ .event-card .post-date { min-width: 64px; padding: 12px 0 10px; } body.dept-sustainable .event-card .post-date { color: var(--dark-gray); } /* -------------------------------------------------------------------------- News detail (pages/department/news_detail.html, from demo-elearning-blog-single-simple.html 104–306). Banner reuses the hero pattern (absolute + Crafto overlay). The in-article image (blocks/captioned_image.html) is an editor's upload of any shape and size, so it is never cropped to the demo's 987×550 slot nor stretched: whole picture, at most its own width and the column's, and no taller than 640px so a portrait does not fill the screen. Cropping a 437×612 portrait into that landscape slot is what made it look cut off and blurry. -------------------------------------------------------------------------- */ .article-image { width: auto; max-width: 100%; height: auto; max-height: 640px; } /* -------------------------------------------------------------------------- Department sub-pages (first: Vision & Objectives, from demo-marketing-services-details.html 122–239). -------------------------------------------------------------------------- */ /* Page-hero text: white on teal/blue, dark on yellow — templates no longer hardcode .text-white on banner headings. */ .page-hero { color: #fff; } .page-hero h1, .page-hero h2 { color: inherit; } body.dept-sustainable .page-hero { color: var(--dark-gray); } /* Brand neutral surface for quote / callout boxes (Crafto's bg-yellow is not ours, and Vibrant Yellow belongs to Sustainable Development only). */ .bg-core-neutral { background-color: var(--core-neutral); color: var(--dark-gray); } /* Sidebar anchors land below the fixed header. Raised to 145px while the sub-nav was sticky (2026-09-24) and back to 110px when that was removed the same day — the bar scrolls away now, so only the header has to be cleared. Objectives image crops to the demo's 543×417 slot. */ .vision-section { scroll-margin-top: 110px; } .objectives-image { aspect-ratio: 543 / 417; object-fit: cover; } /* -------------------------------------------------------------------------- Header: Departments dropdown (elearning "Courses" dropdown-with-icon). Each item shows the department mark (assets/logo/marks/, derived from the lockups) on a chip in the department colour — white mark on blue, black mark on yellow (the yellow mark alone is invisible on white). Crafto's rule for img in this dropdown makes a 45px circle; ours is a rounded square. -------------------------------------------------------------------------- */ .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a img.dept-mark { width: 42px; height: 42px; padding: 9px; border-radius: 8px; margin-right: 15px; flex-shrink: 0; } /* Chip colour, keyed on the department's colour scheme rather than its slug. */ .dept-mark-marine { background-color: var(--marine-color); } .dept-mark-sustainable { background-color: var(--sustainable-color); } /* elearning.css makes this dropdown 335px; our department names need ~400px to sit on one line next to the chip. Measured on the English names; the Greek ones are longer, but they are page titles, so re-measure once the client has renamed the two departments in the admin. */ .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu { width: 400px; } /* -------------------------------------------------------------------------- Department staff (includes/staff_card.html from element-team.html style 03; staff_detail.html from demo-lawyer-attorney-details.html 145–294). Accent text/icons fall back to dark on the yellow department (brand rule). -------------------------------------------------------------------------- */ body.dept-sustainable .staff-role, body.dept-sustainable .staff-icon { color: var(--dark-gray); } /* Vision & Objectives: the objectives box's tick icons and the "On this page" hover are --base-color, which on the yellow department is a thin yellow mark on near-white -- the brand rule forbids exactly that. Dark text instead, as .staff-icon and the card badges above already do. The hover needs !important because Crafto's .text-base-color-hover carries one. */ body.dept-sustainable .objectives-list i { color: var(--dark-gray); } body.dept-sustainable .vision-anchors a:hover { color: var(--dark-gray) !important; } /* Contact card photo slot = the demo's 495×420 image */ .staff-detail-photo { aspect-ratio: 495 / 420; object-fit: cover; } /* -------------------------------------------------------------------------- Department gallery strip (element-image-gallery style 05, Marine landing). The demo's 600×745 portrait tiles: crop the placeholder gradients to that ratio so every slide is the same height. */ .dept-gallery .gallery-box img { width: 100%; aspect-ratio: 600 / 745; object-fit: cover; } /* -------------------------------------------------------------------------- Study Programmes level cards (interactive-banner style 02): the demo's 800×590 crop applied to the landscape placeholder gradients. */ .programme-level-card img { width: 100%; aspect-ratio: 800 / 590; object-fit: cover; } /* -------------------------------------------------------------------------- Programme page tabs (tab-style-04): elearning.css fixes each tab at 25 % (the demo has four); our five share the row instead. Mobile keeps the demo's stacked layout (responsive rule in elearning.css). */ .programme-tabs .nav-tabs .nav-item { width: auto; flex: 1 1 auto; padding: 0 8px; } /* -------------------------------------------------------------------------- Yellow department — hover/overlay text. Crafto's dark-hover (programme cards) and the process-step/research overlays put white text on the accent colour; on Vibrant Yellow that must be dark. */ body.dept-sustainable .hover-box.dark-hover:hover a, body.dept-sustainable .hover-box.dark-hover:hover p, body.dept-sustainable .hover-box.dark-hover:hover span, body.dept-sustainable .hover-box.dark-hover:hover i { color: var(--dark-gray); } body.dept-sustainable .process-step-style-03 .number, body.dept-sustainable .interactive-banner-style-02 .label { color: var(--dark-gray) !important; } /* -------------------------------------------------------------------------- Links inside editor rich text. Crafto leaves an in body copy the same grey as the text around it with no underline, so a link an editor adds is invisible. Every element that wraps |richtext or a body block carries .rich-text; the :not([class]) leaves any styled link or button inside it alone. Dark text plus an underline in the accent: the faculty teal is too light for body-size text on white, and Vibrant Yellow must not be a thin line on white (brand rule), so on the Sustainable pages the underline is dark as well. -------------------------------------------------------------------------- */ .rich-text a:not([class]) { color: var(--dark-gray); font-weight: 500; text-decoration: underline; text-decoration-color: var(--base-color); text-decoration-thickness: 2px; text-underline-offset: 3px; } .rich-text a:not([class]):hover, .rich-text a:not([class]):focus-visible { color: var(--base-color); } body.dept-sustainable .rich-text a:not([class]) { text-decoration-color: currentColor; } body.dept-sustainable .rich-text a:not([class]):hover, body.dept-sustainable .rich-text a:not([class]):focus-visible { color: var(--dark-gray); text-decoration-thickness: 3px; } /* Crafto's style.css removes the marker from every `ul li` (it is written for menus), so a bulleted list typed in the editor showed no bullets. */ .rich-text ul li { list-style: disc; } .rich-text ul ul li { list-style: circle; } .rich-text ol li { list-style: decimal; } /* -------------------------------------------------------------------------- Footer social links (includes/footer.html). Crafto's .elements-social gives each platform class its brand colour on hover, but has no TikTok. Its pink rather than its black, which would vanish on the dark footer. -------------------------------------------------------------------------- */ .elements-social .tiktok:hover { color: #ff0050; } /* -------------------------------------------------------------------------- Accessibility basics (no audit — just not introducing problems). Skip link: off-screen until focused, then a solid bar under the header. Focus: Crafto/elearning strip the outline from tab links, accordion headers, pagination and the search input; restore a visible focus ring on them. */ .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 10000; padding: 10px 16px; border-radius: 4px; background: var(--dark-gray); color: #fff; text-decoration: none; } main:focus { outline: none; } /* Keyboard focus ring on every link, button and field (Crafto strips outlines). currentColor keeps it visible on white header links over the coloured hero as well as on dark links over white; mouse clicks do not show it. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .btn-link:focus-visible, .tab-style-04 .nav-tabs .nav-item .nav-link:focus-visible { /* elearning.css sets outline:none here */ outline: 2px solid currentColor; outline-offset: 3px; box-shadow: none; } /* -------------------------------------------------------------------------- Contact form honeypot (page: contact) A real text input that people never see and bots fill in. Positioned off-screen rather than display:none, which bots skip. See site_pages/models.py. -------------------------------------------------------------------------- */ .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- Cookie consent banner (includes/cookie_banner.html) Crafto styles .cookie-message fixed bottom-right with display:none and shows it from main.js. We drive our own visibility, so we need the shown state. -------------------------------------------------------------------------- */ .cookie-message.is-visible { display: block; } .cookie-message .cookie-description p:last-child { margin-bottom: 0; } /* Below 576px the 370px card plus its 40px padding leaves no side gutter, so let it span the viewport with a 15px margin instead. */ @media (max-width: 575px) { .cookie-message { left: 15px; right: 15px; bottom: 15px; max-width: none; padding: 25px; } } /* Rich-text policy bodies: Crafto styles headings globally but gives content lists no indent, and policy text needs breathing room between sections. */ .legal-body h2 { font-size: 26px; line-height: 34px; margin-top: 45px; margin-bottom: 15px; } .legal-body h3 { font-size: 20px; line-height: 28px; margin-top: 30px; margin-bottom: 10px; } .legal-body > :first-child { margin-top: 0; } .legal-body ul, .legal-body ol { padding-left: 20px; margin-bottom: 20px; } .legal-body li { margin-bottom: 8px; } /* A module's description (rich text): the Sustainable Development curriculum's "Ειδικοί στόχοι" are a bulleted list, and Crafto's `ul li { list-style: none }` strips the markers -- on the li, so restating it on the ul does nothing -- which left the items reading as one indented run-on paragraph. */ .course-description ul, .course-description ol { padding-left: 20px; margin-bottom: 20px; } .course-description ul li { list-style: disc; } .course-description ol li { list-style: decimal; } .course-description li { margin-bottom: 8px; } /* A module's facts card (sidebar). Two columns, label and value, with every value left-aligned on one line down the card: the list is a two-column grid and each row a subgrid of it, so the label column is as wide as the widest label present (it follows the language and whichever optional rows the module has) and no width is hard-coded. Two problems on a narrow card: - Crafto sets `word-break: break-word` on body, so a value too wide for what the label leaves it is split mid-word ("Υποχρεωτι|κά", "Χαραλαμπί|δης"). `normal` + `overflow-wrap` wraps at spaces and splits a word only if it cannot fit on a line of its own. - From 992px to 1199px (lg; iPad mini landscape is 1024) the sidebar is col-lg-4 of a container that has not yet reached its full width, about 340px, and the label takes nearly half. There the rows stack -- label, then the value under it, indented past the icon. Above 1199 and below 992 (full-width card) side by side fits. */ .course-facts { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; } .course-facts li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .course-facts li > span:last-child { word-break: normal; overflow-wrap: break-word; } @media (min-width: 992px) and (max-width: 1199.98px) { .course-facts { display: block; } .course-facts li { display: flex; flex-direction: column; } .course-facts li > span:last-child { padding-left: 30px; } } /* Campus map (contact page) -- Leaflet, replacing the Google embed. Leaflet stacks its panes from z-index 400 and its controls up to 1000, so an untouched .leaflet-container paints straight over the white address card that overlaps the map's bottom-right corner from md up. Giving the container its own stacking context at z-index 0 traps all of that inside it; the card is positioned and comes later in the document, so it lands on top without needing a z-index of its own. Rounded corners need the overflow clip -- the tiles are square. */ #campus-map { position: relative; z-index: 0; overflow: hidden; background-color: var(--very-light-gray); } /* Crafto sets `a { text-decoration: none }` and its own link colours globally, which makes Leaflet's attribution and popup links invisible against the tiles. OSM's tile policy requires the attribution to be legible, so restate it here. */ #campus-map .leaflet-control-attribution { font-size: 11px; } #campus-map .leaflet-control-attribution a { color: #0078a8; text-decoration: underline; }