/* ============================================================ Forsoka Culinary Arts - app showcase landing page Everything visual comes from the Modernist tokens in tokens.css. Radius is 0 across the system, so nothing here rounds a corner; the only shadow is shadow-lg on the device. ============================================================ */ /* A splash screen: the whole thing is exactly one viewport, never scrolls, and the device takes whatever room the fixed rows leave. `dvh` so mobile browser chrome cannot push the icon row out of sight. Scoped to - this stylesheet is shared with apps.html, which is a document and must scroll. Locking `html` unscoped froze it. */ html.splash, html.splash body{ height:100%; overflow:hidden } .page{ height:100vh; height:100dvh; display:flex; flex-direction:column; font-family:var(--font-body); color:var(--color-text); background:var(--color-bg); } /* ─────────────── header ─────────────── */ .header{ flex:0 0 auto; display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:clamp(10px, 1.8vh, 20px) clamp(16px, 3vw, 40px); border-bottom:2px solid var(--color-divider); } .brand{ font-family:var(--font-heading); font-weight:700; font-size:20px; letter-spacing:-0.01em; text-transform:uppercase; } .tagline{ font-size:13px; color:var(--color-neutral-700); margin-top:2px } .count{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-neutral-700); } /* ─────────────── stage ─────────────── */ .stage{ flex:1 1 auto; min-height:0; /* may shrink - that is the point */ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:clamp(10px, 2vh, 24px) clamp(16px, 3vw, 40px); perspective:1600px; } /* ─────────────── device ─────────────── */ .device{ position:relative; z-index:150; background:var(--color-neutral-900); box-shadow:var(--shadow-lg); transform-style:preserve-3d; backface-visibility:hidden; transform:rotateY(0deg); padding:14px; /* iPhone; the iPad bezel is set from JS */ } .device__screen{ display:block; width:220px; /* replaced on first measure */ aspect-ratio:921 / 2000; object-fit:cover; background:var(--color-neutral-100); } .device[data-device="ipad"]{ padding:22px } .device[data-device="ipad"] .device__screen{ aspect-ratio:4 / 3 } /* the mesh draws over the CSS frame, under the info block and icon row */ .gl-stage{ position:absolute; inset:0; z-index:200; pointer-events:none; opacity:0; transition:opacity .45s ease; } .gl-stage.is-live{ opacity:1 } .gl-canvas{ display:block; width:100%; height:100% } /* Kept in the flow so the stage still measures the same, but not drawn - while the model is on its way, and for good once it has arrived. */ .device--replaced, .gl-pending .device{ visibility:hidden } /* ─────────────── caption ─────────────── */ /* Sits in the flow rather than over the stage, so the device shrinks to make room for it instead of being covered by it. Both lines are held at a fixed height so the rows below never shift as the text changes length. */ .caption{ flex:0 0 auto; text-align:center; padding:0 clamp(16px,3vw,40px) clamp(4px,0.8vh,10px); } /* the two lines fade independently: the name only when the app itself changes, the description on every turn */ .caption__name, .caption__desc{ transition:opacity .18s ease } .caption__name.is-out, .caption__desc.is-out{ opacity:0 } .caption__name{ font-family:var(--font-heading); font-weight:700; font-size:clamp(15px,2.1vh,22px); line-height:1.15; letter-spacing:-0.01em; } .caption__desc{ font-size:clamp(12px,1.5vh,15px); line-height:1.3; color:var(--color-neutral-700); margin-top:2px; /* one line on any sane width; long ones ellipsis rather than reflow */ max-width:min(660px, 92vw); margin-inline:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ─────────────── icon row ─────────────── */ .icons{ flex:0 0 auto; display:flex; justify-content:center; align-items:flex-end; gap:min(14px, 1.2vw); flex-wrap:nowrap; padding:clamp(8px, 1.6vh, 20px) clamp(16px, 3vw, 40px); } .icon{ appearance:none; -webkit-appearance:none; border:none; cursor:pointer; padding:0; width:min(72px, 8vh, calc((100vw - 80px - 10 * min(14px, 1.2vw)) / 11)); aspect-ratio:1; height:auto; flex:0 1 auto; background:transparent; /* iOS corner radius is 22.37% of the icon - the marks ship square and the OS masks them, so the mask happens here instead */ border-radius:22.4%; } .icon:hover{ outline:2px solid var(--color-accent-600); outline-offset:2px; border-radius:22.4% } .icon:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px } .icon img{ width:100%; height:100%; display:block; box-sizing:border-box; border-radius:22.4%; /* transparent rather than absent, so nothing shifts when the ring appears */ border:2px solid transparent; } .icon[aria-pressed="true"] img{ border-color:var(--color-accent) } /* ─────────────── call to action ─────────────── */ .cta-row{ flex:0 0 auto; display:flex; justify-content:center; padding:0 clamp(16px,3vw,40px) clamp(8px,1.4vh,16px); } .cta{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:700; font-size:clamp(13px,1.5vh,15px); line-height:1.2; letter-spacing:-0.01em; text-decoration:none; padding:clamp(8px,1.2vh,12px) clamp(16px,2vw,26px); background:var(--color-accent); color:var(--color-bg); border-radius:var(--radius-md); } .cta:hover{ background:var(--color-accent-600) } .cta:active{ background:var(--color-accent-700) } .cta span{ font-weight:400; opacity:.85 } /* ─────────────── footer ─────────────── */ .footer{ flex:0 0 auto; display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:clamp(8px, 1.6vh, 18px) clamp(16px, 3vw, 40px); border-top:2px solid var(--color-divider); font-size:13px; color:var(--color-neutral-700); } .footer__kicker{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase } .noscript{ position:absolute; inset:auto 0 12px; z-index:400; text-align:center; margin:0; font-size:15px; color:var(--color-neutral-700); } /* Spinning a device edge-on is the whole interaction, so when the viewer has asked for less motion the swap is instant rather than merely faster. */ @media (prefers-reduced-motion:reduce){ .device{ transition:none !important } } /* the device can be dragged around */ .stage{ cursor:grab; touch-action:none } .stage.is-grabbing{ cursor:grabbing } .icons,.info{ cursor:auto } .footer a { color: inherit; text-decoration: underline; }