/* ============================================================================ 19.09.26 — Code & Pledge (manifesto.html) A black page with the gold Om floating in it, "what we · stand for." on either side of it. Scroll, and the Code of Conduct — one SVG, typeset in gold, as wide as the screen — rises slowly over the logo. Then the pledge, line by line among the embers, and last, Om Tat Sat alone. Driven by js/manifesto.js. ========================================================================== */ body.mm { --mm-om-w: min(60vh, 40vw); /* the Om's box; the title leaves this gap for it */ --mm-om-h: min(94vh, 64vw); background: #000 !important; color: #f4ead0; overflow-x: hidden; } /* The manifesto is edge to edge and the title halves drift outward; nothing may nudge the page sideways. The clip lives on
, not : clipping stops the body's overflow reaching the window, the body becomes its own scroll box, and its scrollbar comes and goes as the rising manifesto overhangs the page — every element jumping 15px wider, like a zoom. */ .mm-main { overflow-x: clip; } body.mm .grain-overlay { opacity: .035; } .mm .site-header { background: transparent; } /* -- the stage ------------------------------------------------------------ */ .mm-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(120% 90% at 50% 50%, #0b0906 0%, #000 62%); } .mm-dust { position: absolute; inset: 0; width: 100%; height: 100%; } /* a soft pool of light behind the Om; it breathes */ .mm-halo { position: absolute; left: 50%; top: 50%; width: min(96vmin, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(244, 206, 113, .17) 0%, rgba(201, 162, 74, .06) 38%, rgba(0, 0, 0, 0) 66%); animation: mmBreathe 7s ease-in-out infinite; will-change: opacity, transform; } @keyframes mmBreathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } } .mm-float { position: absolute; left: 50%; top: 50%; width: var(--mm-om-w); height: var(--mm-om-h); margin: calc(var(--mm-om-h) / -2) 0 0 calc(var(--mm-om-w) / -2); will-change: transform, opacity; } .mm-om { width: 100%; height: 100%; background: transparent; --poster-color: transparent; /* the neon: a tight bright rim and a wide warm bloom */ filter: drop-shadow(0 0 6px rgba(255, 222, 140, .5)) drop-shadow(0 0 30px rgba(232, 180, 70, .3)); } /* -- the opening screen --------------------------------------------------- */ .mm-main { position: relative; z-index: 1; } /* overflow-x: clip, see the top */ .mm-intro { position: relative; height: 100vh; height: 100svh; pointer-events: none; } .mm-title { position: absolute; left: 0; right: 0; top: 47%; display: flex; align-items: center; justify-content: center; margin: 0; transform: translateY(-50%); font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 6vw, 7.4rem); line-height: 1.1; letter-spacing: .005em; white-space: nowrap; /* the glow sits on the line as a whole: on the clipped halves themselves Chrome can bleed a hairline of the gradient under the letters */ filter: drop-shadow(0 0 .06em rgba(255, 230, 160, .6)) drop-shadow(0 0 .4em rgba(232, 180, 70, .35)); } .mm-title-gap { flex: 0 0 calc(var(--mm-om-w) * .8); } .mm-title-l, .mm-title-r { flex: 1 1 0; will-change: transform, opacity; /* shiny gold: a metallic gradient clipped to the letters, with a sheen that drifts across */ background: linear-gradient(100deg, #b8903c 0%, #f6d98a 22%, #fff6d8 32%, #e0b85e 44%, #f4d271 60%, #fff1c2 72%, #c9a24a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mmSheen 9s ease-in-out infinite; padding: .1em .12em; /* room for the italic overhang, so the clip doesn't shave it */ } .mm-title-l { text-align: right; } .mm-title-r { text-align: left; animation-delay: -4.5s; } @keyframes mmSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .mm-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .56rem; letter-spacing: .45em; text-transform: uppercase; color: rgba(244, 210, 113, .45); } .mm-cue i { display: block; width: 1px; height: 38px; background: linear-gradient(to bottom, rgba(244, 210, 113, 0), rgba(244, 210, 113, .8)); animation: mmCue 2.4s ease-in-out infinite; transform-origin: top; } @keyframes mmCue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* -- the manifesto -------------------------------------------------------- */ /* The sheet is black so that it really covers the logo as it rises, but its top edge is feathered: the Om sinks into it rather than being cut off. No padding under it: the page stops where the manifesto's frame does. */ .mm-sheet { position: relative; padding: clamp(5rem, 18vh, 12rem) 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 clamp(12rem, 34vh, 22rem)); } /* As wide as the screen, like a page held up to the eye. The drawing's ink ends 23 units above the bottom of its 1536-unit canvas, so the box is cut there and the last scroll lands on the base of the frame. */ .mm-doc { position: relative; margin: 0; width: 100%; aspect-ratio: 1024 / 1515; overflow: hidden; will-change: transform; } .mm-doc img { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1024 / 1536; display: block; user-select: none; -webkit-user-drag: none; } /* two soft copies of the same drawing under the crisp one make the neon */ .mm-doc-bloom { filter: blur(16px) brightness(1.2); opacity: .5; } .mm-doc-glow { filter: blur(3px) brightness(1.35); opacity: .75; animation: mmNeon 5.5s ease-in-out infinite; will-change: opacity; } @keyframes mmNeon { 0%, 100% { opacity: .75; } 3% { opacity: .5; } 5% { opacity: .78; } 50% { opacity: .52; } } /* -- the pledge ------------------------------------------------------------ */ /* No frame and no ornament: the black of the manifesto lifts off the stage, the embers come back on either side, and the pledge rises line by line in a column three quarters of the screen wide. Three voices: Cormorant for the words, Syne capitals for each "We ...", Playfair italic for what matters. The images are line drawings built by js/manifesto.js, set into the lines. */ .pl { position: relative; padding: clamp(10rem, 34vh, 22rem) 0 clamp(8rem, 26vh, 16rem); background: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) clamp(14rem, 42vh, 26rem)); --pl-gold: #e2c47e; --pl-bright: #fff0c2; --pl-saffron: #f0a24e; --pl-ivory: #f6ead2; --pl-teal: #8fd0c4; --pl-rose: #f0a9b6; --pl-dusk: #7d6d94; } .pl-col { width: min(75vw, 1500px); margin: 0 auto; text-align: center; font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; font-weight: 500; font-size: clamp(1.45rem, 2.45vw, 2.95rem); line-height: 1.52; color: var(--pl-gold); text-shadow: 0 0 .5em rgba(232, 180, 70, .16); } .pl-title { margin: 0 0 1.6em; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700; font-size: clamp(.9rem, 1.45vw, 1.5rem); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; line-height: 1.4; background: linear-gradient(100deg, #b8903c 0%, #f6d98a 25%, #fff6d8 38%, #e0b85e 55%, #fff1c2 75%, #c9a24a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mmSheen 9s ease-in-out infinite; filter: drop-shadow(0 0 .5em rgba(232, 180, 70, .35)); } .pl-s { margin: 0 0 1.25em; will-change: transform, opacity, filter; } .pl-s--prayer { font-style: italic; } .pl-we { font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-style: normal; font-size: .62em; letter-spacing: .2em; text-transform: uppercase; color: var(--pl-bright); vertical-align: .08em; text-shadow: 0 0 .35em rgba(255, 220, 140, .55); } .pl-k { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.04em; color: #f7dc98; } .pl-s--prayer .pl-k { font-style: italic; } /* the words the pledge turns on: shiny gold, with a sheen that drifts */ .pl-shine { font-weight: 600; background: linear-gradient(100deg, #c99a44 0%, #f6d98a 22%, #fff6d8 34%, #e6bd60 48%, #fff1c2 70%, #d4a64e 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mmSheen 7s ease-in-out infinite; padding: 0 .08em; } .pl-b { font-weight: 600; font-variant: small-caps; letter-spacing: .06em; color: var(--pl-bright); } /* the drawings: sized in em so they sit in the line with the words */ .pl-art { display: inline-block; vertical-align: -.5em; line-height: 0; margin: 0 .12em; } .pl-art svg { width: 100%; height: 100%; overflow: visible; display: block; } .pl-art--family { width: 4.9em; height: 1.65em; } .pl-art--knot { width: 1.3em; height: .8em; vertical-align: 0; } .pl-art--army { display: block; width: min(100%, 21em); height: 3.9em; margin: .5em auto .6em; } .pl-art--diya { width: 2.9em; height: 1.8em; } .pl-art--lotus { width: 2.5em; height: 1.65em; } .pl-art--kalash { width: 1.8em; height: 1.8em; } .pl-art--path { width: 4.4em; height: 2.1em; vertical-align: -.7em; } .pl-art--globe { width: 2.3em; height: 1.9em; vertical-align: -.6em; } .pl-art--land { width: 4.4em; height: 1.7em; } .pl-art--circle { width: 2.9em; height: 1.9em; vertical-align: -.6em; } .pl-art--torch { width: 1.3em; height: 1.95em; vertical-align: -.62em; } .pl-nw { white-space: nowrap; } /* strokes are drawn on by the scroll (js sets pathLength="1" on each) */ .pl-art .dr { stroke-dasharray: 1; stroke-dashoffset: var(--pl-draw, 0); } .pl-art .fl { opacity: calc(1 - var(--pl-draw, 0)); } /* and a little life once they are drawn — only while on screen */ .pl-art * { animation-play-state: paused; } .pl-art.is-live * { animation-play-state: running; } .pl-art--army .sol { animation: plBob .72s ease-in-out infinite alternate; } .pl-art--army .lg1 { animation: plStride .72s ease-in-out infinite alternate; } .pl-art--army .lg2 { animation: plStride .72s ease-in-out infinite alternate-reverse; } .pl-art--army .flag { animation: plFlag 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; } .pl-art--army .road { stroke-dasharray: 3 5; animation: plRoad .72s linear infinite; } @keyframes plBob { from { transform: translateY(0); } to { transform: translateY(-1.6px); } } @keyframes plStride { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } } @keyframes plFlag { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.04); } } @keyframes plRoad { to { stroke-dashoffset: 8; } } .pl-art .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: plFlicker 1.3s ease-in-out infinite alternate; } @keyframes plFlicker { 0% { transform: scale(1, 1); } 40% { transform: scale(.92, 1.08) rotate(-2deg); } 100% { transform: scale(1.05, .95) rotate(2deg); } } .pl-art--diya .wisp { transform-box: fill-box; animation: plWisp 3.6s ease-in-out infinite; } .pl-art--diya .wisp.r { animation-name: plWispR; } @keyframes plWisp { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(-4px); opacity: .35; } } @keyframes plWispR { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(4px); opacity: .35; } } .pl-art .flow { stroke-dasharray: .08 .06; animation: plFlow 2.4s linear infinite; } @keyframes plFlow { to { stroke-dashoffset: -.28; } } .pl-art .tw { transform-box: fill-box; transform-origin: center; animation: plTwinkle 2.2s ease-in-out infinite alternate; } .pl-art .tw:nth-of-type(2) { animation-delay: -.7s; } .pl-art .tw:nth-of-type(3) { animation-delay: -1.4s; } @keyframes plTwinkle { from { transform: scale(.7); opacity: .6; } to { transform: scale(1.15); opacity: 1; } } .pl-art .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: plSway 3s ease-in-out infinite alternate; } @keyframes plSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } } .pl-art .rise { transform-box: fill-box; transform-origin: 50% 100%; animation: plRise 4s ease-in-out infinite alternate; } @keyframes plRise { from { transform: translateY(1.5px); } to { transform: translateY(-1px); } } /* -- the close: Om Tat Sat --------------------------------------------------- */ .pl-end { position: relative; height: 230vh; } .pl-end-in { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; } .pl-ots { margin: 0; display: flex; align-items: center; gap: .55em; font-family: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif; font-size: clamp(2.6rem, 7.5vw, 8.5rem); line-height: 1.3; white-space: nowrap; } .pl-ots-words, .pl-danda { background: linear-gradient(100deg, #b8903c 0%, #f6d98a 22%, #fff6d8 34%, #e0b85e 48%, #fff1c2 70%, #c9a24a 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mmSheen 8s ease-in-out infinite; padding: .1em .06em; filter: drop-shadow(0 0 .04em rgba(255, 236, 180, .7)) drop-shadow(0 0 .35em rgba(232, 180, 70, .45)); will-change: transform, opacity; } .pl-danda { font-size: 1.08em; opacity: 0; } .pl-ots-words { opacity: 0; } /* phones: no room beside the Om, so the line sits above and below it */ @media (max-width: 767px) { body.mm { --mm-om-w: 66vw; --mm-om-h: min(62vh, 108vw); } .mm-title { top: 0; bottom: 0; transform: none; flex-direction: column; justify-content: center; font-size: clamp(2rem, 11vw, 3.2rem); } .mm-title-l, .mm-title-r { flex: 0 0 auto; text-align: center; } .mm-title-gap { flex: 0 0 calc(var(--mm-om-h) * .98); } .mm-doc-bloom { filter: blur(9px) brightness(1.2); } .pl-col { width: 88vw; font-size: clamp(1.3rem, 5.6vw, 1.7rem); line-height: 1.55; } .pl-title { letter-spacing: .28em; text-indent: .28em; font-size: .78rem; } .pl-ots { font-size: clamp(2.2rem, 11vw, 3.4rem); gap: .35em; } } /* while the pledge is up, the Om and its halo step aside for the embers */ .mm-stage .mm-halo { transition: opacity 1.2s ease; } .mm-stage.is-pledge .mm-halo, .mm-stage.is-pledge .mm-float { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { .mm-halo, .mm-title-l, .mm-title-r, .mm-cue i, .mm-doc-glow, .pl-title, .pl-shine, .pl-ots-words, .pl-danda { animation: none; } .pl-art * { animation: none !important; } .pl-danda, .pl-ots-words { opacity: 1; } }