/* Twoplus Projects: styles for what the shortcodes render (category list, marquee, chips, project grid, lightbox). Colours, type and spacing come from the design tokens of the site (--ink, --paper, --accent, --step-*, --space-*, --gutter ..., defined in Bricks) and the shared .btn / .wrap classes. */ @keyframes fadeIn { from { opacity: 0; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes shimmer { to { background-position: -200% 0; } } .marquee { background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap; padding: var(--space-s) 0; } .marquee__track { display: inline-flex; animation: marquee 45s linear infinite; } .marquee__track span { font-weight: 800; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); letter-spacing: -.02em; padding-inline: var(--space-m); text-transform: uppercase; } .marquee__track b { color: var(--accent); font-weight: 800; } /* ============================================================ categories (home) */ .clist { padding-bottom: var(--space-2xl); } .crow { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1.5fr) minmax(0, 1fr) 3.5rem; align-items: center; gap: 0 var(--space-m); padding-block: var(--space-s); text-decoration: none; transition: color .2s; --nudge: var(--space-s); } .crow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease) var(--d, 0s); } .clist.in .crow::before, .no-io .crow::before { transform: none; } .crow:last-child { border-bottom: 1px solid var(--line); } .crow__n { font: 500 var(--step--2)/1 var(--mono); color: var(--muted); letter-spacing: .06em; } .crow__t { font-weight: 800; font-size: var(--step-3); letter-spacing: -.04em; line-height: 1.02; overflow-wrap: anywhere; } .crow__d { font-size: var(--step--1); line-height: 1.4; color: var(--muted); max-width: 34ch; transition: color .2s; } .crow__thumb { display: none; position: relative; width: clamp(3rem, 2.6rem + 1.6vw, 3.75rem); aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: transparent; } .crow__thumb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 22px/1 var(--font); font-style: normal; letter-spacing: -.05em; color: hsl(14 80% 55% / .55); transition: opacity .35s; } .crow__thumb i b { font-weight: 500; font-size: .66em; font-style: normal; margin-left: .05em; } .crow__thumb canvas, .crow__thumb .icon3d-img, .peek canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s, transform .5s var(--ease); } .crow:hover .crow__thumb canvas, .crow:focus-visible .crow__thumb canvas, .crow:hover .crow__thumb .icon3d-img, .crow:focus-visible .crow__thumb .icon3d-img { transform: scale(1.08); } .crow__thumb canvas.is-ready, .crow__thumb .icon3d-img, .peek canvas.is-ready { opacity: 1; } .crow__thumb:has(canvas.is-ready) i, .crow__thumb:has(.icon3d-img) i, .peek:has(canvas.is-ready) i { opacity: 0; } canvas.is-lost { visibility: hidden; transition: none; } /* WebGL context lost: never the browser's blank box */ .crow__arrow { justify-self: end; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; border: 1.5px solid var(--line); transition: background .25s, border-color .25s, color .25s, transform .4s var(--ease); } /* Hover/focus nudges the number, name and description to the right with a transform (not padding): the columns keep their width, so a long name never re-wraps and the row never changes height. The nudge is smaller than the column gap. Hover only on devices that really hover (no stuck state after a tap); keyboard focus gets the same look. */ .crow__n, .crow__t, .crow__d { transition: transform .35s var(--ease), color .2s; } .crow:focus-visible { color: var(--accent); } .crow:focus-visible :is(.crow__n, .crow__t, .crow__d) { transform: translateX(var(--nudge)); } .crow:focus-visible .crow__d { color: var(--ink); } .crow:focus-visible .crow__arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); } @media (hover: hover) { .crow:hover { color: var(--accent); } .crow:hover :is(.crow__n, .crow__t, .crow__d) { transform: translateX(var(--nudge)); } .crow:hover .crow__d { color: var(--ink); } .crow:hover .crow__arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); } } .filters { position: sticky; top: calc(var(--header-h) + var(--safe)); z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); } .chips { position: relative; display: flex; gap: var(--space-xs); padding-block: var(--space-xs); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } /* Chip row: scrolls sideways. The arrow buttons sit over the row's ends (they never take space, so showing or hiding them moves nothing) and only show when there is more in that direction; soft fades mark the hidden part. (Phones: swipe; no arrows.) */ .chipbar { position: relative; } .chipbar .chips { --fl: 0px; --fr: 0px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); } .chipbar.can-prev .chips { --fl: 56px; } .chipbar.can-next .chips { --fr: 56px; } .chipbar .chip { min-height: 44px; align-items: center; } .chipbar__btn { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.1rem; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .35); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s, border-color .2s; } .chipbar__prev { left: calc(var(--gutter) - 6px); } .chipbar__next { right: calc(var(--gutter) - 6px); } .chipbar__btn:hover { border-color: var(--ink); } .chipbar.can-prev .chipbar__prev, .chipbar.can-next .chipbar__next { visibility: visible; opacity: 1; } @media (max-width: 720px), (hover: none) { .chipbar__btn { display: none; } } /* While another category loads (no page reload). */ .chip { flex: none; display: inline-flex; align-items: baseline; gap: 7px; border: 1.5px solid var(--line); background: transparent; padding: .6em 1.1em; border-radius: 999px; font-weight: 700; font-size: var(--step--1); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; } .chip:hover { border-color: var(--ink); transform: translateY(-1px); } .chip[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .cat-head { scroll-margin-top: calc(var(--header-h) + var(--safe) + 72px); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-m); padding-block: var(--space-m) var(--space-s); min-height: 5.75rem; animation: fadeIn .5s ease; } .cat-head h3 { font-weight: 800; font-size: var(--step-2); letter-spacing: -.03em; line-height: 1.1; } .cat-head p { color: var(--muted); font-size: var(--step--1); } /* Even rows (template-parts/work-grid.php): a plain CSS grid, --cols-max columns, every card the same height (fixed image aspect-ratio + object-fit: cover, below). No JavaScript needed for layout; twoplus-work.js only appends and removes cards. */ .grid { --cols-max: 4; display: grid; grid-template-columns: repeat(var(--cols-max), minmax(0, 1fr)); gap: var(--gap-grid); padding-bottom: var(--space-2xl); } .card.is-ghost { pointer-events: none; } .card__ghost { display: block; width: 100%; aspect-ratio: 4 / 3; } /* TV spots: two big 16:9 players instead of the image wall */ .grid.is-video { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-l) var(--gap-grid); align-items: start; } .grid.is-video .card { margin: 0; } .vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: linear-gradient(150deg, hsl(var(--h, 14) 38% var(--phl1)), hsl(var(--h, 14) 30% var(--phl2))); } .vid iframe, .vid__play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .vid__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; display: grid; place-items: center; } .vid__btn { position: relative; display: grid; place-items: center; width: clamp(3.5rem, 3rem + 2vw, 4.75rem); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); transition: transform .35s var(--ease); } .vid__btn svg { width: 42%; fill: currentColor; margin-left: 6%; } .vid__play:hover .vid__btn { transform: scale(1.1); } .vid__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-m); padding-top: var(--space-s); } .vid__cap strong { font-weight: 800; font-size: var(--step-0); letter-spacing: -.01em; line-height: 1.25; } .vid__link { font: 500 var(--step--2)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; white-space: nowrap; } .vid__link:hover { color: var(--accent); } .more { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); min-height: 3.5rem; padding-bottom: var(--space-2xl); margin-top: calc(var(--space-l) * -1); text-align: center; } .more__msg { display: none; margin: 0; font: 500 var(--step--2)/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .more__error { align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); } .js .more[data-state="loading"] .more__loading, .js .more[data-state="end"] .more__end { display: block; } .js .more[data-state="error"] .more__error { display: flex; } .js .more:not([data-state="idle"]) .more__btn { display: none; } .card { position: relative; margin: 0; } /* entrance animation: twoplus-motion.js (GSAP ScrollTrigger, batch 19) -- was an on-insert CSS keyframe, now gated by actually scrolling into view */ .card__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; text-align: left; position: relative; box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; } .card__btn:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ink), 0 14px 30px -14px rgba(0, 0, 0, .45); } .card__btn { overflow: hidden; } .card__btn:hover img { transform: scale(1.045); } /* The image box always has the image's aspect ratio (before and after loading), so a card never changes height. */ .card:not(.is-loaded) .card__btn { background: linear-gradient(110deg, var(--shimmer-a) 30%, var(--shimmer-b) 50%, var(--shimmer-a) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; } .card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0; transition: opacity .5s, transform .5s var(--ease); } .card.is-loaded img { opacity: 1; } .card__cap { display: block; padding: .7em 1em .8em; border-top: 1px solid var(--line); font-weight: 700; font-size: var(--step--1); letter-spacing: -.01em; background: var(--paper); } .card__cap, .card__cap small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line: fixed height (the full title is in the lightbox and the button's label) */ .card__cap small { display: block; font: 500 var(--step--2)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* Per-image description (Twoplus > Εικόνες): an overlay on the photo, shown on hover and keyboard focus (never hover-only: .card__btn is a real button, so Tab reaches it like any other control). Touch visitors reach the same text in the lightbox that opens on tap. Only printed at all when the image has one (Task 2, batch 14). */ .card__media { position: relative; display: block; overflow: hidden; } .card__desc { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.6em 1em .8em; background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent); color: #fff; font-size: var(--step--2); line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); } .card__btn:hover .card__desc, .card__btn:focus-visible .card__desc { opacity: 1; transform: none; } /* Per-image link (Twoplus > Εικόνες, batch 18): a button over the top-right corner of the image, a sibling of .card__btn (not nested inside it -- a