/* Twoplus theme styles. Fonts are local (assets/fonts). */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-200-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-200-800-greek.woff2") format("woff2"); unicode-range: U+0370-03FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-400-greek.woff2") format("woff2"); unicode-range: U+0370-03FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-500-greek.woff2") format("woff2"); unicode-range: U+0370-03FF; } /* ============================================================ tokens */ :root { /* dark is the default theme */ --paper: #0f0f0f; --paper-2: #181818; --ink: #f3f0e8; --muted: #9d998d; --accent: #ff4a1c; --line: rgba(243, 240, 232, .16); --card: #1a1a1a; --shimmer-a: #1a1a1a; --shimmer-b: #262626; --band: #171717; --band-fg: #f3f0e8; --band-muted: #9d998d; --band-line: rgba(243, 240, 232, .16); --phl1: 24%; --phl2: 17%; --phfg: 78%; --radius: 6px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* fluid type: each step scales smoothly between a 360px and a 1440px screen */ --step--2: clamp(.72rem, .69rem + .14vw, .8rem); --step--1: clamp(.85rem, .81rem + .18vw, .94rem); --step-0: clamp(1rem, .95rem + .22vw, 1.125rem); --step-1: clamp(1.15rem, 1.02rem + .6vw, 1.45rem); --step-2: clamp(1.4rem, 1.1rem + 1.3vw, 2.15rem); --step-3: clamp(1.6rem, .9rem + 3.6vw, 3.75rem); --step-4: clamp(2.5rem, 1rem + 6.6vw, 6.75rem); --step-hero: clamp(3.5rem, .5rem + 12vw, 11.875rem); /* fluid spacing */ --space-2xs: clamp(.25rem, .22rem + .15vw, .375rem); --space-xs: clamp(.5rem, .44rem + .28vw, .75rem); --space-s: clamp(.75rem, .64rem + .5vw, 1.125rem); --space-m: clamp(1rem, .8rem + .95vw, 1.75rem); --space-l: clamp(1.5rem, 1rem + 2.3vw, 3rem); --space-xl: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem); --space-2xl: clamp(3.5rem, 2rem + 7vw, 8rem); --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem); --gap-grid: clamp(.5rem, .33rem + .75vw, 1rem); --header-h: clamp(3.5rem, 3.3rem + .6vw, 4rem); --safe: env(safe-area-inset-top, 0px); --ease: cubic-bezier(.2, .7, .2, 1); color-scheme: dark; } :root[data-theme="light"] { --paper: #f3f0e8; --paper-2: #e9e5da; --ink: #101010; --muted: #6a665d; --line: rgba(16, 16, 16, .14); --card: #ffffff; --shimmer-a: #ffffff; --shimmer-b: #eee9dc; --band: #101010; --band-fg: #f3f0e8; --band-muted: #a6a296; --band-line: rgba(243, 240, 232, .18); --phl1: 90%; --phl2: 82%; --phfg: 22%; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--safe)); -webkit-text-size-adjust: 100%; } /* Lenis (twoplus-motion.js, batch 19): the handful of rules its own stylesheet recommends, kept here instead of a separate file. It never replaces native scrolling with a transformed wrapper, so none of this changes layout. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; animation: pageIn .6s var(--ease) backwards; } body.is-leaving { opacity: 0; transition: opacity .22s ease; } img { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; } ol, ul { list-style: none; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; } [hidden] { display: none !important; } .theming, .theming *, .theming *::before, .theming *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, box-shadow .45s ease !important; } .wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 100; border-radius: 4px; } .skip:focus { left: 8px; } @keyframes pageIn { from { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } } @keyframes lineUp { from { transform: translateY(140%) rotate(3deg); } } /* starts fully below its row's mask (the 3° turn lifts the left end) */ @keyframes pulse { 50% { transform: scale(1.7); opacity: .5; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes viewIn { from { opacity: 0; transform: translateY(14px); } } /* scroll progress */ .progress { position: fixed; z-index: 70; left: 0; right: 0; top: var(--safe); height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; } /* scroll reveal (only when JS + IntersectionObserver are present) */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); } .js .reveal.in { opacity: 1; transform: none; } .view-in { animation: viewIn .6s var(--ease); } .lang-anim [data-i18n], .lang-anim [data-i18n-html] { animation: fadeIn .45s ease; } /* ============================================================ header */ .site-header { position: sticky; top: var(--safe); z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .bar { display: flex; align-items: center; height: 100%; } .logo { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; font-weight: 800; font-size: clamp(1.7rem, 1.5rem + .8vw, 2rem); letter-spacing: -.04em; line-height: 1; margin-right: auto; } .logo b { color: var(--accent); display: inline-block; font-size: .62em; font-weight: 500; transition: transform .6s var(--ease); } .logo:hover b { transform: rotate(180deg); } .logo em { font: 500 var(--step--2)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-left: 12px; font-style: normal; color: var(--muted); } .nav { display: flex; align-items: center; gap: clamp(1rem, .5rem + 2.2vw, 2.1rem); font-weight: 600; font-size: var(--step--1); } .nav a { text-decoration: none; position: relative; padding: 6px 0; } .nav a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right .25s ease; } .nav a:not(.nav__cta):hover::after, .nav a[aria-current="page"]::after { right: 0; } .nav__cta { background: var(--ink); color: var(--paper); padding: .6em 1.2em !important; border-radius: 999px; transition: background .2s, color .2s; } .nav__cta:hover { background: var(--accent); color: #fff; } .tools { display: flex; align-items: center; gap: 8px; margin-left: var(--space-m); } .seg { display: inline-flex; align-items: center; height: 40px; padding: 3px; border: 1.5px solid var(--line); border-radius: 999px; background: none; transition: border-color .2s; } .seg:hover { border-color: var(--ink); } .seg span { display: grid; place-items: center; height: 100%; padding: 0 10px; border-radius: 999px; font: 600 var(--step--2)/1 var(--mono); letter-spacing: .04em; color: var(--muted); transition: background .3s var(--ease), color .3s; } .seg[data-lang="en"] [data-l="en"], .seg[data-lang="el"] [data-l="el"] { background: var(--ink); color: var(--paper); } .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: none; transition: border-color .2s, background .2s; } .icon-btn:hover { border-color: var(--ink); } .icon-btn svg { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease), opacity .3s; } .icon-btn .sun { opacity: 1; transform: none; } .icon-btn .moon { opacity: 0; transform: rotate(90deg) scale(.4); } :root[data-theme="light"] .icon-btn .sun { opacity: 0; transform: rotate(-90deg) scale(.4); } :root[data-theme="light"] .icon-btn .moon { opacity: 1; transform: none; } .menu-btn { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; } .menu-btn i { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform .25s, top .25s; } .menu-btn i:first-child { top: 18px; } .menu-btn i:last-child { top: 26px; } .menu-btn[aria-expanded="true"] i:first-child { top: 22px; transform: rotate(45deg); } .menu-btn[aria-expanded="true"] i:last-child { top: 22px; transform: rotate(-45deg); } /* ============================================================ hero */ .hero { --plus-len: clamp(185px, 18.5vw, 340px); --plus-top: var(--space-m); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-l) var(--gutter); padding-block: var(--space-l) var(--space-xl); align-items: end; } .eyebrow { grid-column: 1 / -1; font: 500 var(--step--2)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: var(--muted); animation: fadeIn .9s ease backwards; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; } .hero__title { display: flex; flex-direction: column; font-weight: 800; font-size: var(--step-hero); line-height: .9; letter-spacing: -.055em; position: relative; z-index: 1; } /* Each line is masked for the reveal. line-height .9 is tighter than the letters: the mask gets room below the baseline for the deepest descender (g, y, p, j, Greek γ ρ φ χ ψ: up to .26em in Manrope) through padding-bottom, and an equal negative margin keeps the line spacing exactly as before. */ .hero__title .row { display: block; overflow: hidden; padding-bottom: .23em; margin-bottom: -.19em; } .hero__title .ln { display: block; white-space: nowrap; animation: lineUp 1.1s cubic-bezier(.2, .8, .2, 1) backwards; } .hero__title .row:nth-child(1) .ln { animation-delay: .05s; } .hero__title .row:nth-child(2) .ln { animation-delay: .18s; } .hero__title .row:nth-child(3) .ln { animation-delay: .31s; } .hero__title em { font-style: normal; color: var(--accent); } .stop { font-style: normal; color: var(--accent); } .accent { font-style: normal; color: var(--accent); } /* *word* in the Studio texts */ .hero__side { position: relative; z-index: 1; display: grid; gap: var(--space-m); padding-bottom: var(--space-2xs); } .hero__side > * { animation: rise .9s var(--ease) backwards; } .hero__side > :nth-child(1) { animation-delay: .55s; } .hero__side > :nth-child(2) { animation-delay: .68s; } .hero__side > :nth-child(3) { animation-delay: .81s; } .lead { font-size: var(--step-1); line-height: 1.45; max-width: 30ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: .9em 1.5em; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--step--1); background: none; transition: background .2s, color .2s, transform .2s, border-color .2s; } .btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn span[aria-hidden] { display: inline-block; transition: transform .3s var(--ease); } .btn:hover span[aria-hidden] { transform: translateX(4px); } .count { padding-top: var(--space-s); border-top: 1px solid var(--line); font: 500 var(--step--2)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* ---- 3D spinning plus (hero): a real WebGL mesh (twoplus-3d.js), rounded on every edge. Until its first frame is drawn (or if WebGL/JS is unavailable) a still picture of that same first frame stands in: the box is sized from the first paint and transparent, so nothing shifts and no coloured placeholder is ever shown. Placed in the empty top-right corner of .hero__grid, inside the page margin. The grid starts right under the sticky header (the header keeps its own --header-h of space in the page flow), so --plus-top is the gap below the header's bottom edge at any header height. Size and gap are set on .hero (--plus-len, --plus-top) per breakpoint. */ .hero__plus3d { position: absolute; top: var(--plus-top); right: var(--gutter); width: var(--plus-len); height: var(--plus-len); pointer-events: none; background: none; } .hero__plus3d-fb { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0s .3s; } /* hidden once the canvas has faded in over it: no dip */ .plus3d-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: transparent; transition: opacity .3s; } .plus3d-gl.is-ready { opacity: 1; } .hero__plus3d:has(.plus3d-gl.is-ready) .hero__plus3d-fb { opacity: 0; } .hero__plus3d:not(:has(.plus3d-gl.is-ready)) .hero__plus3d-fb { transition: none; } /* WebGL context lost: the still is back at once */ /* 961-1000px: two narrow columns, the side text starts high; keep a clear gap above it. */ @media (max-width: 1000px) { .hero { --plus-len: calc(18.5vw - 14px); } } /* Up to 960px the hero is one column (below), with room for the "+" next to the headline. */ @media (max-width: 960px) { .hero { --plus-len: clamp(170px, 24vw, 216px); } .hero__grid { grid-template-columns: 1fr; } } /* Phones: the headline fills the width, so the "+" gets its own space above the eyebrow instead of covering the text. */ @media (max-width: 560px) { .hero { --plus-len: clamp(200px, 60vw, 260px); --plus-top: var(--space-s); } .hero__grid { padding-top: calc(var(--plus-top) + var(--plus-len) + var(--space-xs)); } } .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; } /* ============================================================ hero 2 (home, batch 20): Tech Text headline, below hero 1. On the --band surface (same dark block the services section and footer already use), so it reads as a distinct, second moment rather than a continuation of hero 1 -- GSAP fades it up on scroll (twoplus-motion.js), it is never visible-then-hidden before that, and the headline mounts its canvas effect (tech-text.js) off the same scroll trigger, never on page load. */ .hero2 { position: relative; overflow: hidden; background: var(--band); color: var(--band-fg); border-bottom: 1px solid var(--line); } .hero2::before { /* a quiet dot-grid texture, faded out toward the edges -- decorative only */ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--band-line) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 35%, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 30% 35%, #000 0%, transparent 100%); } .hero2__grid { position: relative; padding-block: var(--space-2xl); } .hero2__intro { display: grid; gap: var(--space-m); } /* the title spans the full wrap width (more room for tech-text.js to size up the headline); .hero2__subtext keeps its own measure below */ .hero2__title { --tt-h: clamp(7rem, 3.5rem + 15vw, 14rem); margin: 0; height: var(--tt-h); font-weight: 800; font-size: var(--step-3); line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; } .hero2__subtext { font-size: var(--step-1); line-height: 1.5; color: var(--band-muted); max-width: 42ch; } .hero2__cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); } .hero2 .btn { border-color: var(--band-fg); } /* var(--ink), the default border, is indistinguishable from var(--band) in light mode */ .hero2 .btn--solid { background: var(--band-fg); color: var(--band); } .hero2 .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .hero2 .btn:not(.btn--solid):hover { background: var(--band-fg); color: var(--band); } @media (max-width: 560px) { .hero2__title { --tt-h: clamp(5.5rem, 2.5rem + 34vw, 8.5rem); font-size: var(--step-2); } } /* ============================================================ section heads */ .section-head { padding-block: var(--space-2xl) var(--space-l); display: grid; grid-template-columns: 1fr; gap: var(--space-xs); } .section-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-l); } .kicker { font: 500 var(--step--2)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } h1.h-xl, h2 { font-weight: 800; font-size: var(--step-4); line-height: .95; letter-spacing: -.045em; overflow-wrap: anywhere; } h2 em, h1 em { font-style: normal; color: var(--accent); } h2 b { color: var(--accent); } .section-head__note { color: var(--muted); max-width: 52ch; } /* ============================================================ 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); } } /* image that follows the pointer over the category list (desktop only) */ .peek { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(220px, 21vw, 320px); aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: visible; pointer-events: none; translate: var(--x, -999px) var(--y, 0px); opacity: 0; transform: scale(.82) rotate(-5deg); transition: opacity .25s ease, transform .45s var(--ease); background: transparent; } .peek.on { opacity: 1; transform: scale(1) rotate(-2deg); } .peek i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 88px/1 var(--font); font-style: normal; letter-spacing: -.06em; color: hsl(14 70% 60% / .35); transition: opacity .35s; } .peek i b { font-weight: 500; font-size: .66em; font-style: normal; margin-left: .05em; } @media (hover: none), (pointer: coarse) { .peek { display: none; } } /* ============================================================ work page */ .page-head { padding-block: var(--space-xl) var(--space-m); display: grid; gap: var(--space-s); } .crumb { display: flex; gap: var(--space-xs); align-items: center; font: 500 var(--step--2)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .crumb a { text-decoration: none; color: var(--ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; } .crumb a:hover { color: var(--accent); } .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). */ #work-view { transition: opacity .2s; } #work-view.is-switching { opacity: .45; pointer-events: none; } .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), 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