@font-face { font-family: Cormorant; src: url("../fonts/cormorant-garamond.39554ff6.woff2") format('truetype'); font-display: swap; } @font-face { font-family: Manrope; src: url("../fonts/manrope.3762a5e7.woff2") format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: Manrope; src: url("../fonts/manrope-semibold.9138880c.woff2") format('truetype'); font-weight: 600; font-display: swap; } :root { color-scheme: light; --ink: #432f2b; --accent: #875535; --paper: #f0e5d3; --line: #bba18a; --muted: #735342; --block: #70452f; --block-ink: #fff0d9; --block-label: #ebcf9f; --texture-wash: 66%; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; margin: 0; min-height: 100vh; padding: 96px 0; background: var(--paper); color: var(--ink); font: 400 15px/1.85 Manrope, sans-serif; isolation: isolate; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--paper) var(--texture-wash), transparent), color-mix(in srgb, var(--paper) var(--texture-wash), transparent)), url("../Risorse/blog/sfondo-galassia-fantasma-prewitt-3x3-ruotato.b0978f92.webp") center / cover no-repeat; opacity: .45; } body.theme-sage { --ink: #193f3a; --accent: #5c714a; --paper: #eeeede; --line: #a5b094; --muted: #4d6753; --block: #355347; --block-ink: #f0efdd; --block-label: #d1d3a9; } body.theme-night { color-scheme: dark; --ink: #ede8d5; --accent: #d0bf8b; --paper: #142e38; --line: #687e7e; --muted: #c1cbc0; --block: #28464c; --block-ink: #f0ead5; --block-label: #d0bf8b; --texture-wash: 81%; } body.theme-iris { --ink: #35354b; --accent: #7b628f; --paper: #eee8eb; --line: #b3a2bc; --muted: #6e627c; --block: #645271; --block-ink: #fbf2f5; --block-label: #e6cddd; } a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; } img { max-width: 100%; height: auto; } .container { width: min(1160px, calc(100% - 96px)); margin-inline: auto; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%); } .skip-link:focus { transform: none; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 18px 36px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 27px 0 24px; } .brand { font: 400 35px/1 Cormorant, Georgia, serif; text-decoration: none; white-space: nowrap; } .site-nav { display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .035em; } .site-nav a { text-decoration: none; border-bottom: 1px solid transparent; padding: 7px 0; } .site-nav a:hover, .site-nav a[aria-current=page] { border-bottom-color: currentColor; } .folio { position: relative; padding: 0 clamp(22px, 5vw, 75px) 36px; margin-top: 26px; } .folio-corners { position: absolute; inset: 12px; pointer-events: none; } .folio-corner { position: absolute; width: clamp(76px, 10vw, 128px); aspect-ratio: 1; display: grid; place-items: center; color: var(--accent); opacity: .75; } .folio-corner .deco-svg { width: 88%; height: auto; transform: rotate(-45deg); } .folio-corner.tl { top: 0; left: 0; } .folio-corner.tr { top: 0; right: 0; transform: scaleX(-1); } .folio-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); } .folio-corner.br { bottom: 0; right: 0; transform: scale(-1); } .page-head { position: relative; padding: 46px 0 24px; text-align: left; } .eyebrow { margin: 0 0 12px; color: var(--accent); text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-align: center; } h1, h2, h3, h4, p { margin-top: 0; } h1, h2, h3, h4 { font-family: Cormorant, Georgia, serif; font-weight: 400; line-height: 1.08; text-wrap: balance; text-align: center; } h1 { font-size: clamp(66px, 8vw, 112px); letter-spacing: -.035em; margin: 0 0 12px; } h2 { font-size: clamp(40px, 4.3vw, 62px); letter-spacing: -.025em; margin-bottom: 22px; } h3 { font-size: clamp(32px, 3vw, 42px); margin: 0 0 12px; } .page-heading { width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; } .page-head > .placeholder { max-width: 49ch; margin: 23px auto 0; font-size: 23px; } .lede { max-width: 62ch; margin: 0 auto; font-size: 19px; } .section { padding: 36px 0 26px; } .section-head { text-align: center; max-width: 760px; margin: 0 auto 32px; } .reading-section { max-width: 65ch; margin: auto; } .reading-section > div:first-child > h2, .reading-section > div:first-child > .eyebrow { text-align: center; } .reading-section > div:first-child > h2 { max-width: 22ch; margin-inline: auto; } .copy { max-width: 65ch; margin-inline: auto; } .copy p { margin-bottom: 22px; } .source-quote { margin-inline: 0; font: 400 clamp(26px, 2.8vw, 34px)/1.5 Cormorant, Georgia, serif; } .source-quote p:last-child { margin-bottom: 0; } .source-note { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 22px; } .workshop-entry { padding: 28px 0 18px; border-top: 1px solid var(--line); } .workshop-entry h4 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 16px; } .programme { margin: 26px 0; border-block: 1px solid var(--line); } .programme summary { padding: 18px 12px; color: var(--accent); font-weight: 600; text-align: center; cursor: pointer; } .programme-copy { padding: 0 8px 18px; } .programme .workshop-entry:first-child { border-top: 0; } .event-record { max-width: 65ch; margin: 48px auto 0; padding-top: 38px; border-top: 1px solid var(--line); } .event-record .meta { text-align: center; } .panel { max-width: 65ch; margin: 24px auto 0; } .placeholder { max-width: 65ch; margin: 18px 0 0; color: var(--muted); font: 400 25px/1.5 Cormorant, Georgia, serif; overflow-wrap: anywhere; } .placeholder::before { content: 'DA COMPLETARE CON ANDREA'; display: block; margin-bottom: 9px; font: 500 9px/1.6 Manrope, sans-serif; letter-spacing: .16em; } .accent-block { padding: clamp(26px, 4vw, 48px); background: var(--block); color: var(--block-ink); border-radius: 64px 0 64px 0; margin: 30px auto 10px; } .accent-block .placeholder { color: inherit; margin: 0; font-size: clamp(25px, 2.6vw, 33px); } .accent-block .placeholder + .placeholder { margin-top: 24px; } .accent-block .placeholder::before, .accent-block .eyebrow { color: var(--block-label); } .accent-block a:hover { color: inherit; } .deco-svg { display: block; width: 100%; height: auto; } .deco-svg * { vector-effect: non-scaling-stroke; } .divider { color: var(--accent); margin: 30px auto; width: min(340px, 75%); pointer-events: none; } .divider .deco-svg { height: 88px; } .divider.wide { width: 100%; margin: 34px auto; } .divider.wide .deco-svg { height: clamp(65px, 8vw, 100px); } .divider.quiet { opacity: .7; width: min(250px, 65%); } .page-head .divider { margin: 12px auto 4px; width: min(270px, 100%); } .motif-seal { width: 150px; height: 116px; padding: 18px 16px; display: grid; place-items: center; margin: 30px auto; color: var(--accent); } .motif-seal .deco-svg { height: 80px; } .diagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); } .diagram-card { min-width: 0; } .diagram-card figure { margin: 0 0 26px; background: #f7f4ea; padding: 22px; min-height: 240px; display: grid; place-items: center; } .diagram-card img { display: block; max-height: 280px; width: 100%; height: auto; object-fit: contain; } .diagram-card h3 { text-align: center; } .diagram-card .placeholder { font-size: 23px; } .media-frame { margin: 32px auto; max-width: 850px; } .media-frame img { display: block; width: 100%; object-fit: contain; } .media-frame figcaption { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; } .artwork-frame { max-width: 600px; } .voice-frame { max-width: 440px; padding: 22px; background: #f7f4ea; } .voice-frame figcaption { color: #605f53; } .action { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; } .event { max-width: 880px; margin: auto; } .event .copy > h3, .event .copy > .eyebrow, .event .meta { text-align: center; } .event .copy > h3 { font-size: 58px; } .meta { color: var(--muted); font-size: 13px; margin-bottom: 25px; } .video { aspect-ratio: 16 / 9; background: #211c29; border-radius: 70px 0 0 0; overflow: hidden; } .video iframe { display: block; width: 100%; height: 100%; border: 0; } .video-source { display: grid; grid-template-columns: .6fr 1fr; gap: 35px; align-items: center; margin-top: 30px; } .video-source h2 { margin: 0; text-align: center; } .video-source p { margin-bottom: 6px; } .video-source .eyebrow { text-align: center; } .portrait-wait { max-width: 320px; padding: 32px; margin: 5px auto 35px; border: 1px solid var(--line); border-radius: 160px 160px 0 0; text-align: center; } .portrait-wait .placeholder { font-size: 23px; } .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding: 27px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; margin-top: 25px; } .site-footer p { margin: 0; } .site-footer .signature { font: 400 28px/1.2 Cormorant, Georgia, serif; color: var(--ink); } .site-footer a { text-decoration: none; border-bottom: 1px solid currentColor; } @media (max-width: 760px) { .container { width: calc(100% - 36px); } .site-header { display: block; padding-block: 23px 17px; } .brand { font-size: 32px; } .site-nav { margin-top: 16px; gap: 3px 22px; font-size: 12px; } .folio { padding-inline: 14px; padding-bottom: 26px; margin-top: 18px; } .page-head { padding-top: 38px; } .folio-corner { width: 76px; } h1 { font-size: clamp(58px, 12vw, 86px); } h2 { font-size: 43px; } .section { padding: 25px 0 20px; } .diagram-grid, .video-source { grid-template-columns: 1fr; } .diagram-grid { gap: 48px; } .diagram-card figure { min-height: 190px; } .placeholder { font-size: 24px; } .accent-block { border-radius: 44px 0 44px 0; padding: 28px 25px; } .divider { margin-block: 24px; } .divider.wide { margin-block: 22px; } .divider .deco-svg { height: 70px; } .voice-frame { padding: 20px; } .video { border-radius: 38px 0 0 0; } .video-source { gap: 15px; } .event .copy > h3 { font-size: 46px; } .site-footer { padding-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }