/* ========================================================================== ITERN theme -------------------------------------------------------------------------- Almost everything you'd want to change is in the :root block below. Change a value here and the whole site follows. Nothing needs rebuilding — save the file and refresh. ========================================================================== */ :root { /* ---- Brand colours ---------------------------------------------------- */ --ink: #1b2733; /* main text */ --ink-soft: #5a6a7a; /* secondary text, captions, metadata */ --brand: #14564f; /* headings, links, primary buttons */ --brand-deep: #0d3b36; /* hover state for brand elements */ --accent: #c1592b; /* highlights, underlines, active nav */ --paper: #fbf9f5; /* page background */ --surface: #ffffff; /* cards and panels */ --line: #e4ded3; /* borders and rules */ --shade: #f2eee6; /* subtle fills, table stripes */ /* ---- Type ------------------------------------------------------------- */ --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-size: 1.0625rem; --line-height: 1.65; /* ---- Layout ----------------------------------------------------------- */ --measure: 44rem; /* reading width for article text */ --wide: 72rem; /* max width of the overall page */ --radius: 10px; --gap: 1.5rem; /* ---- Header ----------------------------------------------------------- */ --brand-height: 52px; /* logo height, and the height of the text beside it */ --header-bg: var(--brand); --header-fg: #f4efe6; /* ---- Depth and motion -------------------------------------------------- Shadows are tinted with the ink colour rather than black — that is most of the difference between "has a shadow" and "looks lit". Raise the last number in each to deepen them, or set both to `none` for a flat site. */ --lift-1: 0 1px 2px rgba(27, 39, 51, .04), 0 2px 8px rgba(27, 39, 51, .05); --lift-2: 0 2px 4px rgba(27, 39, 51, .06), 0 8px 24px rgba(27, 39, 51, .09); --ease: cubic-bezier(.2, .6, .35, 1); --quick: 150ms; --settle: 180ms; } /* Set data-theme="dark" on in theme/header.php to invert the palette. */ :root[data-theme="dark"] { --ink: #e9e5dd; --ink-soft: #a3aeb8; --brand: #7fd0c2; --brand-deep: #a7e3d7; --accent: #f0956a; --paper: #131a20; --surface: #1b242c; --line: #2c3841; --shade: #202a33; --header-bg: #0d3b36; --header-fg: #eef6f3; --lift-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .26); --lift-2: 0 2px 4px rgba(0, 0, 0, .38), 0 8px 24px rgba(0, 0, 0, .34); } /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } img, video { max-width: 100%; height: auto; display: block; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; } body { font-family: var(--font-body); font-size: var(--text-size); line-height: var(--line-height); color: var(--ink); background: var(--paper); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; } .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 1.25rem; } a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--quick) var(--ease); } a:hover { color: var(--brand-deep); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ---- Site header ------------------------------------------------------- */ .site-header { background: var(--header-bg); color: var(--header-fg); position: sticky; top: 0; z-index: 20; box-shadow: var(--lift-1); } .site-header a { color: inherit; } .site-header .wrap { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; padding-block: 1.1rem; } .brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; margin-right: auto; } .brand img { height: var(--brand-height); width: auto; } /* The name and tagline together occupy exactly the logo's height, and are centred within it — so the two sides of the masthead align by construction rather than by font sizes that happen to add up. Change --brand-height, or the type below, and they stay level. */ .brand-text { display: flex; flex-direction: column; justify-content: center; height: var(--brand-height); gap: 0.1rem; } .brand-name { display: block; font-family: var(--font-head); font-size: 1.8rem; font-weight: 600; line-height: 1.05; } .brand-tagline { display: block; font-size: 0.82rem; opacity: 0.82; line-height: 1.2; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.9375rem; } .site-nav a { text-decoration: none; padding-block: 0.2rem; position: relative; } .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--settle) var(--ease); } .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); } .site-nav .sep { opacity: 0.35; } /* ---- Home page hero ---------------------------------------------------- */ .hero { margin: 0 0 var(--gap); padding: 3.5rem 2rem; border-radius: var(--radius); background: var(--shade); text-align: center; } .hero { box-shadow: var(--lift-1); } .hero.has-image { background-size: cover; background-position: 50% 50%, 50% 50%; color: #fff; } /* The hero photograph shifts as the hero crosses the viewport — parallax, tied to scrolling rather than to a clock, so nothing moves unless the reader does. Two positions, because the element carries two background layers: the darkening gradient stays put and only the photograph moves, or the gradient's edge would show against the paper. This needs CSS scroll-driven animation, so it is behind @supports: browsers without it get a perfectly good static hero rather than a broken one. There is no JavaScript fallback and there should not be — this is a finish. Delete this block and the keyframes to stop it. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hero.has-image { animation-name: hero-parallax; animation-timing-function: linear; animation-fill-mode: both; animation-duration: auto; animation-timeline: view(); } } } @keyframes hero-parallax { from { background-position: 50% 50%, 50% 38%; } to { background-position: 50% 50%, 50% 62%; } } .hero.has-image h1, .hero.has-image .hero-intro { color: #fff; } .hero-inner { max-width: var(--measure); margin-inline: auto; } .hero h1 { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; } .hero-intro { margin-top: 1rem; font-size: 1.1rem; } /* ---- Main -------------------------------------------------------------- */ main { flex: 1; padding-block: 2.5rem 4rem; } .page-title { font-family: var(--font-head); font-size: 2rem; margin-bottom: 1.75rem; color: var(--brand); } /* ---- Post list --------------------------------------------------------- */ .post-list { display: grid; gap: 1.25rem; } .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; display: grid; gap: 0.6rem; box-shadow: var(--lift-1); transition: box-shadow var(--quick) var(--ease), transform var(--quick) var(--ease); } /* A post card is a link, so it may move under the cursor. A .card in the admin is not, and stays put — movement on something you cannot click is a lie. */ .post-card:hover { box-shadow: var(--lift-2); transform: translateY(-2px); } .post-card.has-cover { grid-template-columns: 15rem 1fr; gap: 0 1.75rem; align-items: start; padding: 0; overflow: hidden; } .post-card.has-cover .cover { grid-row: 1 / -1; aspect-ratio: 4 / 3; overflow: hidden; } .post-card.has-cover .cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .post-card.has-cover .body { padding: 1.5rem 1.75rem 1.5rem 0; display: grid; gap: 0.6rem; } .post-card h2 { font-family: var(--font-head); font-size: 1.4rem; line-height: 1.3; } .post-card h2 a { text-decoration: none; } .post-card h2 a:hover { text-decoration: underline; } .post-card p { color: var(--ink-soft); } /* ---- Filters on the posts page ----------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: var(--gap); } .filters .field { margin: 0; flex: 1 1 12rem; } .filters .field:not(:first-child) { flex: 0 1 10rem; } .filters .actions { margin: 0; display: flex; gap: .5rem; } /* ---- Attachments, in the editor ---------------------------------------- */ .file-rows { display: flex; flex-direction: column; gap: .75rem; } .file-row { display: flex; align-items: center; gap: 1rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius); } .file-row.is-hero { border-color: var(--brand); background: var(--shade); } .file-row .thumb { width: 4rem; height: 3rem; flex: none; border-radius: 6px; object-fit: cover; background: var(--shade); display: grid; place-items: center; font-size: .75rem; color: var(--ink-soft); } .file-row .what { flex: 1 1 auto; min-width: 0; } .file-row .what a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row .row-actions { display: flex; gap: .4rem; flex: none; } @media (max-width: 40rem) { .file-row { flex-wrap: wrap; } .file-row .row-actions { width: 100%; justify-content: flex-end; } } /* .meta is plain small grey text and is safe on any element, table cells included. Add .meta-row when you also want the items laid out in a line. */ .meta { font-size: 0.85rem; color: var(--ink-soft); } .meta a { color: var(--ink-soft); } .meta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .pill { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); } .pill.draft { background: #fdf1dc; border-color: #eccf94; color: #7a5411; } .pill.members { background: #e6f1ef; border-color: #a8ccc5; color: #14564f; } /* ---- Article ----------------------------------------------------------- */ .article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; max-width: 52rem; margin-inline: auto; } .article h1 { font-family: var(--font-head); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.2; margin-bottom: 0.6rem; } .prose { margin-top: 1.75rem; } .prose > * + * { margin-top: 1.1rem; } .prose h2, .prose h3, .prose h4 { font-family: var(--font-head); color: var(--brand); line-height: 1.25; margin-top: 2.2rem; } .prose h2 { font-size: 1.55rem; } .prose h3 { font-size: 1.28rem; } .prose h4 { font-size: 1.1rem; } .prose ul, .prose ol { padding-left: 1.4rem; } .prose li + li { margin-top: 0.4rem; } .prose img { border-radius: var(--radius); margin-block: 1.6rem; } .prose blockquote { border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 1.2rem; color: var(--ink-soft); font-style: italic; } .prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--shade); padding: 0.12em 0.35em; border-radius: 4px; } .prose pre { background: var(--shade); padding: 1rem 1.15rem; border-radius: var(--radius); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2rem; } .prose table { border-collapse: collapse; width: 100%; } .prose th, .prose td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; } /* ---- Hero image -------------------------------------------------------- */ /* Every hero fills the same shaped band whatever the photograph's own proportions are, cropped from the middle, so a tall portrait and a wide panorama both look deliberate and posts stay the same shape as each other. */ .article-cover { aspect-ratio: 16 / 6; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--gap); } .article-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- Attachments ------------------------------------------------------- */ .attachments { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .attachments h2 { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 0.9rem; color: var(--brand); } .file-list { display: grid; gap: 0.5rem; } .file { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.95rem; background: var(--surface); color: var(--ink); } .file { transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); } .file:hover { border-color: var(--brand); box-shadow: var(--lift-1); } .file .ext { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--brand); color: #fff; border-radius: 4px; padding: 0.28rem 0.42rem; min-width: 3rem; text-align: center; } .file .name { font-weight: 500; overflow-wrap: anywhere; } .file .size { margin-left: auto; color: var(--ink-soft); font-size: 0.85rem; white-space: nowrap; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* ---- Author box -------------------------------------------------------- */ .author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--shade); border-radius: var(--radius); } .avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.25rem; flex: none; } /* ---- Forms and buttons ------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; } .card.narrow { max-width: 30rem; margin-inline: auto; } label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; } .field { margin-bottom: 1.1rem; } .field .hint { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.3rem; font-weight: 400; } /* Styled by exclusion rather than by a list of types. A list is one more place to forget: `search` and `color` were both added to the site and neither got styled, so the posts filter and the brand colour picker rendered as browser defaults beside properly dressed neighbours. The :where() keeps this at the specificity of a bare `input`, so the colour rule below still wins. */ input:not(:where([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"])), select, textarea { width: 100%; font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.75rem; } /* A colour swatch has no use for a full-width text field's proportions. */ input[type="color"] { width: 4.5rem; height: 2.75rem; padding: 0.25rem; cursor: pointer; } textarea { resize: vertical; min-height: 8rem; } textarea.editor { min-height: 26rem; font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.6; } input:focus, select:focus, textarea:focus { border-color: var(--brand); } .button, button { font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--brand); color: #fff; border: 1px solid var(--brand); padding: 0.55rem 1.1rem; border-radius: 8px; text-decoration: none; } .button, button { transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), color var(--quick) var(--ease), box-shadow var(--quick) var(--ease), transform var(--quick) var(--ease); } .button:hover, button:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; } .button:active, button:active { transform: translateY(1px); } .button.secondary, button.secondary { background: transparent; color: var(--brand); } .button.secondary:hover, button.secondary:hover { background: var(--shade); color: var(--brand-deep); } .button.danger, button.danger { background: transparent; color: #a3301a; border-color: #dcb6ad; } .button.danger:hover, button.danger:hover { background: #a3301a; color: #fff; border-color: #a3301a; } .button.small, button.small { padding: 0.32rem 0.7rem; font-size: 0.85rem; } .actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; } .checkline { display: flex; align-items: center; gap: 0.5rem; } .checkline label { margin: 0; font-weight: 400; } .checkline input { width: auto; } /* ---- Notices ----------------------------------------------------------- */ .flash { border-radius: var(--radius); padding: 0.85rem 1.15rem; margin-bottom: 1.25rem; border: 1px solid; } .flash.ok { background: #e8f4ef; border-color: #a9cfc0; color: #14564f; } .flash.error { background: #fbeae6; border-color: #e0b3a7; color: #8f2d17; } .flash.info { background: #eaf0f6; border-color: #b6c8db; color: #2b4a68; } .notice { text-align: center; } .empty { color: var(--ink-soft); padding: 2.5rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); } /* ---- Tables (admin) ---------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.list { width: 100%; border-collapse: collapse; } table.list th, table.list td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } table.list th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); } table.list tbody tr { transition: background-color var(--quick) var(--ease); } table.list tbody tr:hover { background: var(--shade); } table.list .right { text-align: right; white-space: nowrap; } /* ---- Admin shell ------------------------------------------------------- */ .admin-bar { background: var(--ink); color: #fff; font-size: 0.9rem; } .admin-bar a { color: #fff; text-decoration: none; } .admin-bar .wrap { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; padding-block: 0.6rem; } .admin-bar .spacer { margin-left: auto; } .admin-bar a:hover, .admin-bar a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; } .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--gap); align-items: start; } .side { display: grid; gap: var(--gap); } .toolbar { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .toolbar button { background: var(--shade); color: var(--ink); border-color: var(--line); font-weight: 500; padding: 0.3rem 0.6rem; font-size: 0.85rem; } .toolbar button { transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease); } .toolbar button:hover { background: var(--line); color: var(--ink); } #preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; background: var(--surface); } /* ---- Pagination -------------------------------------------------------- */ .pager { display: flex; gap: 0.75rem; justify-content: center; margin-top: 2.5rem; } /* ---- Footer ------------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 2rem; font-size: 0.9rem; color: var(--ink-soft); } .site-footer .wrap { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; } /* Bare URLs are auto-linked by the Markdown renderer, so a pasted DOI or conference link with no spaces in it will arrive in a post sooner or later. Without this it pushes the article wider than the phone it is being read on and the whole page scrolls sideways. */ .prose, .hero h1, .hero-intro, .page-title, .article h1, .post-card h2, .post-card p, .bio { overflow-wrap: break-word; } /* Paragraphs in a biography, which is plain text rather than Markdown. */ .bio p + p { margin-top: 0.6rem; } /* ---- Typographic detail ------------------------------------------------- Large serif type is set too loose at its default tracking; balanced wrapping stops a heading ending on one stranded word. No new faces, no new sizes. */ .brand-name, .hero h1, .page-title, .post-card h2, .article h1 { letter-spacing: -0.015em; } .hero h1, .page-title, .post-card h2, .article h1, .article h2, .article h3 { text-wrap: balance; } .prose p, .hero-intro, .post-card p { text-wrap: pretty; } /* ---- Motion, for those who want none ------------------------------------- Everything above is a finish, not a function, so it all comes off. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Small screens ----------------------------------------------------- */ @media (max-width: 60rem) { .editor-grid { grid-template-columns: 1fr; } } @media (max-width: 48rem) { .article { padding: 1.5rem; } /* 16:6 of a phone's width is a letterbox slit. */ .article-cover { aspect-ratio: 3 / 2; margin-inline: -1.5rem; border-radius: 0; } .post-card.has-cover { grid-template-columns: 1fr; } .post-card.has-cover .cover { aspect-ratio: 16 / 9; } .post-card.has-cover .body { padding: 1.25rem 1.5rem 1.5rem; } .site-header .wrap { padding-block: 0.9rem; } /* "International Transformative Educational Research Network" is 57 characters; it cannot hold one line on a phone, so here it wraps again and the matched height stands down with it. */ .brand-text { height: auto; } .brand-tagline { white-space: normal; } .brand-name { font-size: 1.5rem; } /* Sticky is a luxury on a laptop and a nuisance on a phone, where the header wraps to two lines and takes a third of the screen with it. */ .site-header { position: static; } html { scroll-padding-top: 0; } } @media print { .site-header, .site-footer, .admin-bar, .pager, .attachments { display: none; } .article { border: 0; padding: 0; } }