/* Pons Dividends — photographic sky, liquid glass, matte black. Presentation follows fomopad: a full-screen splash, a floating glass pill for navigation, and the substance on its own pages instead of one long scroll. */ :root{ --ink:#0A0A0B; --ink-2:#141416; --line:rgba(255,255,255,.09); --label:#86868B; --body-dark:#B6B7BD; --navy:#052033; --navy-soft:rgba(5,32,51,.66); --glass-line:rgba(255,255,255,.62); --accent-soft:#8ED8FF; --r:26px; --r-sm:16px; --gap:14px; --maxw:1080px; --ease:cubic-bezier(.16,1,.3,1); --shadow:0 24px 60px -24px rgba(6,40,84,.5), 0 4px 14px -6px rgba(6,40,84,.28); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Geist,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:15px;line-height:1.6;letter-spacing:-.006em; color:var(--navy);-webkit-font-smoothing:antialiased; background:#8CC2F0; } body.is-splash{overflow:hidden} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} } /* ---------- sky ---------- */ .sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#1B6BC0 0%,#3E93DE 32%,#7CBEEE 62%,#BEDEF6 100%)} /* The still sits under the footage at the same framing: it is what shows before the first frame decodes, during every crossfade, and on the devices where the video is skipped entirely. */ .sky-plate{ position:fixed;inset:0;z-index:-3;overflow:hidden; background:url("assets/sky-poster.jpg") center/cover no-repeat #3E93DE; } /* real footage behind the splash */ .sky-video{ position:fixed;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover; background:#3E93DE; opacity:0; } .sky-video.on{opacity:1} /* The crossfade is for the loop handover only. On arrival the first frame has to replace the still instantly — fading it in means blending a frozen frame with a moving one for two seconds, which reads as a double exposure. */ .sky-video.xf{transition:opacity 2.2s linear} /* the poster sits under both copies, so the crossfade never shows through */ body.is-splash{background:#3E93DE} /* The footage sits far back: heavily blurred and washed, it reads as light and depth rather than as clouds. It was competing with the mark — two things moving, and the busier one winning. */ .sky-video,.sky-plate{filter:blur(26px) saturate(.85) brightness(1.06);transform:scale(1.18)} .sky-scrim{ position:fixed;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(180deg, rgba(18,86,158,.55) 0%, rgba(30,110,190,.34) 42%, rgba(20,80,150,.5) 100%), radial-gradient(120% 80% at 50% 8%, rgba(120,190,255,.30), transparent 60%); } /* One class on drops the video entirely for a worked gradient: lighter by the whole 11.6 MB, calmer still, but it gives up the photographic sky that is the whole Pons signature. Add `plain-sky` to the body tag to try it. */ body.plain-sky .sky-video{display:none} body.plain-sky .sky-plate{ background:radial-gradient(130% 90% at 50% -10%, #8FD0FF 0%, #4E9BE0 34%, #2B6FBE 62%, #17508F 100%); transform:none;filter:none; } body.plain-sky .sky{ background:radial-gradient(130% 90% at 50% -10%, #8FD0FF 0%, #4E9BE0 34%, #2B6FBE 62%, #17508F 100%); } body.plain-sky .sky::after{display:none} body.plain-sky .sky::before{ background: radial-gradient(80% 50% at 50% 42%, rgba(255,255,255,.14), transparent 62%), linear-gradient(180deg, rgba(6,42,88,.20) 0%, transparent 46%, rgba(6,40,86,.5) 100%); } body.plain-sky .sky-scrim{ background: radial-gradient(80% 50% at 50% 42%, rgba(255,255,255,.16), transparent 62%), linear-gradient(180deg, rgba(6,42,88,.20) 0%, transparent 46%, rgba(6,40,86,.46) 100%); } .sky::after{ content:"";position:absolute;inset:0; background:url("assets/sky-poster.jpg") center/cover no-repeat; filter:blur(24px) saturate(.85) brightness(1.06); transform:scale(1.16); opacity:.95; } .sky::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, rgba(6,42,88,.34) 0%, rgba(6,42,88,.10) 34%, rgba(6,42,88,0) 56%, rgba(6,42,88,.34) 76%, rgba(6,42,88,.74) 100%); } /* ---------- type ---------- */ h1,h2,h3{margin:0;font-family:"Instrument Sans",Geist,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.035em} h1{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.042em} h2{font-size:clamp(1.3rem,2.2vw,1.7rem)} h3{font-size:1.02rem;font-weight:600;letter-spacing:-.024em;line-height:1.25} p{margin:0 0 .85em} p:last-child{margin-bottom:0} .label{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--label)} .mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:.92em;letter-spacing:-.01em} .fineprint{font-size:12.5px;line-height:1.55;color:var(--label)} /* ---------- liquid glass primitives ---------- */ .glass-pill{ background:linear-gradient(150deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.16) 52%,rgba(255,255,255,.26) 100%); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 14px 34px -18px rgba(6,40,84,.55); border-radius:999px; } /* ---------- nav ---------- */ .nav{position:relative;z-index:60;padding:18px 20px 0} /* Clear glass, not frosted. The milkiness came from the white fill, so that goes; what makes it read as a pane is what is left — the refraction behind it, the lit edge, and the highlight running along the top. */ .nav-pill{ max-width:920px;margin:0 auto; display:flex;align-items:center;gap:18px; padding:6px 6px 6px 16px; border-radius:999px; background:transparent; border:1px solid rgba(255,255,255,.30); /* saturate() was what tinted the band; and against a smooth gradient a blur has nothing to blur, so all that remained visible was the whitening. The blur is kept for the inner pages, where cards do scroll under it. */ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.08); } /* The wordmark is the brand in the header now — a 30px square of glass next to it read as an applied sticker. The P still carries the tab. */ .brand{ display:flex;align-items:center;text-decoration:none;color:#fff; font-family:"Instrument Sans",sans-serif;font-weight:500;font-size:1rem;letter-spacing:-.03em; text-shadow:0 1px 2px rgba(6,40,84,.5), 0 2px 12px rgba(6,40,84,.4); } .nav-links{display:flex;gap:22px} .nav-pill .nav-links{margin-left:10px} .nav-links a{color:rgba(255,255,255,.82);text-decoration:none;font-size:13.5px;font-weight:500; text-shadow:0 1px 2px rgba(6,40,84,.55), 0 2px 12px rgba(6,40,84,.45);transition:color .2s var(--ease)} .nav-links a:hover,.nav-links a.on{color:#fff} .nav-right{display:flex;align-items:center;gap:8px;margin-left:auto} .glass-circle{ width:34px;height:34px;flex:0 0 34px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; color:rgba(255,255,255,.88);text-decoration:none; background:none;border:1px solid rgba(255,255,255,.28); transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } .glass-circle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff} .btn-white{ display:inline-flex;align-items:center;justify-content:center; background:#fff;color:var(--ink);text-decoration:none; border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:500;letter-spacing:-.012em; white-space:nowrap;transition:transform .2s var(--ease),background .2s var(--ease); } .btn-white:hover{background:#EAF3FF} .btn-white:active{transform:scale(.97)} .nav-links-mobile{display:none;justify-content:center;margin-top:12px} @media (max-width:720px){ .nav-pill .nav-links{display:none} .nav-links-mobile{display:flex} .nav{padding:14px 14px 0} .nav-pill{gap:10px;padding:5px 5px 5px 14px} .brand{font-size:.92rem} .btn-white{padding:8px 14px;font-size:13px} } :where(a,button):focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px} /* ---------- splash ---------- */ .splash{position:relative;min-height:100dvh;display:flex;flex-direction:column} .splash-stage{ position:relative;z-index:2;flex:1 1 auto;min-height:180px; display:flex;align-items:flex-end;justify-content:center; padding:18px 20px 0; } .mark-wrap{ display:flex;align-items:center;justify-content:center; max-width:100%;min-height:0; perspective:900px; animation:float-y 13s ease-in-out infinite; } /* Three nested layers so nothing fights: the wrapper floats, this one is driven by the pointer from JS, and the image keeps its own drift. Sharing one element would mean the script and the keyframes overwriting each other's transform every frame. */ .mark-tilt{ transform-style:preserve-3d; pointer-events:auto; will-change:transform; transition:transform .5s cubic-bezier(.16,1,.3,1); } .mark-tilt.grabbed{transition:none} /* the cap lives on the image: its intrinsic 899x1134 then drives the width, which a percentage height on the wrapper failed to resolve against */ .mark{ position:relative; width:auto;height:auto; max-height:min(46vh,420px);max-width:88vw; display:block; animation:mark-in 1.1s cubic-bezier(.16,1,.3,1) both, float-x 19s ease-in-out 1.1s infinite; transform-style:preserve-3d; } .mark > img{ width:auto;height:auto;max-height:min(46vh,420px);max-width:88vw; object-fit:contain;display:block; filter:drop-shadow(0 34px 46px rgba(6,32,60,.34)); } /* once the shards exist they replace the flat image entirely, so the two are never composited on top of each other */ .mark.shattered > img{visibility:hidden} .frag{ position:absolute;inset:0; backface-visibility:hidden; pointer-events:none; transform-style:preserve-3d; } .frag img{ position:absolute;inset:0; width:100%;height:100%; } /* The shards carry no shadow of their own: each one holds the whole render and is then clipped, so a per-shard drop-shadow gets sliced into visible grey rectangles. The intact image below keeps the shadow, and the two swap. */ .frag{visibility:hidden} .mark.shattered .frag{visibility:visible} /* A facet catching the light. Driven from the script by --lit, which tracks how far the piece has turned, so the glint follows the tumble instead of switching on and off with a class. */ .frag::after{ content:"";position:absolute;inset:0; background:linear-gradient(128deg, rgba(255,255,255,.6) 0%, rgba(190,225,255,.2) 26%, transparent 46%); opacity:calc(var(--lit, 0) * .42); mix-blend-mode:screen;pointer-events:none; } /* No shadow on a shard, ever. Each fragment holds the whole render before it is clipped, so a drop-shadow here comes back sliced into grey plates — the same mistake as putting it on .frag img. Depth comes from the lift in Z and the glint instead. */ .frag.loose img{ filter:brightness(calc(1 + var(--lit, 0) * .12)); } /* 13s against 19s: the two never line up, so the drift never reads as a loop */ @keyframes mark-in{ from{opacity:0;transform:translateY(24px) scale(.965)} to{opacity:1;transform:none} } @keyframes float-y{ 0%,100%{transform:translateY(6px)} 50% {transform:translateY(-10px)} } @keyframes float-x{ 0%,100%{transform:translateX(-5px) rotate(-.7deg)} 35% {transform:translateX(3px) rotate(.5deg)} 70% {transform:translateX(6px) rotate(1deg)} } @media (prefers-reduced-motion:reduce){ .mark,.mark-wrap{animation:none} } @media (prefers-reduced-motion:reduce){ .mark,.mark-wrap{animation:none} .mark.is-liquid{filter:drop-shadow(0 34px 46px rgba(6,32,60,.34))} } .splash-copy{position:relative;z-index:2;text-align:center;padding:24px 20px 0;color:#fff} .splash-copy h1{ color:#fff;font-size:clamp(1.55rem,3.4vw,2.6rem); text-shadow:0 1px 4px rgba(6,40,84,.4), 0 6px 44px rgba(6,40,84,.4); margin-bottom:12px; } .splash-copy h1 em{font-style:normal;color:var(--accent-soft)} .splash-line{ font-size:15px;color:rgba(255,255,255,.86); text-shadow:0 1px 3px rgba(6,40,84,.65), 0 2px 16px rgba(6,40,84,.45);margin:0; } .hero-stats{ display:flex;justify-content:center;gap:26px;flex-wrap:wrap; margin-top:18px;opacity:0;transition:opacity .5s var(--ease); } @media (max-width:620px){ .hero-stats{ display:grid;grid-template-columns:1fr 1fr;gap:12px 20px; max-width:300px;margin-left:auto;margin-right:auto; } } .hero-stats.in{opacity:1} .hero-stats dd{transition:color .35s var(--ease)} .hero-stats dd.tick{animation:tick .5s var(--ease)} @keyframes tick{ from{opacity:.35} to{opacity:1} } .hero-stats div{text-align:center} .hero-stats dt{ font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.78);margin-bottom:3px; text-shadow:0 1px 3px rgba(6,40,84,.6); } .hero-stats dd{ margin:0;font-family:"Instrument Sans",sans-serif;font-size:1.02rem;font-weight:500; letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(6,40,84,.7), 0 2px 14px rgba(6,40,84,.5); } .splash-foot{ position:relative;z-index:2; display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap; padding:26px 20px 30px; } .status-pill,.credit-pill{ display:inline-flex;align-items:center;gap:8px; padding:8px 16px;font-size:12.5px;color:rgba(255,255,255,.92);text-decoration:none; text-shadow:0 1px 2px rgba(6,40,84,.4); } .credit-pill:hover{color:#fff} .status-pill .dot{width:6px;height:6px;border-radius:50%;background:#FFD426;flex:0 0 6px} @media (max-height:680px){ .hero-stats{display:none} .splash-stage{padding-top:10px} .mark{max-height:34vh} } /* ---------- inner pages ---------- */ .page{max-width:var(--maxw);margin:0 auto;padding:0 20px 70px} .page-head{padding:44px 4px 26px;color:#fff} .page-head .label{color:rgba(255,255,255,.66);margin-bottom:12px} .page-head h1{color:#fff;text-shadow:0 1px 4px rgba(6,40,84,.35)} .page-next{padding:26px 4px 0} .page-next a{ color:rgba(255,255,255,.9);text-decoration:none;font-size:14px; text-shadow:0 1px 3px rgba(6,40,84,.45); } .page-next a:hover{color:#fff} .page-foot{max-width:62ch;margin:44px auto 0;text-align:center;color:rgba(255,255,255,.9)} .page-foot p{font-size:13px;line-height:1.6;text-shadow:0 1px 3px rgba(6,40,84,.55)} .page-foot .fineprint{color:rgba(255,255,255,.78);margin-top:12px} /* ---------- bento ---------- */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-bottom:var(--gap)} .b-steps .tile{grid-column:span 4} .b-arg .tile-argument{grid-column:span 7} .b-arg .tile-art{grid-column:span 5} .b-live .tile-stats{grid-column:span 7} .b-live .tile-note{grid-column:span 5} .b-kv .tile-kv{grid-column:span 6} .b-status .tile-status{grid-column:1/-1} @media (max-width:900px){.bento>.tile{grid-column:1/-1!important}} /* ---------- tiles ---------- */ /* One material for every tile, and it is the header's: clear glass. The black panels and the white frosted ones were two different surfaces on the same page; against a plain sky they both read as objects stuck on top of it rather than as part of it. */ .tile{ border-radius:var(--r);padding:26px;display:flex;flex-direction:column; color:#fff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06), 0 18px 44px -28px rgba(6,32,60,.5); } .tile .label{margin-bottom:14px;color:rgba(255,255,255,.55)} .tile p{color:rgba(255,255,255,.80);font-size:14.5px} .tile h2,.tile h3{color:#fff} .tile strong{color:#fff;font-weight:500} .tile .fineprint{color:rgba(255,255,255,.6)} .tile-art{padding:12px;margin:0;overflow:hidden} .tile-art img{width:100%;height:100%;display:block;border-radius:16px;flex:1 1 auto;min-height:0;object-fit:cover} .tile-art figcaption{padding:18px 14px 6px;flex:0 0 auto} .tile-art figcaption p{margin-top:8px;font-size:14.5px} .tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .tile-top .label{margin-bottom:0} .dot-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase} .dot-live i{width:6px;height:6px;border-radius:50%;background:#30D158;animation:ping 2.4s infinite} @keyframes ping{ 0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)} 70%{box-shadow:0 0 0 8px rgba(48,209,88,0)} 100%{box-shadow:0 0 0 0 rgba(48,209,88,0)} } .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 16px;background:rgba(255,255,255,.14);border-radius:var(--r-sm);overflow:hidden} .stats>div{background:rgba(255,255,255,.05);padding:15px 16px} .stats dt{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:5px} .stats dd{margin:0;font-family:"Instrument Sans",sans-serif;font-size:1.18rem;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff} .tile-stats .fineprint{margin-top:auto} @media (max-width:620px){.stats{grid-template-columns:1fr 1fr}} .step{font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.1em;margin-bottom:14px;display:block} .b-steps h3{margin-bottom:10px} .toggle-row{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;font-size:13.5px;color:#fff} .toggle{flex:0 0 auto;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:background .3s var(--ease)} .toggle[data-on="true"]{background:#fff} .toggle i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s var(--ease),background .3s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.35)} .toggle[data-on="true"] i{transform:translateX(18px);background:#1668BC} .flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:20px} .chip{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);font-size:12.5px;color:#fff} .chip-accent{background:var(--accent-soft);color:#052135;border-color:transparent;font-weight:500} .arrow{color:rgba(255,255,255,.5);font-size:13px} .tile-argument h2{margin-bottom:14px} .compare{display:grid;gap:10px;margin-top:20px} .compare-row{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)} .compare-row strong{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.015em} .compare-row span{display:block;font-size:12.5px;color:rgba(255,255,255,.6)} .compare-row-accent{border-color:rgba(142,216,255,.4);background:rgba(142,216,255,.08)} .compare-row-accent strong{color:var(--accent-soft)} .kv{margin:0;display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto} .kv>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13)} .kv>div:last-child{border-bottom:0} .kv dt{font-size:13px;color:rgba(255,255,255,.6)} .kv dd{margin:0;font-size:13px;font-weight:500;text-align:right;color:#fff} .tile-kv .fineprint{margin-top:18px;flex:0 0 auto} .tile-status h2{margin-bottom:12px} .tile-status p{max-width:60ch} .ca-box{margin:20px 0;padding:16px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.28);max-width:420px} .ca-box .label{margin-bottom:7px} .ca-value{font-family:"Geist Mono",monospace;font-size:13px;color:rgba(255,255,255,.75)} .row-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto} .btn-outline{ display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 22px; border-radius:999px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.2); text-decoration:none;font-size:14px;font-weight:500;transition:background .2s var(--ease) } .btn-outline:hover{background:rgba(255,255,255,.14)} /* reveal */ .page .tile{opacity:0;transform:translateY(14px)} .page .tile.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)} @media (prefers-reduced-motion:reduce){.page .tile{opacity:1;transform:none}}