on the page, not just the screens. */ .screen { padding: 52px 0; } .screen.alt { background: var(--gray); } .screen .wrap { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 52px; align-items: start; } .screen-role { display: inline-block; font-size: 13px; font-weight: 600; color: var(--blue); background: var(--light-blue); padding: 5px 12px; border-radius: 6px; margin-bottom: 14px; } .screen h3 { margin-bottom: 12px; font-size: 24px; } .screen p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--medium); font-weight: 300; } .screen-removes { border-left: 3px solid var(--yellow-green); padding-left: 16px; font-size: 15px; line-height: 1.6; color: var(--black); font-weight: 300; } .screen-removes b { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 6px; } /* Live scaled preview of the real mockup — no screenshots to go stale */ .shot { display: block; text-decoration: none; } .shot-frame { --s: .62; position: relative; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 12px; border: 1px solid var(--light-blue); box-shadow: var(--shadow-card); background: #f4f6f7; transition: box-shadow .18s, border-color .18s; } .shot-frame iframe { position: absolute; top: 0; left: 0; /* max-width:none is load-bearing — a global img/iframe cap would make the mockup lay out at a squeezed viewport and then scale down a second time. It must render at its authored 1440. */ width: 1440px; max-width: none; height: 900px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; } .shot:hover .shot-frame { border-color: var(--blue); box-shadow: 0px 7px 0px 0px var(--blue); } .shot-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--blue); } .shot:hover .shot-open { color: var(--black); } /* -------------------------------------------------------------------------- Delivery phases — the one place order genuinely carries information -------------------------------------------------------------------------- */ .phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 14px; } .phase { background: #fff; border: 1px solid var(--light-blue); border-radius: 12px; box-shadow: var(--shadow-card); padding: 24px 22px; } .phase .p-n { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--blue); margin-bottom: 12px; } .phase h3 { font-size: 19px; margin-bottom: 8px; } .phase p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--medium); font-weight: 300; } .phase ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--medium); font-weight: 300; } .phase li::marker { color: var(--blue); } /* Answers the obvious "how?" straight after the timeline claim */ .phase-note { margin-top: 28px; padding-left: 18px; border-left: 3px solid var(--yellow-green); font-size: 15.5px; line-height: 1.7; color: var(--medium); font-weight: 300; max-width: 84ch; } .phase-note strong { color: var(--black); font-weight: 600; } /* -------------------------------------------------------------------------- Honesty panel -------------------------------------------------------------------------- */ .honesty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 14px; } .honesty-col { background: #fff; border: 1px solid var(--light-blue); border-radius: 12px; box-shadow: var(--shadow-card); padding: 26px 24px; } .honesty-col h3 { font-size: 20px; margin-bottom: 16px; } .honesty-col ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.75; color: var(--medium); font-weight: 300; } .honesty-col li::marker { color: var(--blue); } .honesty-col li { margin-bottom: 8px; } .honesty-col.is-real { box-shadow: 0px 7px 0px 0px var(--yellow-green); border-color: var(--yellow-green); } .honesty-col.is-real li::marker { color: #8ea218; } /* -------------------------------------------------------------------------- Close -------------------------------------------------------------------------- */ .close { background: var(--dark-blue); padding: 78px 0; text-align: center; color: #fff; } .close h2 { max-width: 22ch; margin: 0 auto 18px; color: #fff; } .close h2 span { color: var(--yellow-green); } .close .lede { margin: 0 auto 32px; text-align: center; max-width: 62ch; color: rgba(255, 255, 255, .78); } .close .lede strong { color: #fff; } /* The site's own CTA: yellow-green, inverting to blue on hover */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--yellow-green); color: var(--black); font-size: 20px; font-weight: 600; text-decoration: none; padding: 12px 24px; border-radius: 8px; transition: all .5s; } .cta:hover { background: var(--blue); color: #fff; } .cta-2 { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; border: 1px solid rgba(255, 255, 255, .38); color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; padding: 12px 22px; border-radius: 8px; transition: all .3s; } .cta-2:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { background: var(--black); padding: 30px 0; font-size: 14px; color: rgba(255, 255, 255, .62); font-weight: 300; } .foot .wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; } .foot .logo { background: #fff; padding: 6px 12px; border-radius: 5px; max-width: 170px; display: block; } .foot a { color: rgba(255, 255, 255, .82); } .foot a:hover { color: var(--yellow-green); } .foot .f-right { margin-left: auto; text-align: right; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1020px) { .hero .wrap, .screen .wrap { grid-template-columns: 1fr; gap: 34px; } .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger-row { grid-template-columns: 1fr; gap: 18px; } .fiction .wrap { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 720px) { .wrap { padding: 0 20px; } .section { padding: 52px 0; } .spec { grid-template-columns: 1fr; gap: 0; } .phases, .honesty { grid-template-columns: 1fr; } .hero { padding: 40px 0 44px; } .masthead nav { display: none; } .cta-2 { margin: 14px 0 0; } .foot .f-right { margin-left: 0; text-align: left; } } @media (prefers-reduced-motion: reduce) { .stage { opacity: 1; transform: none; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }