/* eiccioadvisors.com home page. A film in beats (house rule 8). Loads after site.css and reuses its tokens. Motion rule: transform only, never opacity, because scroll-linked intermediate states are restable and a fade fails contrast by construction. Everything moves only under prefers-reduced-motion: no-preference and only after home.js marks ; without JavaScript every element is in its final position. */ .home { background: var(--indigo); } /* ---- Beat 1: the scene ---------------------------------------------------------------------------------- */ /* Phone: the photograph fills the top of the screen, the words sit on solid indigo beneath it. Desktop: full-bleed, the words in a darkened left column, the subject clear on the right. */ .h-scene { position: relative; color: var(--on-dark); overflow: hidden; background: var(--indigo); } .h-scene__photo { position: relative; display: block; height: 58svh; min-height: 20rem; overflow: hidden; } .h-scene__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; } .h-scene__video { position: absolute; left: 0; right: 0; top: 0; height: 58svh; min-height: 20rem; width: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; } .h-scene__video.is-playing { opacity: 1; } .h-scene__shade { position: absolute; left: 0; right: 0; top: calc(58svh - 8rem); height: 8rem; background: linear-gradient(180deg, rgba(13,4,63,0), var(--indigo)); } .h-scene__inner { position: relative; padding-top: 1rem; padding-bottom: 4.5rem; } @media (min-width: 60rem) { .h-scene { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .h-scene__photo { position: absolute; inset: 0; height: auto; min-height: 0; } .h-scene__photo img { object-position: 78% 50%; } .h-scene__video { height: 100%; min-height: 0; object-position: 78% 50%; } .h-scene__shade { top: 0; height: auto; inset: 0; background: linear-gradient(90deg, rgba(13,4,63,.95) 0%, rgba(13,4,63,.9) 42%, rgba(13,4,63,.5) 56%, rgba(13,4,63,0) 70%), linear-gradient(0deg, rgba(13,4,63,.55) 0%, rgba(13,4,63,0) 30%); } .h-scene__inner { padding-top: 6rem; padding-bottom: 6rem; } .h-scene__inner > * { max-width: 34rem; } .h-scene__inner > .h-title { max-width: 9.5ch; } } .h-kicker { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); border-top: 2px solid var(--fuchsia); padding-top: .7rem; margin-bottom: 1.25rem; } .h-title { font-size: clamp(2.6rem, 11vw, 5.4rem); font-weight: 800; letter-spacing: -.03em; line-height: .98; max-width: 15ch; margin: 0 0 1.4rem; } .h-line { display: block; } .h-line--accent { color: #f7b6e6; } .h-lede { font-size: clamp(1.125rem, 2.6vw, 1.5rem); max-width: 36rem; margin-bottom: 1.8rem; } .h-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; } .h-scroll { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; text-decoration: none; color: var(--on-dark); border: 2px solid rgba(255,255,255,.7); } /* ---- Beat 2: the turn ----------------------------------------------------------------------------------- */ .h-turn { background: var(--indigo); color: var(--on-dark); padding: clamp(6rem, 22vh, 12rem) 0; } .h-turn__text { font-family: var(--serif); font-size: clamp(1.9rem, 5.4vw, 3.8rem); line-height: 1.15; max-width: 22ch; margin: 0 0 .6em; } .h-turn__text--strong { font-family: var(--sans); font-weight: 800; color: #f7b6e6; letter-spacing: -.02em; } /* ---- Beat 3: full-bleed frame ----------------------------------------------------------------------------- */ .h-frame { position: relative; background: var(--indigo); color: var(--on-dark); overflow: hidden; } .h-frame__photo { margin: 0; height: clamp(22rem, 78vh, 52rem); overflow: hidden; } .h-frame__photo img { width: 100%; height: 120%; margin-top: -10%; object-fit: cover; display: block; } .h-frame__caption { padding: 2rem 1.25rem 4.5rem; } .h-frame__caption p { font-size: clamp(1.25rem, 3vw, 2rem); max-width: 30ch; margin: 0; } /* ---- Beat 3: priority sectors ---------------------------------------------------------------------------- */ .h-sectors { background: var(--indigo); color: var(--on-dark); padding: clamp(4.5rem, 14vw, 9rem) 0; } .h-sectors__kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-top: 2px solid var(--fuchsia); display: inline-block; padding-top: .7rem; } .h-sectors h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); letter-spacing: -.03em; max-width: 18ch; } .h-sectors__lede { font-size: clamp(1.125rem, 2.2vw, 1.4rem); max-width: 44rem; } .h-sectors__grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } @media (min-width: 72rem) { .h-sectors__grid { grid-template-columns: repeat(5, 1fr); } } .h-sector__photo { margin: 0 0 1rem; border-radius: .8rem; overflow: hidden; aspect-ratio: 4 / 5; background: var(--purple); } .h-sector__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .h-sector:hover .h-sector__photo img { transform: scale(1.04); } .h-sector h3 { font-size: 1.2rem; margin-bottom: .35rem; } .h-sector p { color: var(--on-dark-muted); font-size: .98rem; margin: 0; } .h-sectors__groups { margin-top: 3rem; font-family: var(--serif); font-size: clamp(1.4rem, 3.2vw, 2.2rem); max-width: 34ch; } .h-sectors__groups strong { color: #f7b6e6; font-weight: 700; } .h-sectors__source { color: var(--on-dark-muted); font-size: .875rem; margin-top: 1.5rem; } /* ---- Beats 4 to 6: chapters ------------------------------------------------------------------------------- */ .h-chapter { background: var(--paper); color: var(--ink); padding: clamp(4.5rem, 14vw, 9rem) 0; overflow: hidden; } .h-chapter + .h-chapter { background: var(--white); } .h-chapter + .h-chapter + .h-chapter { background: var(--paper); } .h-chapter__grid { display: grid; gap: 2.25rem; align-items: center; } @media (min-width: 60rem) { .h-chapter__grid { grid-template-columns: 1.2fr 1fr; gap: 4.5rem; } .h-chapter--flip .h-chapter__photo { order: 2; } } .h-chapter__photo { margin: 0; border-radius: .9rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); } .h-chapter__photo img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; display: block; } .h-chapter__num { font-size: 1rem; font-weight: 800; letter-spacing: .15em; color: var(--purple); margin-bottom: .5rem; } .h-chapter h2 { font-size: clamp(2.2rem, 5.6vw, 3.8rem); color: var(--indigo); letter-spacing: -.02em; } .h-chapter__text > p { max-width: 34rem; } .h-chapter__line { font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--purple); margin-top: 1.25rem; } /* ---- EDEN Kesef beat: start the record ------------------------------------------------------------------- */ .h-kesef { --kesef: #0A5C33; background: var(--kesef); color: #ffffff; padding: clamp(4.5rem, 14vw, 9rem) 0; overflow: hidden; } .h-kesef__grid { display: grid; gap: 2.25rem; align-items: center; } @media (min-width: 60rem) { .h-kesef__grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; } } .h-kesef__photo { margin: 0; border-radius: .9rem; overflow: hidden; aspect-ratio: 4 / 3; background: #084a29; } .h-kesef__photo img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; display: block; } .h-kesef__kicker { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-top: 2px solid #ffffff; display: inline-block; padding-top: .7rem; } .h-kesef h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.02em; max-width: 16ch; } .h-kesef__text > p { max-width: 34rem; } .h-kesef__free { font-weight: 700; } .h-kesef__btn { background: #ffffff; color: var(--kesef); border-color: #ffffff; } .h-kesef__btn:hover { background: #e6f2eb; color: #063a20; } /* ---- Beat 7: the date -------------------------------------------------------------------------------------- */ .h-moment { background: var(--purple); color: var(--on-dark); padding: clamp(5rem, 16vw, 10rem) 0; } .h-moment__inner { display: grid; gap: 1.5rem 3.5rem; align-items: center; } @media (min-width: 52rem) { .h-moment__inner { grid-template-columns: auto 1fr; } } .h-moment__date { margin: 0; line-height: .9; } .h-moment__day { display: block; font-size: clamp(7rem, 24vw, 15rem); font-weight: 800; letter-spacing: -.05em; } .h-moment__month { display: block; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; letter-spacing: .04em; } .h-moment h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); } .h-moment a { color: var(--on-dark); } /* ---- Beat 8: the signature --------------------------------------------------------------------------------- */ .h-sign { position: relative; background: var(--indigo); color: var(--ink); overflow: hidden; } .h-sign__photo { margin: 0; } .h-sign__photo img { width: 100%; height: clamp(24rem, 80vh, 54rem); object-fit: cover; display: block; } .h-sign__inner { position: relative; margin-top: -9rem; padding-bottom: clamp(4rem, 10vw, 6rem); } @media (min-width: 60rem) { .h-sign__inner { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; } .h-sign__card { margin-left: auto; margin-right: 0; max-width: 30rem; } .h-sign__photo img { object-position: 30% 35%; } } .h-sign__card { background: var(--white); border-radius: .9rem; padding: clamp(1.75rem, 4vw, 3rem); max-width: 36rem; box-shadow: 0 1.5rem 3rem rgba(13,4,63,.28); } .h-sign__card h2 { color: var(--indigo); font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.02em; } .h-sign__card p { margin: 0; } /* ---- Beat 9: talk ------------------------------------------------------------------------------------------ */ .h-talk { background: var(--indigo); color: var(--on-dark); padding: clamp(5rem, 16vw, 10rem) 0; } .h-talk h2 { font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -.03em; } .h-talk__big { font-size: clamp(1.75rem, 6.2vw, 4.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .35em; overflow-wrap: anywhere; } .h-talk__big--mail { font-size: clamp(1.25rem, 4.2vw, 2.6rem); font-weight: 700; margin-bottom: 0; } .h-talk__big a { color: var(--on-dark); text-decoration-color: var(--fuchsia); text-decoration-thickness: .08em; } .h-talk__big a:hover { color: #f7b6e6; } .h-talk__meta { margin-top: 3rem; color: var(--on-dark); } .h-talk__note { color: var(--on-dark-muted); font-size: .9375rem; max-width: 40rem; } /* ---- Motion: transform only, opt-in ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .h-motion .h-scene__photo img { animation: h-breathe 26s ease-in-out infinite alternate; transform-origin: 78% 55%; } @keyframes h-breathe { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.2%, -.6%, 0); } } .h-motion .h-line { transform: translate3d(0, .6em, 0); transition: transform 1.1s var(--ease); } .h-motion .h-line--accent { transition-delay: .18s; } .h-motion.h-ready .h-line { transform: none; } .h-motion [data-rise] { transform: translate3d(0, 1.5rem, 0); transition: transform 1s var(--ease); } .h-motion [data-rise].is-in { transform: none; } .h-motion [data-drift] img { transform: translate3d(0, var(--drift, 0px), 0); will-change: transform; } .h-motion .h-scroll { animation: h-nudge 2.4s ease-in-out infinite; } @keyframes h-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.45rem); } } } /* ---- Brand: the EICCIO Advisors logo on a white plate (the purple mark disappears on indigo without one) ----- */ .h-brandbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding-top: 1rem; pointer-events: none; } .h-brand { display: inline-block; background: var(--white); border-radius: .6rem; padding: .4rem .5rem; pointer-events: auto; line-height: 0; } .h-brand img { width: 3.75rem; height: auto; } @media (min-width: 60rem) { .h-brandbar { padding-top: 1.75rem; } .h-brand img { width: 5.25rem; } } .h-brand:focus-visible { outline: 3px solid #f7b6e6; outline-offset: 3px; } /* ---- Footer: chamber memberships, each logo linking to the chamber's own site ------------------------------- */ .footer__members { margin-top: 2.25rem; } .footer .footer__members-title { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.25); } .footer__chambers { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; } .footer__chambers a { display: flex; align-items: center; height: 4.25rem; padding: .375rem .625rem; background: var(--white); border-radius: .5rem; line-height: 0; } .footer__chambers img { height: 3.5rem; width: auto; } .footer__chambers a:focus-visible, .footer__chambers a:hover { outline: 3px solid #f7b6e6; outline-offset: 2px; } .footer .footer__members-note { font-size: .875rem; max-width: 46rem; margin: 0; } /* ---- Service page: Guyana Development Bank business plan (17 Sep 2026, AI search visibility matter) -------- Same film, same tokens. The answer beat is the one paragraph an answer engine lifts, so it is plain text, large, first after the scene, and never hidden behind motion (rise is transform only). */ .s-title { font-size: clamp(2.2rem, 7.4vw, 4.4rem); } @media (min-width: 60rem) { .s-scene .h-scene__inner { padding-top: 9.5rem; padding-bottom: 5rem; } .s-scene .h-scene__inner > .h-title { max-width: 16ch; } .s-title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); } } .s-answer { background: var(--indigo); color: var(--on-dark); padding: clamp(4.5rem, 14vh, 8rem) 0; } .s-answer__kicker { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-top: 2px solid var(--fuchsia); padding-top: .7rem; margin: 0 0 1.5rem; } .s-answer__text { font-family: var(--serif); font-size: clamp(1.6rem, 4.2vw, 2.8rem); line-height: 1.2; max-width: 30ch; margin: 0 0 1.25rem; } .s-answer__more { font-size: clamp(1.0625rem, 2vw, 1.3rem); max-width: 42rem; color: var(--on-dark); margin: 0; } .s-parts, .s-steps { margin: 0 0 1.25rem; padding-left: 1.4rem; } .s-parts li, .s-steps li { margin: .35rem 0; } .s-parts li::marker, .s-steps li::marker, .s-bring__list li::marker { color: var(--purple); font-weight: 800; } .s-small { font-size: .875rem; color: var(--muted); max-width: 44rem; } .s-small--dark { color: var(--on-dark); } .s-small--dark a { color: var(--on-dark); } .s-checks { background: var(--indigo); color: var(--on-dark); padding: clamp(5rem, 16vw, 9rem) 0; } .s-checks .s-checks__num { color: #f7b6e6; } .s-checks h2 { font-size: clamp(2rem, 5.4vw, 3.6rem); letter-spacing: -.02em; max-width: 20ch; margin-bottom: 2.5rem; } .s-checks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 3rem; max-width: 70rem; } @media (min-width: 52rem) { .s-checks__list { grid-template-columns: 1fr 1fr; } } .s-checks__list li { font-size: clamp(1.125rem, 2.2vw, 1.4rem); border-top: 2px solid var(--fuchsia); padding-top: 1rem; } .s-checks__list strong { color: #f7b6e6; } .s-bring { background: var(--paper); color: var(--ink); padding: clamp(4.5rem, 14vw, 8rem) 0; } .s-bring h2 { color: var(--indigo); font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.02em; } .s-bring__list { font-size: clamp(1.0625rem, 2vw, 1.25rem); padding-left: 1.6rem; max-width: 44rem; } .s-bring__list li { margin: .5rem 0; } .s-money h2 { max-width: 22ch; margin-bottom: 1.5rem; } .s-money > p { max-width: 44rem; font-size: clamp(1.0625rem, 2vw, 1.3rem); } .s-region { background: var(--white); color: var(--ink); padding: clamp(4.5rem, 14vw, 8rem) 0; } .s-region h2 { color: var(--indigo); font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.02em; } .s-region p { max-width: 44rem; font-size: clamp(1.0625rem, 2vw, 1.25rem); } .s-faq { background: var(--paper); color: var(--ink); padding: clamp(4.5rem, 14vw, 8rem) 0; } .s-faq h2 { color: var(--indigo); font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.02em; } .s-faq details { max-width: 48rem; } .s-faq > .wrap > .s-small { margin-top: 2.5rem; } .h-chapter__line a, .s-link { font-weight: 700; } /* ---- Gate fixes, 17 Sep 2026 (06-predeploy-gate.md) -------------------------------------------------------- A6 (WCAG 2.2.2): one control pauses every looping motion. home.js adds it only when motion is running. */ .h-paused .h-scene__photo img, .h-paused .h-scroll { animation-play-state: paused !important; } .h-pause { position: absolute; left: 1.25rem; bottom: 1.5rem; z-index: 3; min-height: 3rem; min-width: 3rem; padding: .5rem 1rem; font: inherit; font-size: .9375rem; font-weight: 700; color: var(--on-dark); background: rgba(13,4,63,.72); border: 2px solid rgba(255,255,255,.7); border-radius: 999px; cursor: pointer; } .h-pause:hover { background: var(--indigo); } @media (min-width: 60rem) { .h-pause { left: auto; right: 5.5rem; } } /* A2, A3, A4 (WCAG 1.4.11): a two-colour focus ring, white inside and indigo outside, visible on any background. */ .h-moment a:focus-visible, .h-kesef__btn:focus-visible, .h-brand:focus-visible, .h-scroll:focus-visible, .h-pause:focus-visible, .s-checks a:focus-visible, .s-answer a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--indigo); } /* A1 (1.4.3): links inside the dark talk meta line. A5 (2.5.8): stacked contact links need room to tap. */ .h-talk__meta a { color: var(--on-dark); } .h-talk__big--mail + .h-talk__big--mail { margin-top: .6rem; }