placed directly inside a dark section without a more specific class — without this, a bare
silently inherits body{}'s var(--ink) (near-black) and becomes illegible against the dark background. Page-specific component classes (.consideration p, .element-item p, etc.) still take precedence via specificity when they set their own color. */ .dark-section p{color:rgba(242,237,230,0.8);font-size:1.2rem;line-height:1.7;} @media (max-width: 700px){ .dark-section .terms-grid{grid-template-columns:1fr !important;gap:32px !important;} } /* Solid red call-to-action band — reused across interior pages */ .cta-band{background:var(--red);color:#fff;text-align:center;} .cta-band h2{font-family:var(--serif);font-weight:800;font-size:clamp(2rem,4.5vw,2.8rem);} .cta-band p{max-width:560px;margin:18px auto 0;opacity:.92;} .cta-band .btn{margin-top:28px;} /* Interior-page banner — simplified hero (no video) for every page besides the homepage. Fixed header height (87px) means this needs enough top padding to clear it; kept generous since page titles vary in length. */ .page-banner{position:relative;padding:180px 0 90px;background:var(--ink);color:#fff;overflow:hidden;text-align:center;} .page-banner .kicker{color:#e8a89a;} .page-banner h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.05;} @media (max-width: 900px){ .page-banner{padding:150px 0 70px;} } /* Section rhythm */ section{padding:110px 0;position:relative;} .section-tight{padding:80px 0;} .kicker{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:18px;text-align:center;} .eyebrow{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.9;margin-bottom:18px;} .section-title{font-family:var(--serif);font-size:clamp(2.6rem,5.2vw,4.2rem);font-weight:800;text-align:center;max-width:900px;margin:0 auto;line-height:1.05;letter-spacing:-.01em;} .section-body{text-align:center;max-width:640px;margin:28px auto 0;color:var(--ink-soft);font-size:1.2rem;line-height:1.7;} /* Hand-drawn underline accent beneath section headings */ .underline-accent{display:block;margin:14px auto 0;width:120px;height:12px;opacity:.8;} .underline-accent path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;} /* Coatl (serpent/movement): the official seal, fixed to the viewport and slowly turning like a stamp in motion. Sits beneath every section from "Meaning" through the footer, fading in once scrolled past and fading out at the very bottom of the page. z-index sits below section backgrounds but the sections themselves are transparent-background where this should show through. */ /* Split into two elements: outer handles fixed position + opacity fade (plain transition), inner handles the continuous rotation (CSS animation). Combining an infinite animation and a separate opacity transition on the SAME element caused the opacity change to be silently suppressed in testing — splitting them avoids that engine quirk entirely. */ @keyframes sealSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} .seal-watermark{position:fixed;top:50%;left:50%;width:1600px;height:1600px;max-width:none;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:0;transition:opacity 1s ease;} .seal-watermark.is-visible{opacity:.5;} .seal-watermark img{width:100%;height:100%;object-fit:contain;animation:sealSpin 90s linear infinite;animation-play-state:paused;} .seal-watermark.is-visible img{animation-play-state:running;} @media (prefers-reduced-motion: reduce){ .seal-watermark img{animation:none;} } @media (max-width: 900px){ .seal-watermark{width:400px;height:400px;} } /* Small breathing-room strips between sections; fully transparent since the sections themselves now let the seal show through everywhere. */ .section-gap{height:64px;background:transparent;position:relative;z-index:0;} @media (max-width: 900px){ .section-gap{height:40px;} } /* Torn-edge section divider — jagged mask between color blocks. The container background must match the section ABOVE (being exited) so it blends with no seam; the SVG path fill matches the section BELOW (being entered) so the jagged peaks read as a visible cut, not a flat color-on-color block. */ .torn-edge{position:relative;height:48px;margin-top:-1px;margin-bottom:-1px;line-height:0;} .torn-edge svg{width:100%;height:100%;display:block;position:relative;z-index:1;} .torn-edge-to-dark{background:var(--cream);} .torn-edge-to-light{background:var(--ink);} /* Continue the tiled spiral texture from the section above through the divider so it doesn't cut off abruptly right before the jagged cut */ .torn-edge-to-dark::before{content:'';position:absolute;inset:0;background-image:url('../assets/web/For_site-480.png');background-repeat:repeat;background-size:160px auto;opacity:.05;z-index:0;} /* Footer */ footer{position:relative;background:var(--ink);color:rgba(242,237,230,0.85);} .footer-top{padding-top:60px;padding-bottom:40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;border-bottom:1px solid rgba(255,255,255,0.1);} .footer-brand .logo-f{display:flex;align-items:center;gap:12px;margin-bottom:16px;} .footer-brand .mark{width:46px;height:46px;border-radius:50%;display:block;overflow:hidden;flex-shrink:0;} .footer-brand .mark img{width:100%;height:100%;object-fit:cover;} .footer-brand h4{font-family:var(--serif);font-weight:800;color:#fff;font-size:1.1rem;} .footer-brand p{font-size:1rem;color:rgba(242,237,230,0.6);margin-top:8px;line-height:1.55;} .footer-brand-tag{font-size:.95rem;color:rgba(242,237,230,0.5);margin-top:2px;} .footer-col h5{color:#fff;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-weight:700;} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:1.05rem;} .footer-col a{color:rgba(242,237,230,0.75);} .footer-col a:hover{color:#e8a89a;} .footer-bottom{padding-top:22px;padding-bottom:22px;display:flex;justify-content:space-between;font-size:.9rem;color:rgba(242,237,230,0.55);flex-wrap:wrap;gap:10px;} .footer-bottom a{color:rgba(242,237,230,0.55);margin-left:18px;} @media (max-width: 900px){ header .bar > nav{display:none;} .hamburger{display:flex;} header .bar{padding:14px 20px;} .logo{font-size:.92rem;} .logo .mark{width:38px;height:38px;} .header-right .social,.header-right .lang-btn{display:none;} .header-right{gap:12px;} .donate-btn{padding:8px 16px;font-size:.8rem;} .footer-top{grid-template-columns:1fr 1fr;} } @media (max-width: 480px){ .footer-top{grid-template-columns:1fr;} } /* ===== MOTION SYSTEM ===== */ /* Ehecatl (wind): parallax drift — backgrounds move slower than foreground */ .parallax{will-change:transform;} /* Kalpulli (gathering): elements converge into place from offset positions */ .reveal{opacity:0;transition:opacity .9s cubic-bezier(.16,.8,.3,1), transform .9s cubic-bezier(.16,.8,.3,1);} .reveal-up{transform:translateY(48px);} .reveal-left{transform:translateX(-40px);} .reveal-right{transform:translateX(40px);} .reveal-scale{transform:scale(.92);} .reveal.is-visible{opacity:1;transform:translate(0,0) scale(1);} /* Staggered children — gather in one after another */ .reveal-stagger > *{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);} .reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.18s;} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.31s;} /* Coatl (serpent): the underline traces itself like a path being drawn */ .underline-accent path{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .3s;} .reveal.is-visible .underline-accent path{stroke-dashoffset:0;} /* Torn edge: gentle ripple settle on scroll-in */ @keyframes rippleSettle{0%{transform:translateY(-6px);}100%{transform:translateY(0);}} .torn-edge.is-visible svg{animation:rippleSettle 1s cubic-bezier(.34,1.56,.64,1);} @media (prefers-reduced-motion: reduce){ .reveal, .reveal-stagger > *, .underline-accent path, .torn-edge svg{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important; stroke-dashoffset:0 !important; } } /* Headings: all caps (client request), except headings that contain quotation marks */ h1, h2, h3 { text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; } h1.keep-case, h2.keep-case, h3.keep-case { text-transform: none; } /* Capitals run wider than mixed case, so the big heading sizes come down a step. */ .section-title { font-size: clamp(1.9rem, 4.4vw, 3.5rem); max-width: 1040px; } .page-banner h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); } .cta-band h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); }