/* ============================================================ Gallery chrome — shared by index.html and the app detail pages Themes: dark (default) / light / system via [data-theme] on ============================================================ */ :root, [data-theme="dark"] { --bg: #0E0F12; --surface: #16181D; --surface-2: #1D2027; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --text: #F2F4F0; --muted: #8F97A5; --faint: #5C6472; --bar-bg: rgba(14,15,18,.82); --frame-bg: #050607; --frame-shadow: 0 24px 48px rgba(0,0,0,.5); --frame-shadow-hover: 0 34px 64px rgba(0,0,0,.6); --glow-opacity: 1; --swatch-border: rgba(255,255,255,.14); color-scheme: dark; } [data-theme="light"] { --bg: #F2F3ED; --surface: #FFFFFF; --surface-2: #E9EBE2; --line: rgba(23,28,23,.1); --line-strong: rgba(23,28,23,.2); --text: #171C17; --muted: #647060; --faint: #98A293; --bar-bg: rgba(242,243,237,.85); --frame-bg: #0B0C0E; --frame-shadow: 0 18px 38px rgba(23,28,23,.16); --frame-shadow-hover: 0 28px 54px rgba(23,28,23,.22); --glow-opacity: .55; --swatch-border: rgba(23,28,23,.14); color-scheme: light; } @media (prefers-color-scheme: light) { [data-theme="system"] { --bg: #F2F3ED; --surface: #FFFFFF; --surface-2: #E9EBE2; --line: rgba(23,28,23,.1); --line-strong: rgba(23,28,23,.2); --text: #171C17; --muted: #647060; --faint: #98A293; --bar-bg: rgba(242,243,237,.85); --frame-bg: #0B0C0E; --frame-shadow: 0 18px 38px rgba(23,28,23,.16); --frame-shadow-hover: 0 28px 54px rgba(23,28,23,.22); --glow-opacity: .55; --swatch-border: rgba(23,28,23,.14); color-scheme: light; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* A design gallery that scrolls sideways on a phone is a poor advert for six phone designs. Nothing here is ever wider than the viewport. */ body { overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } ::selection { background: rgba(201,242,79,.3); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); } .theme-toggle button { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: all .16s ease; } .theme-toggle button svg { width: 15px; height: 15px; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button.on { background: var(--text); color: var(--bg); } /* ---------- Top bar (detail pages) ---------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; background: var(--bar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .back-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; } .back-link:hover { color: var(--text); } .back-link svg { width: 17px; height: 17px; } .topbar .brand-mini { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } /* The library mark. Its two neutral plates take the brand-mini ink; the accent is fixed, so the mark stays identifiable when the text around it is faint. */ .topbar .mini-mark { width: 15px; height: 15px; flex: none; } /* ---------- Hero (landing) ---------- */ .hero { position: relative; padding: 72px 24px 40px; text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -260px; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(closest-side, rgba(201,242,79,.10), transparent 65%), radial-gradient(closest-side, rgba(47,163,124,.10), transparent); opacity: var(--glow-opacity); pointer-events: none; } .hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; background: var(--surface); } .hero .kicker i { width: 7px; height: 7px; border-radius: 50%; background: #C9F24F; box-shadow: 0 0 10px #C9F24F; } .hero h1 { font-size: clamp(38px, 6vw, 62px); font-weight: 800; letter-spacing: -0.035em; margin-top: 26px; line-height: 1.04; position: relative; } .hero h1 .grad { background: linear-gradient(95deg, #D4F76A, #48D8B6 55%, #D9B36A); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { max-width: 640px; margin: 18px auto 0; font-size: 16px; line-height: 1.6; color: var(--muted); position: relative; } .hero p code { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 7px; color: var(--text); } .hero .meta-row { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 28px; position: relative; font-size: 13px; font-weight: 600; color: var(--faint); } .hero .meta-row b { color: var(--text); font-weight: 700; } .hero .theme-slot { position: relative; margin-top: 34px; display: flex; justify-content: center; } /* ---------- Landing: app cards ---------- */ main { max-width: 1240px; margin: 0 auto; padding: 10px 32px 90px; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; } @media (max-width: 980px) { .cards { grid-template-columns: 1fr; } } .app-card { display: block; min-width: 0; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; padding: 30px 30px 26px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .app-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--frame-shadow-hover); } .ac-head { display: flex; align-items: center; gap: 18px; min-width: 0; } /* The text column beside the logo: without this a long unbroken tagline word sets the card's min-content width. */ .ac-head > div { min-width: 0; } .app-logo { width: 62px; height: 62px; border-radius: 20px; flex: none; display: flex; align-items: center; justify-content: center; } .app-logo.fitpulse { background: linear-gradient(135deg, #D4F76A, #3ECF8E); box-shadow: 0 12px 30px rgba(201,242,79,.25); } .app-logo.coinly { background: linear-gradient(135deg, #11795A, #0A4532); box-shadow: 0 12px 30px rgba(14,92,67,.4); } .ac-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; } .ac-head .tagline { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; } .ac-strip { display: flex; gap: 12px; min-width: 0; margin: 24px 0 20px; overflow: hidden; } .ac-strip .mini { flex: 1; /* The renders are 824px wide intrinsically. A flex item defaults to min-width:auto, i.e. min-content, so without this the strip demands 4 x 824px and pushes the whole page into a horizontal scroll on a phone. */ min-width: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 10px 22px rgba(0,0,0,.28); transition: transform .2s ease; } .app-card:hover .ac-strip .mini { transform: translateY(-3px); } .ac-strip .mini:nth-child(2) { transform: translateY(10px); } .ac-strip .mini:nth-child(3) { transform: translateY(4px); } .ac-strip .mini:nth-child(4) { transform: translateY(14px); } .app-card:hover .ac-strip .mini:nth-child(2) { transform: translateY(6px); } .app-card:hover .ac-strip .mini:nth-child(4) { transform: translateY(10px); } .ac-strip img { display: block; width: 100%; } .ac-foot { display: flex; align-items: center; gap: 14px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); } .ac-foot .count { font-size: 13px; font-weight: 800; } .ac-foot .flows { font-size: 12px; color: var(--faint); font-weight: 600; } .ac-foot .go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--text); } .ac-foot .go svg { width: 16px; height: 16px; transition: transform .2s ease; } .app-card:hover .go svg { transform: translateX(4px); } .palette { display: flex; gap: 7px; } .swatch { width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--swatch-border); position: relative; } .swatch:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #111; color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px; white-space: nowrap; z-index: 5; } /* ---------- Detail page ---------- */ .detail-wrap { max-width: 1280px; margin: 0 auto; padding: 40px 32px 90px; } .app-head { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .app-head h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; } .app-head .tagline { font-size: 14.5px; color: var(--muted); margin-top: 5px; max-width: 560px; line-height: 1.55; } .app-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .fact { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--surface); } .app-side { margin-left: auto; text-align: right; } .palette-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--faint); text-transform: uppercase; margin-top: 9px; } .detail-wrap .app-side .swatch { width: 34px; height: 34px; border-radius: 12px; } .flow-group { margin-top: 44px; } .flow-group > h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 14px; } .flow-group > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 34px 26px; margin-top: 24px; } .shot { cursor: zoom-in; } .frame { position: relative; border-radius: 30px; background: var(--frame-bg); padding: 7px; box-shadow: 0 0 0 1px var(--line), var(--frame-shadow); transition: transform .25s ease, box-shadow .25s ease; } .shot:hover .frame { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line-strong), var(--frame-shadow-hover); } .frame img { display: block; width: 100%; border-radius: 23px; } .shot .cap { margin-top: 14px; padding: 0 4px; } .shot .cap h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .shot .cap p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; } .shot .cap .num { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } /* ---------- Notes section ---------- */ .notes { margin-top: 70px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); padding: 34px 38px; } .notes h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .notes .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px 40px; margin-top: 22px; } .notes h3 { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .notes h3 i { width: 8px; height: 8px; border-radius: 3px; flex: none; } .notes p, .notes li { font-size: 13.5px; line-height: 1.65; color: var(--muted); } .notes ul { list-style: none; } .notes li { padding-left: 16px; position: relative; margin-bottom: 6px; } .notes li::before { content: "—"; position: absolute; left: 0; color: var(--faint); } .notes code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 7px; color: var(--text); } footer { text-align: center; padding: 40px 20px 54px; color: var(--faint); font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); } /* ---------- Screen viewer ---------- Pan-and-zoom: the stage clips, the image is transformed. Panning is pointer drag (never scrollbars), zoom is anchored on the cursor or the viewport centre, and both survive navigating to the next screen. */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5,6,8,.94); backdrop-filter: blur(14px); display: none; flex-direction: column; overscroll-behavior: contain; } .lightbox.open { display: flex; } .lb-top { flex: none; display: flex; align-items: center; gap: 16px; padding: 14px 20px; position: relative; z-index: 3; } .lb-counter { font-size: 12.5px; font-weight: 800; color: #8F97A5; font-variant-numeric: tabular-nums; min-width: 54px; } .lb-cap { flex: 1; font-size: 14px; font-weight: 700; color: #F2F4F0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-controls { display: flex; align-items: center; gap: 6px; } .lb-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #F2F4F0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; } .lb-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); } .lb-btn[disabled] { opacity: .35; cursor: default; } .lb-btn[disabled]:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); } .lb-btn svg { width: 17px; height: 17px; } .lb-zoom-level { font-size: 12px; font-weight: 800; color: #8F97A5; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; } .lb-zoom-level:hover { color: #F2F4F0; } /* The stage clips; nothing inside it ever scrolls. */ .lb-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; cursor: grab; } .lb-stage.zoomed { cursor: grab; } .lb-stage.dragging { cursor: grabbing; } .lb-stage:not(.zoomed) { cursor: zoom-in; } /* Centred by absolute positioning, then moved by transform only — so the image is centred at every zoom level, including the moment it opens. */ .lb-zoomer { position: absolute; top: 50%; left: 50%; transform-origin: center center; will-change: transform; } .lb-zoomer.animate { transition: transform .18s cubic-bezier(.22,.61,.36,1); } .lb-zoomer img { display: block; max-height: calc(100vh - 190px); max-width: min(86vw, 430px); border-radius: 30px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.7); user-select: none; -webkit-user-drag: none; } @media (min-width: 1100px) { .lb-zoomer img { max-width: 460px; } } .lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(20,22,27,.8); backdrop-filter: blur(8px); color: #F2F4F0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .lb-arrow:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.38); } .lb-arrow svg { width: 22px; height: 22px; } .lb-arrow.prev { left: 22px; } .lb-arrow.next { right: 22px; } .lb-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); } .lb-arrow.next:hover { transform: translateY(-50%) translateX(2px); } /* Theme switch inside the viewer — compare a screen's two modes in place. */ .lb-theme { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(20,22,27,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); } .lb-theme button { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; color: #8F97A5; font: 700 11.5px/1 inherit; font-family: inherit; cursor: pointer; } .lb-theme button.on { background: #3AB0B0; color: #fff; } .lb-theme button svg { width: 13px; height: 13px; } .lb-hint { flex: none; text-align: center; padding: 10px 12px 14px; font-size: 11.5px; font-weight: 600; color: #5C6472; letter-spacing: .02em; } .lb-hint kbd { font-family: inherit; font-size: 10.5px; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 2px 6px; margin: 0 2px; color: #B9C0CC; } /* ============================================================ Responsive layer ------------------------------------------------------------ The library is read on phones as often as on a laptop, and a design gallery that cannot be browsed on a phone is a poor advertisement for six phone designs. Breakpoints step down the three things that actually break: the topbar's three columns, the app card's 4-up preview strip, and the viewer's chrome. ============================================================ */ /* ---------- Tablet / small laptop ---------- */ @media (max-width: 900px) { main { padding: 10px 22px 72px; } .topbar { padding: 10px 18px; gap: 12px; } /* The middle column is the first thing to go: it is a label, not a control. */ .topbar .brand-mini { display: none; } .app-card { padding: 24px 22px 22px; border-radius: 24px; } .ac-head { gap: 14px; } .app-logo { width: 54px; height: 54px; border-radius: 17px; } .ac-head h2 { font-size: 22px; } .hero h1 { font-size: clamp(28px, 7vw, 40px); } } /* ---------- Phone ---------- */ @media (max-width: 720px) { main, .detail-wrap { padding-left: 16px; padding-right: 16px; } .app-side { margin-left: 0; text-align: left; } .detail-wrap .app-side { text-align: left; } .notes { padding: 24px 18px; border-radius: 18px; } .notes .cols { gap: 20px 24px; } /* Icon-only theme toggle — the three glyphs are unambiguous. */ .theme-toggle button span.t-label { display: none; } .theme-toggle button { padding: 0 11px; } .cards { gap: 20px; margin-top: 26px; } /* Four previews at this width are 70px wide and read as noise; three is the most that still shows a screen rather than a colour. The strip is a taste of the design, so losing one costs nothing. */ .ac-strip { gap: 9px; margin: 20px 0 16px; } .ac-strip .mini:nth-child(4) { display: none; } .ac-strip .mini { border-radius: 12px; } .ac-strip .mini:nth-child(2) { transform: translateY(7px); } .ac-strip .mini:nth-child(3) { transform: translateY(3px); } /* The footer is three things competing for one line; let it wrap and put the call to action on its own row where it is a real target. */ .ac-foot { flex-wrap: wrap; row-gap: 12px; } .ac-foot .go { margin-left: 0; width: 100%; justify-content: flex-end; } .swatch { width: 22px; height: 22px; border-radius: 7px; } .hero p { font-size: 14.5px; } .hero .meta-row { font-size: 12px; } footer { padding-left: 16px; padding-right: 16px; } } /* ---------- Small phone ---------- */ @media (max-width: 460px) { main { padding: 6px 13px 60px; } .topbar { padding: 9px 13px; } .back-link { font-size: 13px; } .app-card { padding: 18px 16px 16px; border-radius: 20px; } .ac-head { gap: 12px; } .app-logo { width: 46px; height: 46px; border-radius: 14px; } .app-logo svg { width: 26px; height: 26px; } .ac-head h2 { font-size: 19px; } .ac-head .tagline { font-size: 12.5px; } /* Two previews at ~150px each still read; three would be 95px. */ .ac-strip .mini:nth-child(3) { display: none; } .ac-foot .count { font-size: 12px; } .swatch { width: 19px; height: 19px; border-radius: 6px; } .notes h2 { font-size: 18px; } } /* ============================================================ The viewer ============================================================ */ @media (max-width: 720px) { .lb-top { padding: 10px 12px; gap: 10px; } .lb-counter { min-width: 44px; font-size: 11.5px; } .lb-cap { font-size: 13px; } .lb-btn { width: 34px; height: 34px; } .lb-arrow { width: 42px; height: 42px; } .lb-arrow.prev { left: 10px; } .lb-arrow.next { right: 10px; } .lb-zoomer img { max-height: calc(100vh - 200px); border-radius: 22px; } } /* On a touch screen the arrows are redundant — the image is swipeable — and they sit on top of the artwork at exactly the width where it is smallest. Pointer-based, not width-based, so a narrow desktop window keeps them. */ @media (hover: none) and (pointer: coarse) and (max-width: 760px) { .lb-arrow { display: none; } } @media (max-width: 460px) { .lb-zoomer img { max-width: 92vw; } .lb-theme button { padding: 0 11px; height: 28px; } } /* Short viewports (a phone in landscape) have no room for the hint or for the generous vertical padding around the stage. */ @media (max-height: 560px) { .lb-hint { display: none; } .lb-top { padding: 8px 12px; } .lb-zoomer img { max-height: calc(100vh - 130px); } .lb-theme { bottom: 8px; } }