/* * Fondazione / Couture R12 — original, local-integration components. * Runtime: CSS + 4 local SVG alpha masks. No runtime JS or third-party request. * Activate: data-fc12="on" on ; add only the documented explicit hooks. * Off: remove that attribute. Do NOT load concurrently with the R11 stylesheet. * Brand colours/fonts are inherited; map --fc12-shadow to the live dark token. * Never mount optical layers over documentary media or over text/UI. */ /* New decorative nodes are invisible unless explicitly enabled. */ .fc12-optics, .fc12-frame, .fc12-rule, .fc12-action-art { display: none; } /* 01. Sculpted entry / dedicated decorative plane, not a body overlay. */ html[data-fc12="on"] .fc12-optics { display: block; position: absolute; inset: 0; z-index: 1; isolation: isolate; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; color: var(--fc12-light, currentColor); } html[data-fc12="on"] .fc12-optics > span { display: block; position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-mode: alpha; } html[data-fc12="on"] .fc12-optics__relief { background: currentColor; -webkit-mask-image: url("../masks/relief-desktop.svg"); mask-image: url("../masks/relief-desktop.svg"); opacity: var(--fc12-relief-strength, .28); } html[data-fc12="on"] .fc12-optics__light { background: currentColor; -webkit-mask-image: url("../masks/light-ribbon.svg"); mask-image: url("../masks/light-ribbon.svg"); opacity: var(--fc12-light-strength, .38); } html[data-fc12="on"] .fc12-optics__shade { background: linear-gradient(90deg, var(--fc12-shadow, transparent), transparent 42%), linear-gradient(0deg, var(--fc12-shadow, transparent), transparent 25%); opacity: var(--fc12-shade-strength, .54); } /* The content plane MUST be an audited existing inner wrapper, never body/main. */ html[data-fc12="on"] [data-fc12-content-plane] { position: relative; z-index: 2; } /* Only a previously static, dedicated host may receive this opt-in hook. */ html[data-fc12="on"] [data-fc12-position="relative"] { position: relative; } /* 02. Editorial composition; same DOM order, font family/size/colour preserved. */ html[data-fc12="on"] [data-fc12-entry-copy] { max-inline-size: 66rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5.6vw, 6rem); padding-block: clamp(2rem, 5.5vh, 5rem); } html[data-fc12="on"] [data-fc12-heading] { max-inline-size: 12ch; margin-block: .24em .3em; line-height: 1.03; letter-spacing: -.022em; text-wrap: balance; } html[data-fc12="on"] [data-fc12-lead] { max-inline-size: 44ch; line-height: 1.65; margin-block: 0 1.6rem; text-wrap: pretty; } html[data-fc12="on"] [data-fc12-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; } /* No font/size/weight rewrite: only geometry and deliberate spacing. */ html[data-fc12="on"] [data-fc12-editorial] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: center; } html[data-fc12="on"] [data-fc12-editorial] > * { min-inline-size: 0; } html[data-fc12="on"] [data-fc12-editorial-copy] { max-inline-size: 38rem; padding-block: clamp(.5rem, 2vw, 2rem); } html[data-fc12="on"] [data-fc12-editorial="text-first"] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } /* 03. Passe-partout / gallery plate: frame OUTSIDE media, no image filtering. */ html[data-fc12="on"] [data-fc12-plate] { margin: 0; padding: clamp(.65rem, 1.5vw, 1.4rem); outline: 1px solid currentColor; outline-offset: -1px; box-shadow: 0 18px 45px -30px var(--fc12-shadow, transparent); } @supports (color: color-mix(in srgb, currentColor 20%, transparent)) { html[data-fc12="on"] [data-fc12-plate] { outline-color: color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 2.6%, transparent); } } html[data-fc12="on"] [data-fc12-caption] { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding-block-start: .9rem; line-height: 1.55; } /* 04. Inset editorial panels / optional dialogue inner surface. * Attach to the INNER body of an existing dialog, never replace its API. * No ::backdrop override, no fixed overlay, no change to open/hidden state. */ html[data-fc12="on"] [data-fc12-panel] { padding: clamp(1.2rem, 3.2vw, 3.25rem); box-shadow: 0 24px 72px -44px var(--fc12-shadow, transparent), inset 0 1px 0 currentColor; } @supports (color: color-mix(in srgb, currentColor 20%, transparent)) { html[data-fc12="on"] [data-fc12-panel] { box-shadow: 0 24px 72px -44px var(--fc12-shadow, transparent), inset 0 1px 0 color-mix(in srgb, currentColor 30%, transparent), inset 0 -1px 0 color-mix(in srgb, currentColor 9%, transparent); } } /* A new empty decorative sibling, never an old pseudo-element. */ html[data-fc12="on"] .fc12-frame { display: block; position: absolute; inset: .4rem; z-index: 1; border: 1px solid currentColor; border-radius: inherit; opacity: .18; pointer-events: none; user-select: none; } /* 05. Chapter hinge: calibrated taper, not a decorative image over people. */ html[data-fc12="on"] .fc12-rule { display: block; inline-size: min(100%, 36rem); block-size: .65rem; margin-block: clamp(1.6rem, 3vw, 3rem); background: currentColor; -webkit-mask: url("../masks/chapter-hinge.svg") center / 100% 100% no-repeat; mask: url("../masks/chapter-hinge.svg") center / 100% 100% no-repeat; opacity: .45; pointer-events: none; user-select: none; } /* 06. Precise controls: current colours/fonts and URLs remain untouched. */ html[data-fc12="on"] [data-fc12-action] { position: relative; min-block-size: 44px; padding-block: .9rem; padding-inline: 1.4rem; text-underline-offset: .3em; } html[data-fc12="on"] .fc12-action-art { display: block; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; user-select: none; } /* Only our OWN new decorative node uses a pseudo-element. */ html[data-fc12="on"] .fc12-action-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(106deg, transparent 24%, currentColor 49%, transparent 74%); opacity: 0; transform: translateX(-105%); } html[data-fc12="on"] [data-fc12-action]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Focus remains an immediate outline: no animation needed for keyboard use. */ @media (hover: hover) and (pointer: fine) { html[data-fc12="on"] [data-fc12-action]:hover { text-decoration-thickness: 2px; } } /* One optional entry-light passage; no initial concealment of real content. */ @media (prefers-reduced-motion: no-preference) { html[data-fc12="on"] [data-fc12-animate="once"] > .fc12-optics__light { animation: fc12-entry-light 2100ms cubic-bezier(.2,.7,.2,1) 1 both; } @keyframes fc12-entry-light { from { opacity: .04; transform: translate3d(-3%, -1%, 0); } to { opacity: var(--fc12-light-strength, .38); transform: none; } } @media (hover: hover) and (pointer: fine) { html[data-fc12="on"] [data-fc12-action]:hover > .fc12-action-art::before { animation: fc12-control-light 620ms ease-out 1 both; } @keyframes fc12-control-light { 0% { opacity: 0; transform: translateX(-105%); } 20% { opacity: .16; } 80% { opacity: .16; } 100% { opacity: 0; transform: translateX(105%); } } } } /* Optional static inspection mode; scope only our nodes. */ html[data-fc12="on"][data-fc12-motion="still"] .fc12-optics__light, html[data-fc12="on"][data-fc12-motion="still"] .fc12-action-art::before { animation: none; } @media (prefers-reduced-motion: reduce) { html[data-fc12="on"] .fc12-optics__light, html[data-fc12="on"] .fc12-action-art::before { animation: none; transform: none; } } /* Mobile: redraw the ornament, rather than compressing the desktop scene. */ @media (max-width: 760px) { html[data-fc12="on"] .fc12-optics { --fc12-relief-strength: .17; --fc12-light-strength: .24; --fc12-shade-strength: .36; } html[data-fc12="on"] .fc12-optics__relief { -webkit-mask-image: url("../masks/relief-mobile.svg"); mask-image: url("../masks/relief-mobile.svg"); } html[data-fc12="on"] [data-fc12-entry-copy] { padding-inline: 1.2rem; padding-block: 1.75rem; } html[data-fc12="on"] [data-fc12-heading] { max-inline-size: 13ch; line-height: 1.06; letter-spacing: -.015em; } html[data-fc12="on"] [data-fc12-editorial], html[data-fc12="on"] [data-fc12-editorial="text-first"] { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; } html[data-fc12="on"] [data-fc12-actions] { align-items: stretch; } html[data-fc12="on"] [data-fc12-actions] > [data-fc12-action] { flex: 1 1 12rem; } html[data-fc12="on"] [data-fc12-panel] { padding: 1.2rem; } } @media (max-height: 480px) and (orientation: landscape) { html[data-fc12="on"] [data-fc12-entry-copy] { padding-block: 1rem; } html[data-fc12="on"] [data-fc12-heading] { max-inline-size: 20ch; } html[data-fc12="on"] [data-fc12-lead] { margin-block-end: .8rem; } html[data-fc12="on"] .fc12-rule { margin-block: .85rem; } } /* Decorative layers disappear for forced-colours and print. Content never does. */ @media (forced-colors: active) { html[data-fc12="on"] .fc12-optics, html[data-fc12="on"] .fc12-frame, html[data-fc12="on"] .fc12-action-art, html[data-fc12="on"] .fc12-rule { display: none; } } @media print { html[data-fc12="on"] .fc12-optics, html[data-fc12="on"] .fc12-frame, html[data-fc12="on"] .fc12-action-art, html[data-fc12="on"] .fc12-rule { display: none; } } /* No opaque substitute if the browser does not support masking at all. */ @supports not ((mask-image: linear-gradient(black, transparent)) or (-webkit-mask-image: linear-gradient(black, transparent))) { html[data-fc12="on"] .fc12-optics__relief, html[data-fc12="on"] .fc12-optics__light, html[data-fc12="on"] .fc12-rule { display: none; } }