/* Inner pages and category listings for technopark.ps ------------------------------------------------------------------ One system for every page that is not the homepage: the page head with its breadcrumb and title, the content surface under it, and the ways a category lays out what is filed in it (cards, tiles, rows, albums, photos). The direction and the reasons are in DESIGN.md; the template map is in docs/INNER-PAGES.md. The language is the one Who We Are and Our Team set (about.css): the cedar band the header and footer use, pine for actions, sage from the logo's tree, Barlow Condensed in capitals for display lines (it echoes the TECHNO PARK wordmark) and Source Sans Pro for reading. Tight 4px corners, cards that lift with a pine bar drawn across their top, sections that fade up as they scroll in. Everything is under .tp-inner or a .tp- class, so the homepage and the pages that bring their own design (the Diaspora Network, Brain Gain) are untouched. Category templates render outside #all_body, so the "#all_body * { font-size: 22px !important }" rule in custom_new.css does not reach anything here; the article body is article.css's job. */ .tp-inner { --tp-band: #283b3c; --tp-band-deep: #1f2f30; --tp-accent: #2c6e6b; --tp-accent-ink: #22524f; --tp-sage: #93bdb6; --tp-mint: #9ec8bd; --tp-ink: #1b2625; --tp-navy: #1b2625; --tp-body: #34403f; --tp-muted: #56635f; --tp-line: #d9e3e0; --tp-tint: #eef3f1; --tp-on-band: rgba(255, 255, 255, .8); --tp-radius: 4px; --tp-radius-sm: 3px; --tp-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; --tp-shadow: 0 2px 4px rgba(31, 47, 48, .06), 0 24px 48px -24px rgba(31, 47, 48, .38); --tp-ease-out: cubic-bezier(0.23, 1, 0.32, 1); color: var(--tp-ink); font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.6; background: #fff; } .tp-inner *, .tp-inner *::before, .tp-inner *::after { box-sizing: border-box; } .tp-inner a { text-decoration: none; } .tp-inner :focus-visible { outline: 3px solid #4d9b97; outline-offset: 3px; border-radius: 2px; } .tp-inner img { max-width: 100%; } /* Visually hidden, still read out. */ .tp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The display voice: condensed capitals. */ .tp-display, .tp-title, .tp-section-title, .tp-row-title, .tp-album-name, .tp-card--lead .tp-card-title, .tp-card--tile .tp-card-title, .tp-subcat a { font-family: var(--tp-display); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; } /* ---------- page head ---------- The site header is position:absolute, 90px tall, over whatever comes first, and nothing reserves that space, so the band pads for it. */ .tp-head { position: relative; isolation: isolate; background: var(--tp-band); color: #fff; padding: 150px 0 72px; overflow: hidden; } .tp-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 120% at 100% 100%, rgba(147, 189, 182, .14), transparent 65%); } .tp-head-inner { position: relative; } .tp-head--lift { padding-bottom: 120px; } .tp-head--figure { padding-bottom: 184px; } .tp-crumb { font-size: 14px; color: var(--tp-on-band); margin: 0 0 36px; line-height: 1.5; } .tp-crumb a, .tp-crumb .stext { color: var(--tp-on-band); } .tp-crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* The title sits in a mask and rises into it on load. Three sizes, by length, so a two-word section name is a poster and a news headline still reads. */ .tp-title { font-weight: 700; font-size: clamp(44px, 11vw, 128px); line-height: .88; letter-spacing: -.005em; color: #fff; margin: 0; max-width: 16ch; overflow: hidden; padding-bottom: .05em; } .tp-title--m { font-size: clamp(38px, 7vw, 88px); line-height: .92; max-width: 22ch; } .tp-title--l { font-size: clamp(30px, 5vw, 62px); line-height: .98; max-width: 28ch; } .tp-title-line { display: block; } .tp-lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--tp-on-band); max-width: 52ch; margin: 32px 0 0; text-wrap: pretty; } .tp-lede::before { content: ""; display: block; width: 72px; height: 3px; background: var(--tp-sage); margin-bottom: 24px; } .tp-lede p { margin: 0 0 .6em; } .tp-lede p:last-child { margin-bottom: 0; } .tp-lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .tp-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 0; font-size: 15px; font-weight: 600; color: var(--tp-sage); } .tp-meta span + span { position: relative; } .tp-meta span + span::before { content: ""; position: absolute; inset-inline-start: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; } .tp-head-action { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 32px 0 0; padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(147, 189, 182, .6); background: transparent; color: #fff; font-weight: 700; font-size: 15px; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .tp-head-action:hover, .tp-head-action:focus-visible { background: var(--tp-sage); border-color: var(--tp-sage); color: var(--tp-band-deep); } .tp-head-action i { font-size: 18px; } /* A landscape photograph fills the head, as on Who We Are: the title sits over its darkened lower half. InnerPage::headPhotoMode() chooses this only for wide photographs; posters and group shots with words on them keep the figure below, in their natural shape. */ .tp-head--photo { display: flex; align-items: flex-end; min-height: min(84svh, 820px); padding-bottom: 88px; } .tp-head--photo .tp-head-inner { width: 100%; } .tp-head-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .tp-head--photo::before { background: linear-gradient(0deg, rgba(31, 47, 48, .97) 0%, rgba(31, 47, 48, .8) 34%, rgba(31, 47, 48, .25) 76%, rgba(31, 47, 48, .5) 100%), linear-gradient(90deg, rgba(31, 47, 48, .55) 0%, rgba(31, 47, 48, 0) 70%); } .tp-head--photo .tp-head-inner { position: static; } .tp-head--photo .tp-crumb { position: absolute; top: 124px; } .tp-head--article.tp-head--photo { min-height: min(78svh, 760px); } /* The page photo straddles the band's lower edge. Its natural shape is kept: these are group photos and event posters with words on them, and a fixed crop cut heads and headlines off. A tall poster is simply shown smaller. */ .tp-figure { position: relative; margin: -136px auto 0; text-align: center; } .tp-figure img { display: inline-block; width: auto; height: auto; max-width: min(100%, 1040px); max-height: min(74vh, 660px); border-radius: var(--tp-radius); background: var(--tp-tint); box-shadow: 0 2px 4px rgba(31, 47, 48, .08), 0 30px 60px -30px rgba(31, 47, 48, .45); } @media (prefers-reduced-motion: no-preference) { .tp-title-line { animation: tp-unmask .9s var(--tp-ease-out) both; } .tp-crumb, .tp-lede, .tp-meta, .tp-head-action, .tp-search { animation: tp-rise .7s var(--tp-ease-out) both; } .tp-lede { animation-delay: .2s; } .tp-meta, .tp-search { animation-delay: .28s; } .tp-head-action { animation-delay: .34s; } .tp-head-photo { animation: tp-settle 1.8s var(--tp-ease-out) both; } .tp-figure img { animation: tp-fade .8s var(--tp-ease-out) .15s both; } } @keyframes tp-unmask { from { transform: translateY(105%); } } @keyframes tp-rise { from { opacity: 0; transform: translateY(18px); } } @keyframes tp-settle { from { transform: scale(1.08); } } @keyframes tp-fade { from { opacity: 0; transform: translateY(12px); } } @media (max-width: 767px) { .tp-head { padding: 120px 0 52px; } .tp-head--lift { padding-bottom: 84px; } .tp-head--figure { padding-bottom: 116px; } .tp-head--photo { min-height: 74svh; padding-bottom: 52px; } .tp-crumb { margin-bottom: 24px; } .tp-head--photo .tp-crumb { top: 104px; } .tp-lede { margin-top: 24px; } .tp-lede::before { margin-bottom: 18px; } .tp-figure { margin-top: -88px; } .tp-figure img { max-height: 60vh; } } /* ---------- content surface ---------- */ .tp-main { padding: 72px 0 112px; } .tp-main--tint { background: var(--tp-tint); } .tp-head--lift + .tp-main { padding-top: 0; } .tp-head--lift + .tp-main .tp-grid, .tp-head--lift + .tp-main .tp-photos, .tp-head--lift + .tp-main .tp-albums { margin-top: -64px; position: relative; } @media (max-width: 767px) { .tp-main { padding: 48px 0 72px; } .tp-head--lift + .tp-main .tp-grid, .tp-head--lift + .tp-main .tp-photos, .tp-head--lift + .tp-main .tp-albums { margin-top: -44px; } } .tp-section-title { font-size: clamp(36px, 4.2vw, 60px); font-weight: 600; color: var(--tp-ink); line-height: .95; margin: 0 0 32px; } .tp-empty { margin: 0; padding: 56px 0; font-size: 19px; color: var(--tp-muted); } /* A category description too long for the head: set as reading text, with its headings in the display voice. */ .tp-prose { max-width: 70ch; font-size: 18px; line-height: 1.7; color: var(--tp-body); } .tp-prose > :first-child { margin-top: 0; } .tp-prose p, .tp-prose ul, .tp-prose ol { margin: 0 0 1em; } .tp-prose li { margin-bottom: .45em; } .tp-prose strong, .tp-prose b { color: var(--tp-ink); } .tp-prose a { color: var(--tp-accent); text-decoration: underline; text-underline-offset: 3px; } /* Bodies pasted from Word carry inline justify, which tears rivers through a narrow column. */ .tp-prose [style*="justify"] { text-align: start !important; } .tp-prose h2, .tp-prose h3 { font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; color: var(--tp-ink); line-height: 1; margin: 1.4em 0 .5em; } .tp-prose h2 { font-size: clamp(30px, 3vw, 40px); } .tp-prose h3 { font-size: clamp(24px, 2.2vw, 30px); } /* The introduction opens at standfirst size; a long one of several paragraphs runs in two columns on a wide screen. */ .tp-intro { margin-bottom: 80px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: var(--tp-ink); max-width: 62ch; } .tp-intro > p:first-child:not(:only-child) { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.45; } @media (min-width: 1200px) { .tp-intro:has(> :nth-child(3)) { columns: 2 380px; column-gap: 72px; max-width: none; font-size: 19px; } .tp-intro:has(> :nth-child(3)) > p:first-child { column-span: all; max-width: 40ch; margin-bottom: 1.2em; } .tp-intro > * { break-inside: avoid; } } /* ---------- cards ---------- White on the tint, no border, tight corners. A pine bar draws across the top under the pointer and the card lifts. The title's link is stretched over the card, so the card is one tab stop. */ .tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .tp-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1099px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .tp-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 639px) { .tp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .tp-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .tp-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--tp-radius); overflow: hidden; transition: transform .35s var(--tp-ease-out), box-shadow .35s var(--tp-ease-out); } .tp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; z-index: 2; background: var(--tp-accent); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--tp-ease-out); } .tp-card:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .35); } .tp-card:focus-within::before { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .tp-card:hover { box-shadow: var(--tp-shadow); } .tp-card:hover::before { transform: scaleX(1); } .tp-card:hover .tp-card-title { color: var(--tp-accent-ink); } } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .tp-card:hover { transform: translateY(-4px); } .tp-card:hover .tp-card-media img { transform: scale(1.04); } } .tp-card:active { transform: translateY(-1px); } .tp-card-media { aspect-ratio: 3 / 2; background: #dfe7e4; overflow: hidden; } .tp-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--tp-ease-out); } .tp-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; } .tp-card-date { margin: 0; font-size: 14px; font-weight: 600; color: var(--tp-accent); font-variant-numeric: tabular-nums; } .tp-card-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--tp-ink); overflow-wrap: anywhere; transition: color .2s ease; } .tp-card-title a { color: inherit; } .tp-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tp-card-title a:focus-visible { outline: none; } .tp-card-teaser { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tp-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tp-card--bare .tp-card-body { padding-top: 28px; border-top: 4px solid var(--tp-sage); } /* The newest item on the first page is the lead story: two columns and two rows of a three-column grid, so the next two items stand beside it as a bento and the rest run on in rows of three. */ @media (min-width: 1100px) { .tp-card--lead { grid-column: span 2; grid-row: span 2; } .tp-card--lead .tp-card-media { aspect-ratio: auto; flex: 1 1 300px; min-height: 300px; } .tp-card--lead .tp-card-body { flex: 0 0 auto; padding: 30px 36px 34px; gap: 14px; } } @media (min-width: 640px) and (max-width: 1099px) { .tp-card--lead { grid-column: 1 / -1; } .tp-card--lead .tp-card-media { aspect-ratio: 16 / 8; } } .tp-card--lead .tp-card-title { font-size: clamp(30px, 3vw, 46px); font-weight: 600; line-height: .98; } .tp-card--lead .tp-card-teaser { font-size: 18px; -webkit-line-clamp: 3; max-width: 60ch; } /* Tiles: logos, icons and posters, shown whole on white — never cropped. */ .tp-card--tile .tp-card-media { aspect-ratio: 4 / 3; background: #fff; padding: 12% 16% 4%; } .tp-card--tile .tp-card-media img { object-fit: contain; } .tp-card--tile .tp-card-body { padding: 10px 18px 22px; } .tp-card--tile .tp-card-title { font-size: 24px; font-weight: 600; line-height: 1; } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .tp-card--tile:hover .tp-card-media img { transform: scale(1.06); } } /* ---------- rows (the shared "line" template) ---------- An editorial run: a large photograph, and the text on a white panel that steps over its edge, the sides alternating down the list. */ .tp-rows { display: grid; gap: 72px; } .tp-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .tp-row-media { grid-column: 1 / span 8; grid-row: 1; aspect-ratio: 16 / 10; background: #dfe7e4; overflow: hidden; border-radius: var(--tp-radius); } .tp-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tp-ease-out); } .tp-row-body { grid-column: 8 / span 5; grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 48px 48px 44px; background: #fff; border-radius: var(--tp-radius); box-shadow: 0 2px 4px rgba(31, 47, 48, .05), 0 30px 60px -30px rgba(31, 47, 48, .35); transition: transform .35s var(--tp-ease-out); } .tp-row:nth-child(even) .tp-row-media { grid-column: 5 / span 8; } .tp-row:nth-child(even) .tp-row-body { grid-column: 1 / span 5; } .tp-row-body::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tp-accent); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--tp-ease-out); } .tp-row:focus-within .tp-row-body::before { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .tp-row:hover .tp-row-body::before { transform: scaleX(1); } .tp-row:hover .tp-more::after { transform: translateX(4px); } } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .tp-row:hover .tp-row-media img { transform: scale(1.03); } } .tp-row-title { margin: 0; font-size: clamp(34px, 3.4vw, 52px); line-height: .95; font-weight: 600; color: var(--tp-ink); } /* A headline-length name reads better smaller, and a long one in the reading face: condensed capitals at display size became a wall. */ .tp-row-title--m { font-size: clamp(28px, 2.6vw, 40px); } .tp-row-title--l { font-family: inherit; text-transform: none; font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; } .tp-row-title a { color: inherit; } .tp-row-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } .tp-row-title a:focus-visible { outline: none; } .tp-row:focus-within { outline: 3px solid #4d9b97; outline-offset: 6px; border-radius: var(--tp-radius); } .tp-row-teaser { margin: 0; color: var(--tp-body); font-size: 17px; line-height: 1.65; } .tp-row--bare { display: block; } .tp-row--bare .tp-row-body { border-inline-start: 4px solid var(--tp-accent); box-shadow: none; max-width: 860px; } .tp-inner .tp-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--tp-accent); } .tp-inner .tp-more::after { content: ""; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--tp-ease-out); } @media (max-width: 991px) { .tp-rows { gap: 48px; } .tp-row, .tp-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .tp-row-media, .tp-row:nth-child(even) .tp-row-media { grid-column: 1; grid-row: 1; } .tp-row-body, .tp-row:nth-child(even) .tp-row-body { grid-column: 1; grid-row: 2; margin: -48px 24px 0; padding: 32px 28px 30px; } .tp-row--bare .tp-row-body { margin: 0; } } @media (max-width: 559px) { .tp-rows { gap: 36px; } .tp-row-body, .tp-row:nth-child(even) .tp-row-body { margin: -32px 12px 0; padding: 26px 22px 24px; } } /* ---------- sub-sections of a category ---------- */ .tp-subcats { margin: 0 0 72px; } .tp-subcat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .tp-subcat { position: relative; display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 14px 22px 14px 14px; background: #fff; border-radius: var(--tp-radius); overflow: hidden; transition: box-shadow .3s var(--tp-ease-out), transform .3s var(--tp-ease-out); } .tp-subcat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tp-accent); transform: scaleY(0); transform-origin: center bottom; transition: transform .35s var(--tp-ease-out); } .tp-subcat:hover { box-shadow: var(--tp-shadow); } .tp-subcat:hover::before, .tp-subcat:focus-within::before { transform: scaleY(1); } .tp-subcat img { flex: none; width: 64px; height: 64px; border-radius: var(--tp-radius-sm); object-fit: cover; background: var(--tp-tint); } .tp-subcat a { font-weight: 600; font-size: 24px; color: var(--tp-ink); line-height: 1; } .tp-subcat a::after { content: ""; position: absolute; inset: 0; } .tp-subcat a:focus-visible { outline: none; } .tp-subcat:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .35); } /* ---------- photos and albums ---------- A photo set is a mosaic: every seventh picture takes a double cell, so a long album has rhythm instead of a spreadsheet of thumbnails. */ .tp-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-flow: dense; gap: 10px; } .tp-photos li { min-width: 0; } .tp-photos a { display: block; height: 100%; border-radius: var(--tp-radius-sm); overflow: hidden; background: #dfe7e4; } .tp-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--tp-ease-out), opacity .2s ease; } @media (min-width: 768px) { .tp-photos li:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; } } .tp-photos a:hover img { opacity: .92; } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .tp-photos a:hover img { transform: scale(1.04); } } @media (max-width: 639px) { .tp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .tp-photos li:nth-child(5n+1) { grid-column: 1 / -1; } } /* Albums are photographs first: the cover fills the card and the album's name sits on it. The first album of the page takes a double cell. */ .tp-albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-auto-flow: dense; gap: 16px; } .tp-album { position: relative; isolation: isolate; display: flex; min-height: 300px; background: var(--tp-band); border-radius: var(--tp-radius); overflow: hidden; transition: box-shadow .35s var(--tp-ease-out), transform .35s var(--tp-ease-out); } @media (min-width: 900px) { .tp-albums > .tp-album:first-child:not(:only-child) { grid-column: span 2; grid-row: span 2; } } .tp-album:hover { box-shadow: var(--tp-shadow); } .tp-album:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .45); } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .tp-album:hover { transform: translateY(-4px); } .tp-album:hover .tp-album-media img { transform: scale(1.05); } } .tp-album-media { position: absolute; inset: 0; z-index: -1; background: var(--tp-band); overflow: hidden; } .tp-album-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31, 47, 48, .92) 0%, rgba(31, 47, 48, .45) 42%, rgba(31, 47, 48, 0) 70%); } .tp-album-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tp-ease-out); } .tp-album-media--video::before { content: ""; position: absolute; z-index: 1; inset-inline-end: 20px; top: 20px; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(31, 47, 48, .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat; } .tp-album-name { align-self: flex-end; display: block; width: 100%; padding: 22px 24px 24px; font-weight: 600; font-size: clamp(24px, 2vw, 30px); line-height: 1; color: #fff; overflow-wrap: anywhere; } .tp-albums > .tp-album:first-child:not(:only-child) .tp-album-name { font-size: clamp(30px, 3.4vw, 52px); padding: 32px; } .tp-album-name::after { content: ""; position: absolute; inset: 0; } .tp-album-name:focus-visible { outline: none; } .tp-album-name:hover { color: #fff; } /* ---------- a single video ---------- */ .tp-video { max-width: 1040px; margin: 0 auto; } .tp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--tp-radius); overflow: hidden; background: var(--tp-band-deep); box-shadow: 0 2px 4px rgba(31, 47, 48, .08), 0 30px 60px -24px rgba(31, 47, 48, .45); } .tp-video-frame iframe, .tp-video-frame video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .tp-video .tp-prose { margin-top: 36px; } /* ---------- pager (Laravel's Bootstrap 5 markup) ---------- */ .tp-pager { margin-top: 56px; } .tp-pager nav > .d-sm-flex { align-items: center; gap: 16px; } .tp-pager p.small { margin: 0; color: var(--tp-muted); font-size: 15px; } .tp-pager .pagination { gap: 6px; flex-wrap: wrap; margin: 0; } .tp-pager .page-link { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px; border: 0; border-radius: var(--tp-radius) !important; background: #fff; color: var(--tp-ink); font-weight: 600; font-size: 16px; box-shadow: none; transition: background-color .2s ease, color .2s ease; } .tp-pager .page-link:hover { background: var(--tp-sage); color: var(--tp-band-deep); } .tp-pager .page-item.active .page-link { background: var(--tp-band); color: #fff; } .tp-pager .page-item.disabled .page-link { background: transparent; color: #a3afac; } .tp-pager .page-link:focus { box-shadow: 0 0 0 3px rgba(44, 110, 107, .3); } /* ---------- search ---------- */ .tp-search { display: flex; gap: 10px; max-width: 680px; margin: 36px 0 0; } .tp-search input { flex: 1; min-width: 0; height: 56px; padding: 0 20px; border-radius: var(--tp-radius); border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; } .tp-search input::placeholder { color: rgba(255, 255, 255, .62); } .tp-search input:focus { outline: none; border-color: var(--tp-sage); background: rgba(255, 255, 255, .14); } .tp-search button { flex: none; height: 56px; padding: 0 28px; border: 0; border-radius: var(--tp-radius); background: var(--tp-sage); color: var(--tp-band-deep); font-weight: 700; font-size: 16px; transition: background-color .2s ease, transform .15s ease; } .tp-search button:hover { background: #b3d3cc; } .tp-search button:active { transform: scale(.98); } .tp-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- article pages ---------- The body itself is article.css (#all_body.tp-article). This is the frame around it: the column, the tags and the related stories. */ /* clip, not hidden: a self-designed body's decorative shapes poked 3px past the viewport on Entrepreneurship at 768px, and clip neither scrolls nor breaks position:sticky inside it. Never on html or body (DESIGN.md). */ .tp-article-main { padding: 88px 0 112px; overflow-x: clip; } .tp-head--figure + .tp-figure + .tp-article-main { padding-top: 64px; } .tp-column { max-width: 820px; margin-inline: auto; } .tp-column--wide { max-width: none; } .tp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid var(--tp-line); } .tp-tags a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--tp-tint); color: var(--tp-accent-ink); font-size: 15px; font-weight: 600; transition: background-color .2s ease, color .2s ease; } .tp-tags a:hover { background: var(--tp-accent); color: #fff; } .tp-gallery { margin-top: 56px; } .tp-related { margin-top: 96px; padding-top: 0; } .tp-related .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tp-related .tp-card { background: var(--tp-tint); } .tp-related .tp-card-title { font-size: 18px; } @media (max-width: 899px) { .tp-related .tp-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .tp-article-main { padding: 48px 0 72px; } .tp-related { margin-top: 64px; } } /* ---------- forms on article pages (Get In Touch, registrations) ---------- */ .tp-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; } .tp-contact-info { position: sticky; top: 32px; } @media (max-width: 991px) { .tp-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; } .tp-contact-info { position: static; } } .tp-form-card { position: relative; background: #fff; border-radius: var(--tp-radius); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 2px 4px rgba(31, 47, 48, .05), 0 30px 60px -36px rgba(31, 47, 48, .4); } .tp-form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tp-accent); border-radius: var(--tp-radius) var(--tp-radius) 0 0; } .tp-form-card + .tp-form-card, .tp-contact .lf-wrap { margin-top: 32px; } .tp-column .tp-form-card { margin-top: 56px; } .tp-form { display: grid; gap: 20px; } .tp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 639px) { .tp-form-row { grid-template-columns: minmax(0, 1fr); } } .tp-field label { display: block; margin: 0 0 8px; font-weight: 700; font-size: 15px; color: var(--tp-ink); } .tp-field label small { font-weight: 400; color: var(--tp-muted); } .tp-req { color: #b3261e; } .tp-field .form-control { min-height: 50px; border: 1.5px solid #cfd8d7; border-radius: var(--tp-radius); padding: 11px 14px; font-size: 17px; color: var(--tp-ink); background: #fff; } .tp-field textarea.form-control { min-height: 150px; resize: vertical; } .tp-field .form-control:focus { border-color: var(--tp-accent); box-shadow: 0 0 0 3px rgba(44, 110, 107, .18); } .tp-button { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 32px; border: 0; border-radius: 999px; background: var(--tp-accent); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .2s ease, transform .15s ease; } .tp-button:hover { background: var(--tp-accent-ink); color: #fff; } .tp-button:active { transform: scale(.98); } .tp-alert { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 18px; border-radius: var(--tp-radius); font-weight: 600; line-height: 1.5; } .tp-alert::before { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; } .tp-alert.is-ok { background: #e6f2ec; color: #1d5b3a; box-shadow: inset 4px 0 0 #2f7d57; } .tp-alert.is-ok::before { content: "\2713"; background: #2f7d57; } .tp-alert.is-error { background: #fbecea; color: #8c1d18; box-shadow: inset 4px 0 0 #b3261e; } .tp-alert.is-error::before { content: "!"; background: #b3261e; } /* ---------- blog authors ---------- */ .tp-authors { list-style: none; margin: 0 0 40px; padding: 0 0 32px; border-bottom: 1px solid var(--tp-line); display: grid; gap: 18px; } .tp-authors li { display: flex; gap: 14px; align-items: flex-start; } .tp-author-mark { flex: none; width: 48px; height: 48px; border-radius: var(--tp-radius); display: grid; place-items: center; background: var(--tp-tint); color: var(--tp-accent); } .tp-authors a { font-weight: 700; color: var(--tp-ink); } .tp-author-bio { display: block; color: var(--tp-muted); font-size: 15.5px; line-height: 1.5; } .tp-related-band { padding-bottom: 88px; } /* ---------- the way on: a closing band to a related page ---------- */ .tp-next { background: var(--tp-band); color: #fff; } .tp-next-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px 72px; align-items: center; padding: 96px 0; color: #fff; } .tp-next-link:hover { color: #fff; } .tp-next-name { font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; font-size: clamp(52px, 7vw, 108px); line-height: .9; text-wrap: balance; } .tp-next-lede { color: var(--tp-on-band); font-size: 19px; line-height: 1.55; max-width: 44ch; } .tp-next-go { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid rgba(147, 189, 182, .6); display: grid; place-items: center; color: var(--tp-sage); transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .tp-next-go svg { width: 26px; height: 26px; transition: transform .3s var(--tp-ease-out); } .tp-next-link:hover .tp-next-go, .tp-next-link:focus-visible .tp-next-go { background: var(--tp-sage); border-color: var(--tp-sage); color: var(--tp-band); } @media (hover: hover) and (pointer: fine) { .tp-next-link:hover .tp-next-go svg { transform: translateX(4px); } } @media (max-width: 767px) { .tp-next-link { grid-template-columns: 1fr auto; padding: 64px 0; gap: 16px 24px; } .tp-next-lede { grid-column: 1 / -1; grid-row: 2; font-size: 17px; } .tp-next-go { width: 56px; height: 56px; } } /* ---------- scroll entrance ---------- Only things that start below the fold are hidden, and only once inner.js has run, so nothing is ever invisible without it. Transform and opacity. */ @media (prefers-reduced-motion: no-preference) { .tp-pending { opacity: 0; transform: translateY(24px); } .tp-shown { transition: opacity .6s var(--tp-ease-out), transform .6s var(--tp-ease-out), box-shadow .35s var(--tp-ease-out); } } /* ---------- lost and found (partials/_lost_found_form, on Get In Touch) ---------- */ .lf-wrap { margin: 32px 0 8px; } .lf-wrap * { box-sizing: border-box; } .lf-card { position: relative; background: #fff; border-radius: var(--tp-radius); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 2px 4px rgba(31, 47, 48, .05), 0 30px 60px -36px rgba(31, 47, 48, .4); } .lf-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tp-sage); border-radius: var(--tp-radius) var(--tp-radius) 0 0; } .lf-kicker { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--tp-accent); } .lf-h { margin: 0 0 14px; font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; font-size: clamp(34px, 3.4vw, 48px); line-height: .95; color: var(--tp-ink); text-wrap: balance; } .lf-sub { margin: 0 0 8px; max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--tp-body); } .lf-mail { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--tp-muted); } .lf-mail a { color: var(--tp-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .lf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 700px) { .lf-grid { grid-template-columns: minmax(0, 1fr); } } .lf-full { grid-column: 1 / -1; } .lf-l { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--tp-ink); } .lf-i, .lf-t, .lf-s { width: 100%; min-height: 50px; padding: 11px 14px; border: 1.5px solid #cfd8d7; border-radius: var(--tp-radius); background: #fff; color: var(--tp-ink); font: inherit; font-size: 17px; line-height: 1.5; } .lf-t { min-height: 120px; resize: vertical; } .lf-i:focus, .lf-t:focus, .lf-s:focus { outline: none; border-color: var(--tp-accent); box-shadow: 0 0 0 3px rgba(44, 110, 107, .18); } .lf-kind { display: flex; flex-wrap: wrap; gap: 10px; } .lf-kind label { position: relative; flex: 1 1 150px; margin: 0; } .lf-kind input { position: absolute; opacity: 0; width: 0; height: 0; } .lf-kind span { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1.5px solid #cfd8d7; border-radius: var(--tp-radius); background: #fff; color: var(--tp-body); font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .lf-kind input:checked + span { border-color: var(--tp-band); background: var(--tp-band); color: #fff; } .lf-kind input:focus-visible + span { box-shadow: 0 0 0 3px rgba(44, 110, 107, .3); } .lf-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 32px; border: 0; border-radius: 999px; background: var(--tp-accent); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .2s ease, transform .15s ease; } .lf-btn:hover { background: var(--tp-accent-ink); color: #fff; } .lf-btn:active { transform: scale(.98); } .lf-note { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--tp-muted); } .lf-err { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: #b3261e; } /* the honeypot: off-screen, never announced, never tabbed to */ .lf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------- Get In Touch: the details beside the forms ---------- The page body (address, email, phone, the map) sits on the cedar band, so the way to reach the park reads first and stays in view. */ .tp-contact-info.tp-prose { background: var(--tp-band); color: var(--tp-on-band); border-radius: var(--tp-radius); padding: clamp(28px, 3.4vw, 44px); font-size: 17px; line-height: 1.65; max-width: none; } .tp-contact-info.tp-prose :is(p, div, span, li) { color: var(--tp-on-band); } .tp-contact-info.tp-prose :is(strong, b) { color: #fff; } .tp-contact-info.tp-prose a { color: #fff; text-decoration-color: var(--tp-sage); } .tp-contact-info.tp-prose > p:first-child { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: #fff; } .tp-contact-info .tp-embed-blocked { margin-top: 20px; border-radius: var(--tp-radius); } .tp-contact-info iframe { display: block; width: 100%; min-height: 280px; border: 0; border-radius: var(--tp-radius); margin-top: 20px; } .tp-contact .tp-section-title { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 24px; } /* ---------- a contents list beside a long text (the legal pages) ---------- */ .tp-article-main--toc > .container { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 72px; align-items: start; } .tp-article-main--toc .tp-column { max-width: 780px; margin-inline: 0; } .tp-article-main--toc #all_body.tp-article { margin-inline: 0; } .tp-article-main--toc .tp-related { grid-column: 1 / -1; } .tp-toc { position: sticky; top: 32px; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 24px; background: var(--tp-tint); border-radius: var(--tp-radius); } .tp-toc-title { margin: 0 0 14px; font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; font-size: 26px; line-height: 1; color: var(--tp-ink); } .tp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .tp-toc li { counter-increment: toc; } .tp-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px; padding: 8px 0; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--tp-body); border-top: 1px solid var(--tp-line); } .tp-toc li:first-child a { border-top: 0; } .tp-toc a::before { content: counter(toc); font-family: var(--tp-display); font-weight: 600; font-size: 17px; color: var(--tp-accent); } .tp-toc a:hover { color: var(--tp-accent-ink); } #all_body.tp-article h2[id] { scroll-margin-top: 24px; } @media (max-width: 991px) { .tp-article-main--toc > .container { grid-template-columns: minmax(0, 1fr); gap: 40px; } .tp-toc { position: static; } } /* ---------- self-designed bodies ---------- Pages whose Control body brings its own