/* ========================================================================== CIMEGS conference archive — additions on top of style.css + portal.css. The pages carry so they inherit the genuine events identity (gold accent, warm sand tint, gold header rule). This file adds ONLY the archive-specific furniture the shared system does not provide. Scoped class names (.arc-*, .prose .gallery, etc.) avoid any collision. ========================================================================== */ /* Status pill in the page head (forum concluded) */ .arc-status { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: var(--space-4); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--red-700); padding: .42rem .9rem; border-radius: 99px; } .arc-status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: #fff; opacity: .85; } /* Landing page: a stack of action cards */ .arc-main { padding-block: var(--space-6) var(--space-7); } .arc-stack { display: grid; gap: var(--space-4); } .arc-card { background: var(--surface); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.4rem, 3vw, 2.1rem); } .arc-card > h2 { margin: 0 0 .45rem; font-size: var(--fs-600); } .arc-card > p { color: var(--n-700); margin: 0; max-inline-size: 46rem; } .arc-card.is-feature { border-inline-start: 4px solid var(--division-accent); } .arc-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: var(--space-4); } /* "Explore the forum days" tiles */ .arc-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-block-start: var(--space-4); } .arc-day { text-decoration: none; color: var(--brand); background: var(--surface); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 1.2rem 1.25rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .arc-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--division-accent); } .arc-day .num { font-family: var(--font-mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--division-accent); } .arc-day .ttl { display: block; font-family: var(--font-display); font-size: 1.18rem; margin-block: .35rem .25rem; } .arc-day .date { display: block; font-size: .82rem; color: var(--n-500); } /* Report furniture, used inside .content-sheet > .prose */ .prose .session-meta { background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: .85rem 1.1rem; margin-block: var(--space-3); font-size: .97rem; line-height: 1.65; } .prose .session-meta strong { color: var(--brand); } .prose h3.session-title { border-inline-start: 4px solid var(--division-accent); padding-inline-start: .7rem; } .prose .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-block: var(--space-4); } .prose .gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--blue-050); box-shadow: var(--shadow-1); display: block; } .prose .gallery.single { grid-template-columns: minmax(0, 34rem); justify-content: center; } .prose .gallery.single img { aspect-ratio: 16 / 10; } .prose .gallery-label { font-family: var(--font-display); color: var(--brand); margin-block: var(--space-5) .3rem; font-size: 1.12rem; } .prose .colophon { color: var(--n-500); font-size: .95rem; } .prose .colophon a { color: var(--blue-600); } /* Quiet entrance, reduced-motion safe */ .fade-in { opacity: 0; transform: translateY(14px); animation: arcFadeUp .6s ease forwards; } @keyframes arcFadeUp { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; opacity: 1; transform: none; } .arc-day:hover { transform: none; } }