:root { --bg: #f8fbf6; --surface: #ffffff; --surface-alt: #edf4ee; --text: #1f3a2c; --muted: #6c8579; --line: #cee0d3; --line-strong: #b4d2bf; --accent: #3d8867; --accent-soft: #d7ecdd; --accent-dark: #2f6f55; --confirmed: #2f6f55; --jade: #7fbfa1; --jade-deep: #2f6f55; --cream: #f5ecd6; --tentative: #a7651f; --gold: #b8945a; --gold-light: #d6b884; --gold-deep: #8a6c3d; --gold-shimmer: linear-gradient(135deg, #8a6c3d 0%, #c9a86a 25%, #e7d3a3 48%, #a8835c 75%, #8a6c3d 100%); --jade-shimmer: linear-gradient(135deg, #2f6f55 0%, #5fa784 25%, #a8d4be 48%, #3d8867 75%, #2f6f55 100%); --shadow: 0 14px 36px rgba(40, 80, 60, 0.08); /* Jade marble textures (SVG feTurbulence noise, tileable) */ --jade-veins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1100'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.40 0 0 0 0 0.30 0 0 0 0.20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); --jade-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='1200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.98 0 0 0 0 0.94 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); --jade-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); /* Softer variants: white-dominant marble for non-hero areas */ --jade-veins-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='1300'%3E%3Cfilter id='m2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0020' numOctaves='4' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.45 0 0 0 0 0.34 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m2)'/%3E%3C/svg%3E"); --jade-flow-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='1400'%3E%3Cfilter id='f2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0010' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1.00 0 0 0 0 1.00 0 0 0 0 0.98 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f2)'/%3E%3C/svg%3E"); --radius: 16px; --container: 1200px; --font-body: "Space Grotesk", sans-serif; --font-ui: "Space Grotesk", sans-serif; /* Spacing density tokens — defaults (relaxed). Override via or "dense". */ --space-section-y: 56px; --space-hero-top: 88px; --space-hero-min: 64svh; --space-card-pad: 24px 20px; --space-schedule-pad: 14px 24px; --space-grid-gap: 16px; --space-list-gap: 14px; } [data-density="compact"] { --space-section-y: 40px; --space-hero-top: 60px; --space-hero-min: 52svh; --space-card-pad: 18px 18px; --space-schedule-pad: 10px 22px; --space-grid-gap: 12px; --space-list-gap: 10px; } [data-density="dense"] { --space-section-y: 28px; --space-hero-top: 40px; --space-hero-min: 44svh; --space-card-pad: 12px 16px; --space-schedule-pad: 7px 18px; --space-grid-gap: 8px; --space-list-gap: 8px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg); background-image: var(--jade-flow-soft), var(--jade-veins-soft), var(--jade-grain); background-size: 2000px 1400px, 1800px 1300px, 240px 240px; background-repeat: repeat, repeat, repeat; background-blend-mode: screen, multiply, normal; color: var(--text); font-family: var(--font-body); } img { display: block; max-width: 100%; } a { color: var(--accent-dark); text-decoration: none; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; } .site-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 20; background: rgba(243, 247, 240, 0.85); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(206, 224, 211, 0.9); } .nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; background-image: var(--gold-shimmer); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .brand:hover { filter: brightness(1.08); } .brand-logo { display: none; } .site-nav { display: flex; align-items: center; gap: 18px; } .site-nav a, .nav-toggle, .button-primary, .button-secondary, .social-button { font-family: var(--font-ui); } .site-nav a { position: relative; color: rgba(31, 58, 44, 0.62); font-size: 1rem; font-weight: 700; transition: color 180ms ease, opacity 180ms ease; } .site-nav a.active, .site-nav a:hover { color: var(--text); } .site-nav a::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 100%; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 86%, white); transform: scaleX(0); transform-origin: left center; transition: transform 180ms ease; } .site-nav a.active::after, .site-nav a:hover::after { transform: scaleX(1); } .nav-toggle { display: none; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.82); color: var(--text); border-radius: 999px; min-height: 42px; padding: 0 16px; font-size: 0.92rem; font-weight: 700; } .hero { position: relative; min-height: var(--space-hero-min); padding: var(--space-hero-top) 0 0; background: var(--jade-grain), url("assets/images/ECCV_2026_Logo_v1.svg") center bottom / min(calc(var(--container) + 120px), calc(100% - 16px)) auto no-repeat, radial-gradient(ellipse 120% 140% at 50% 45%, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.95) 18%, rgba(252, 254, 252, 0.78) 38%, rgba(238, 248, 240, 0.55) 58%, rgba(218, 236, 224, 0.28) 80%, transparent 100%), linear-gradient(90deg, rgba(63, 135, 105, 0.42) 0%, rgba(63, 135, 105, 0.18) 14%, transparent 32%, transparent 68%, rgba(63, 135, 105, 0.18) 86%, rgba(63, 135, 105, 0.42) 100%), radial-gradient(ellipse 65% 55% at 16% 8%, rgba(63, 135, 105, 0.22), transparent 60%), radial-gradient(ellipse 60% 50% at 84% 20%, rgba(127, 191, 161, 0.20), transparent 58%), radial-gradient(ellipse 55% 45% at 70% 78%, rgba(47, 111, 85, 0.18), transparent 60%), radial-gradient(ellipse 38% 30% at 28% 82%, rgba(245, 236, 214, 0.32), transparent 60%), linear-gradient(180deg, #e6f0e8 0%, #ccdfd1 50%, #aac8b4 100%); background-blend-mode: multiply, normal, normal, normal, normal, normal, normal, normal, normal; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(232, 244, 235, 0.62), rgba(214, 232, 218, 0.78) 50%, rgba(196, 220, 204, 0.86) 72%), linear-gradient(180deg, rgba(232, 244, 235, 0.20), rgba(206, 224, 211, 0.18)), radial-gradient(circle at 50% 72%, rgba(244, 250, 245, 0.50), transparent 40%); pointer-events: none; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 260px; background: linear-gradient( 180deg, rgba(170, 200, 180, 0) 0%, rgba(190, 215, 198, 0.22) 22%, rgba(208, 226, 213, 0.50) 48%, rgba(220, 232, 222, 0.72) 70%, rgba(228, 238, 228, 0.88) 87%, #e6efe7 100% ); pointer-events: none; } .hero-inner { position: relative; z-index: 1; text-align: center; } .hero-kicker { margin: 0 0 18px; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; background-image: var(--gold-shimmer); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } h1, h2, h3 { font-family: var(--font-ui); color: var(--text); } h1 { max-width: none; margin: 0 auto; text-align: center; font-size: 3.3rem; font-weight: 900; line-height: 0.95; letter-spacing: 0; color: var(--text); } .hero-line { display: block; } .hero-line-accent { font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; margin-bottom: 20px; background-image: var(--jade-veins), linear-gradient(135deg, #1f5a44 0%, #3d8867 22%, #7fbfa1 48%, #2f6f55 72%, #5fa784 100%); background-size: 800% 800%, 100% 100%; background-position: 0% 0%, 0% 0%; background-blend-mode: multiply, normal; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(63, 135, 105, 0.25)); } .hero-line-accent::after { content: ""; display: block; width: 96px; height: 2px; margin: 22px auto 0; background-image: var(--gold-shimmer); border-radius: 999px; box-shadow: 0 1px 4px rgba(138, 108, 61, 0.30); } .hero-line:not(.hero-line-accent) { font-size: clamp(1.8rem, 3.25vw, 2.85rem); line-height: 1.1; letter-spacing: -0.02em; white-space: normal; text-align: center; color: #4a5550; } .hero-line + .hero-line { margin-top: 10px; } .hero-summary { max-width: 72ch; margin: 20px auto 0; color: var(--text); font-size: 1.45rem; line-height: 1.85; } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .button-primary, .button-secondary, .social-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 1rem; font-weight: 700; border: 1px solid var(--gold-light); background: rgba(255, 255, 255, 0.88); color: var(--text); transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .button-primary:hover, .button-secondary:hover, .social-button:hover { color: var(--text); border-color: var(--gold); background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 18px rgba(184, 148, 90, 0.22); } .social-button { gap: 8px; min-width: 46px; padding: 0 18px; } .social-button svg { width: 18px; height: 18px; fill: currentColor; } .section { padding: var(--space-section-y) 0; scroll-margin-top: 76px; } .alt-section { position: relative; background: var(--jade-flow-soft), var(--jade-veins-soft), radial-gradient(ellipse 70% 60% at 12% 0%, rgba(127, 191, 161, 0.07), transparent 60%), radial-gradient(ellipse 60% 50% at 88% 100%, rgba(159, 207, 179, 0.08), transparent 60%), var(--surface-alt); background-size: 2000px 1400px, 1800px 1300px, auto, auto, auto; background-blend-mode: screen, multiply, normal, normal, normal; border-top: none; border-bottom: none; } .section h2 { margin: 0 0 20px; font-size: 2.5rem; letter-spacing: -0.03em; text-align: center; color: var(--accent-dark); } .section h2::after { content: ""; display: block; width: 64px; height: 2px; margin: 14px auto 0; background-image: var(--gold-shimmer); border-radius: 999px; } .speakers-subheading { margin-top: 40px !important; } .section p, .section li { color: var(--text); font-size: 1.1rem; line-height: 1.85; } .section p { max-width: 78ch; } .about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; gap: 0 48px; } .about-copy { min-width: 0; } .about-copy p { max-width: none; color: var(--text); font-size: 1.1rem; line-height: 1.78; } .about-meta { margin: 0; grid-template-columns: 1fr; align-self: start; width: 100%; max-width: 240px; justify-self: start; gap: 14px; } .subheading { margin: 32px 0 16px; font-size: 1.25rem; font-weight: 700; background-image: var(--gold-shimmer); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 32px 0 0; } .info-grid.about-meta { grid-template-columns: 1fr; } .info-card, .schedule-item, .paper-item { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--gold-light); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color 220ms ease, box-shadow 220ms ease; } .schedule-item:hover, .info-card:hover, .paper-item:hover { border-color: var(--gold); box-shadow: 0 14px 36px rgba(184, 148, 90, 0.22); } .info-card { min-height: 136px; padding: 20px 22px; border-radius: 14px; } .about-detail { padding: 10px 20px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--gold-light); border-radius: 12px; box-shadow: var(--shadow); transition: border-color 220ms ease, box-shadow 220ms ease; } .about-detail:hover { border-color: var(--gold); box-shadow: 0 14px 36px rgba(184, 148, 90, 0.22); } .about-detail h3 { margin: 0 0 2px; color: var(--muted); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .about-detail p { margin: 0; width: 100%; color: var(--text); font-size: 0.98rem; line-height: 1.4; font-weight: 700; } .about-detail-note { margin-left: 6px; color: var(--muted); font-size: 0.85rem; font-weight: 500; } .info-card h3, .paper-item h3 { margin: 0 0 12px; font-size: 0.92rem; color: var(--muted); } .person-card h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; } .person-link { position: relative; display: inline-block; color: inherit; text-decoration: none; } .person-link:link, .person-link:visited, .person-link:hover, .person-link:focus-visible { color: inherit; } .person-link::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 42px; height: 2px; border-radius: 999px; background-image: var(--gold-shimmer); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 180ms ease; } .person-link:hover::after, .person-link:focus-visible::after { transform: translateX(-50%) scaleX(1); } .person-card p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; } .info-card p, .paper-item p { margin: 0; } .info-card p { max-width: none; width: 100%; color: var(--muted); font-size: 0.9rem; line-height: 1.55; font-weight: 600; } .topic-list { margin: 0; padding-left: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(min-content, 1fr)); gap: 6px 32px; list-style: none; } .topic-list li { padding-left: 18px; position: relative; } .topic-list li::before { content: "–"; position: absolute; left: 0; color: color-mix(in srgb, var(--muted) 78%, white); font-weight: 700; } .section-note { margin: 0 0 24px; } .schedule-list { display: grid; gap: var(--space-grid-gap); } .schedule-header { display: grid; grid-template-columns: 140px minmax(0, 1fr) 220px; gap: 20px; align-items: center; padding: 8px 24px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-header > span:last-child { text-align: right; } .schedule-item { display: grid; grid-template-columns: 140px minmax(0, 1fr) 220px; gap: 20px; align-items: center; padding: var(--space-schedule-pad); } .schedule-time { color: var(--muted); font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; white-space: nowrap; } .schedule-title { margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.4; } .schedule-duration { margin-left: 10px; color: var(--muted); font-size: 0.85rem; font-weight: 500; white-space: nowrap; } .schedule-speaker { color: var(--text); font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; text-align: right; } .schedule-date { display: inline-flex; align-items: center; gap: 12px; margin: -8px 0 24px; color: var(--muted); font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600; } .schedule-date-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(176, 122, 44, 0.14); color: var(--tentative); font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .people-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-grid-gap); } .speakers-grid { justify-content: center; } .organizers-grid { justify-content: center; } .person-card { flex: 0 1 calc((100% - 48px) / 4); max-width: calc((100% - 48px) / 4); min-width: 0; padding: var(--space-card-pad); text-align: center; background: transparent; border: none; border-radius: var(--radius); box-shadow: none; } .person-avatar { width: 185px; height: 185px; border-radius: 20px; border: 2px solid #dcc89c; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.92)); margin: 0 auto 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; transition: border-color 220ms ease, box-shadow 220ms ease; } .person-card:hover .person-avatar { border-color: var(--gold); box-shadow: 0 8px 22px rgba(184, 148, 90, 0.22); } .organizers-grid .person-card:nth-child(-n+4) .person-avatar { border-color: var(--line); } .organizers-grid .person-card:nth-child(-n+4):hover .person-avatar { border-color: var(--accent); box-shadow: 0 8px 22px rgba(63, 135, 105, 0.22); } .person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; } .person-status { display: inline-flex; margin-bottom: 12px; padding: 7px 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .person-status.confirmed { background: rgba(79, 111, 88, 0.12); color: var(--confirmed); } .person-status.tentative { background: rgba(176, 122, 44, 0.14); color: var(--tentative); } .paper-list { display: grid; gap: 16px; } .paper-item { padding: 22px 24px; } .section .cfp-intro { max-width: 100%; width: 100%; margin: 0 0 20px; text-align: left; color: var(--text); font-size: 1.1rem; line-height: 1.75; } .cfp-submission { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); } /* Call for Papers */ .cfp-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; } .cfp-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; margin-top: 56px; } .cfp-topics-intro { margin: 0 0 14px; color: var(--text); font-size: 1.1rem; line-height: 1.65; } .cfp-bottom .subheading { margin-top: 0; } .cfp-guidelines-text { margin: 0 0 20px; color: var(--text); font-size: 1.1rem; line-height: 1.78; } .cfp-paper-types { margin: 0 0 14px; padding: 0 0 0 24px; list-style: none; display: grid; gap: 10px; } .cfp-paper-types li { position: relative; padding-left: 18px; color: var(--text); font-size: 1.05rem; line-height: 1.78; } .cfp-paper-types li::before { content: "–"; position: absolute; left: 0; color: color-mix(in srgb, var(--muted) 78%, white); font-weight: 700; } .cfp-paper-types strong { color: var(--text); font-weight: 700; } .cfp-guidelines-note { margin: 0 0 20px; color: var(--muted); font-size: 1rem; line-height: 1.78; font-style: italic; } .key-dates-list { display: grid; gap: var(--space-list-gap); margin: 0; padding: 0; list-style: none; } .key-dates-note { margin: 12px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.78; } .key-date-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.96); border: 1px solid var(--gold-light); border-radius: 12px; padding: 10px 20px; box-shadow: var(--shadow); transition: border-color 220ms ease, box-shadow 220ms ease; } .key-date-item:hover { border-color: var(--gold); box-shadow: 0 14px 36px rgba(184, 148, 90, 0.22); } .key-date-label { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .key-date-value { font-size: 0.98rem; font-weight: 700; color: var(--text); white-space: nowrap; } .cfp-topics-list { margin: 0; padding: 0 0 0 32px; list-style: none; display: grid; gap: 10px; } .cfp-topics-list li { padding-left: 18px; position: relative; color: var(--text); font-size: 1.1rem; line-height: 1.7; } .contact-plain p, .about-copy p, .section .cfp-intro, .cfp-topics-list li { color: var(--text); } .cfp-topics-list li::before { content: "–"; position: absolute; left: 0; color: color-mix(in srgb, var(--muted) 78%, white); font-weight: 700; } .cfp-topics-list strong { color: var(--text); font-weight: 700; } @media (max-width: 720px) { .cfp-layout, .cfp-bottom { grid-template-columns: 1fr; gap: 28px; } } .contact-plain { max-width: none; margin: 0 auto; text-align: center; } .contact-plain p { margin: 0 0 16px; max-width: none; } .site-footer { padding: 26px 0 42px; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; } .footer-inner p { margin: 0; color: var(--muted); } @media (max-width: 880px) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .site-nav { display: none; position: absolute; top: calc(100% + 8px); right: 16px; flex-direction: column; align-items: stretch; min-width: 220px; padding: 12px; background: rgba(10, 20, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(14px); } .site-nav.nav-open { display: flex; } .schedule-header { display: none; } .schedule-item { grid-template-columns: 1fr; gap: 8px; align-items: start; } .schedule-speaker { text-align: left; } .schedule-duration { display: block; margin-left: 0; margin-top: 4px; } .speakers-grid, .organizers-grid { justify-content: center; } .person-card { flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); } } @media (max-width: 720px) { .container { width: min(var(--container), calc(100% - 20px)); } .hero { padding: 56px 0 42px; } .section { padding: 44px 0; } .info-grid, .speakers-grid, .organizers-grid { justify-content: center; } .person-card { flex-basis: 100%; max-width: 100%; } .about-layout { grid-template-columns: 1fr; gap: 20px; } .footer-inner { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }