/* Palette measured from the original Panaroma theme: #ff6600 accent, #151515 bar, #eeeded paper. No webfont -- the original pulls Roboto Condensed from Google, this does not. */ :root { --accent: #ff6600; --ink: #1a1a1a; --bar: #151515; --paper: #eeeded; --grey: #606266; --hair: #d8d6d3; /* ⛔ Not a front-loaded ease. cubic-bezier(.25,.8,.25,1) covers ~80% of the distance in the first quarter of its duration, so a 2.2s opening still looked instant and then crawled. This one spends its time in the middle, which is what "spread apart slowly" actually means. */ --ease: cubic-bezier(.45, .05, .35, 1); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; display: flex; flex-direction: column; min-height: 100svh; } /* ── header ───────────────────────────────────────────────────────────── */ .bar { background: var(--bar); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding: 18px clamp(16px, 4vw, 44px); } .brand { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .bar nav { display: flex; gap: clamp(18px, 3vw, 38px); } .bar nav a { color: #cfcfcf; text-decoration: none; font-size: .88rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); } .bar nav a:hover { color: #fff; } .bar nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* ── the five panels ──────────────────────────────────────────────────── */ /* Stacking order, and it is the whole point of this round: ::before the photograph (z-index 0) ::after the colour wash (z-index 0, painted after ::before) .inner the white type (z-index 1, above both) A pseudo-element is generated as the LAST child of its element, so without the z-index on .inner the wash paints over the text -- which is why the type came out orange-on-orange and everything looked veiled. */ .panels { flex: 1; display: flex; min-height: 0; } .panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; outline: none; transition: flex-grow 1.25s var(--ease); } .panel + .panel { border-left: 1px solid rgba(0,0,0,.35); } .panel::before { content: ""; position: absolute; inset: -2%; z-index: 0; background-image: var(--img); background-size: cover; background-position: center; /* Closed panels were dulled twice over -- a brightness cut AND a dark wash -- which is where "the whole thing is grey" came from. The picture is its own colour now. */ filter: saturate(1) brightness(1); transform: scale(1); transition: transform 3.5s var(--ease), filter 1.2s var(--ease); } .panel::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.26)); transition: background 1.2s var(--ease); } .panel:hover, .panel:focus-visible { flex-grow: 3.2; } .panel:hover::before, .panel:focus-visible::before { filter: saturate(1.05) brightness(1.02); transform: scale(1.05); } .panel:hover::after, .panel:focus-visible::after { background: linear-gradient(180deg, rgba(233,99,6,.88), rgba(198,72,0,.92)); } .panels:hover .panel:not(:hover)::before { filter: saturate(.8) brightness(.86); } .panel:focus-visible { box-shadow: inset 0 0 0 3px rgba(255,255,255,.9); } /* Closed: the name runs down the panel. A title at reading size does not fit across a fifth of the screen, which is why the original shows none at all. */ .tab { position: absolute; z-index: 1; left: 50%; bottom: clamp(20px, 3vh, 40px); transform: translateX(-50%); writing-mode: vertical-rl; rotate: 180deg; font-size: 1.35rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.85); opacity: 1; transition: opacity .5s var(--ease); pointer-events: none; } .panel:hover .tab, .panel:focus-visible .tab { opacity: 0; transition-duration: .3s; } .panel .inner { position: relative; z-index: 1; /* above the wash -- see the note above */ height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 2.6vw, 52px); color: #fff; } .panel h2 { grid-row: 1; margin: 0; font-size: clamp(3.2rem, 4.4vw, 4.6rem); font-weight: 700; letter-spacing: .06em; line-height: 1.05; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 2px 14px rgba(110, 45, 0, .5); opacity: 0; transition: opacity .5s var(--ease); } .panel p { grid-row: 3; margin: 0; max-width: 30rem; font-size: 1.95rem; line-height: 1.5; color: #fff; text-shadow: 0 1px 12px rgba(110, 45, 0, .45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .7s; } .panel:hover h2, .panel:focus-visible h2 { opacity: 1; transition-delay: .15s; } .panel:hover p, .panel:focus-visible p { opacity: 1; visibility: visible; transform: none; /* Half a second later than the heading, so the panel is visibly open before the bottom text arrives instead of both landing together. */ transition: opacity .55s var(--ease) .75s, transform .55s var(--ease) .75s, visibility 0s; } /* ── contact page ─────────────────────────────────────────────────────── */ main.page { flex: 1; padding: clamp(30px, 6vw, 68px) clamp(16px, 4vw, 44px); } main.page .wrap { max-width: 48rem; margin: 0 auto; } main.page h1 { margin: 0 0 30px; font-size: 2.1rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } main.page h1::after { content: ""; display: block; width: 3.5rem; height: 3px; background: var(--accent); margin-top: 14px; } .rows > div { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 17px 0; border-bottom: 1px solid var(--hair); font-size: 1.08rem; } .rows .label { min-width: 9rem; color: var(--grey); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding-top: .4em; } .rows a { color: #c24d00; text-decoration: none; border-bottom: 1px solid rgba(194,77,0,.35); transition: color .3s var(--ease), border-color .3s var(--ease); } .rows a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ── language switch ──────────────────────────────────────────────────── */ /* In the top bar, to the right of the menu. It links to /cs/ and /en/ explicitly, never to "/" -- the root is the address that redirects by Accept-Language, so a link there would bounce the visitor back to the language they were trying to leave. */ .bar .right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap; } /* The glassy dark pill it had when it floated in the corner -- same padding, same type, same blur and shadow. Only the position changed. ⚠ The hairline border is the one addition: that pill lived over photographs, where dark-on-bright reads by itself; on the near-black bar it would dissolve into the background without an edge. */ /* ⛔ Written as `.bar .lang a`, not `.lang a`, and that is the whole reason this thing looked broken. The switcher IS a