/* Flick web. * * Palette lifted from lib/theme/app_theme.dart so the site and the app are * recognisably the same product: near-black AMOLED ground, one lavender accent. * * Dark is the default and light is the override, matching the app. The theme * follows the system unless the visitor has chosen, in which case * data-theme on wins — the same three-state arrangement the app uses. */ :root { --bg: #08080C; --surface: #121218; --card: #16161F; --button: #1C1C24; --accent: #B39DFF; --accent-soft: #C9B6FF; --accent-deep: #3B1E7A; --hairline: rgba(255, 255, 255, 0.14); --text: #FFFFFF; --text-2: rgba(255, 255, 255, 0.62); --text-3: rgba(255, 255, 255, 0.38); --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --radius: 16px; --wrap: 1240px; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #F6F6FA; --surface: #FFFFFF; --card: #FFFFFF; --button: #ECECF3; --accent: #6D4AE0; --accent-soft: #7C5CE6; --accent-deep: #FFFFFF; --hairline: rgba(0, 0, 0, 0.10); --text: #101014; --text-2: rgba(0, 0, 0, 0.62); --text-3: rgba(0, 0, 0, 0.40); --shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } } :root[data-theme="light"] { --bg: #F6F6FA; --surface: #FFFFFF; --card: #FFFFFF; --button: #ECECF3; --accent: #6D4AE0; --accent-soft: #7C5CE6; --accent-deep: #FFFFFF; --hairline: rgba(0, 0, 0, 0.10); --text: #101014; --text-2: rgba(0, 0, 0, 0.62); --text-3: rgba(0, 0, 0, 0.40); --shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .muted { color: var(--text-2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-deep); padding: 10px 16px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } /* ---------------------------------------------------------------- header */ /* Replaced by .appbar in the shell section below. Kept as a no-op so any markup still using it is not left unstyled. */ .site-header { border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; } .wordmark { font-weight: 700; font-size: 20px; letter-spacing: 0.22em; background: linear-gradient(90deg, #D9BFFF, #A78BFA, #E3A9FF); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; } .wordmark.small { font-size: 16px; } .nav { display: flex; gap: 4px; flex: none; } .nav a { padding: 7px 13px; border-radius: 999px; color: var(--text-2); font-size: 14.5px; font-weight: 500; } .nav a:hover { color: var(--text); background: var(--button); } .search { display: flex; flex: 1; min-width: 140px; max-width: 420px; margin-left: auto; } .search input { flex: 1; min-width: 0; background: var(--button); border: 1px solid var(--hairline); border-right: 0; border-radius: 999px 0 0 999px; padding: 9px 16px; color: var(--text); font: inherit; font-size: 14.5px; } .search button { background: var(--button); border: 1px solid var(--hairline); border-left: 0; border-radius: 0 999px 999px 0; color: var(--text-2); padding: 0 16px; cursor: pointer; } .search button:hover { color: var(--accent); } .theme-toggle { flex: none; background: var(--button); border: 1px solid var(--hairline); color: var(--text-2); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; } .theme-toggle:hover { color: var(--accent); } .chips-row { padding-bottom: 10px; } .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chips.spread { flex-wrap: wrap; overflow: visible; margin-top: 14px; } .chips a { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); font-size: 13.5px; color: var(--text-2); white-space: nowrap; } .chips a:hover { color: var(--text); border-color: var(--accent); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; min-height: clamp(320px, 52vw, 520px); display: flex; align-items: flex-end; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); } .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%); } .hero-inner { position: relative; padding-top: 60px; padding-bottom: 42px; color: #fff; } .eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.72); } .hero h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 46px); line-height: 1.1; font-weight: 700; } .hero-sub { margin: 0 0 20px; color: rgba(255,255,255,.8); font-size: 15px; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .dot { margin: 0 8px; opacity: .5; } /* --------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; font-family: inherit; } .btn-accent { background: var(--accent); color: var(--accent-deep); } .btn-accent:hover { background: var(--accent-soft); } .btn-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); } .wrap .btn-ghost { background: var(--button); color: var(--text); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* ------------------------------------------------------------- sections */ .page-head { padding: 34px 0 20px; } .page-head h1 { margin: 0 0 4px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; } .page-head p { margin: 0; } .rail-section { margin: 38px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .section-head h2 { margin: 0; font-size: 20px; font-weight: 600; } .section-head p { margin: 2px 0 0; font-size: 13.5px; } .more { color: var(--accent); font-size: 14px; font-weight: 500; flex: none; } .more-row { display: flex; justify-content: center; margin-top: 26px; } .empty { color: var(--text-2); padding: 40px 0; text-align: center; } .notice { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid #E0A03C; border-radius: 12px; padding: 16px 18px; margin: 24px 0; } .notice p { margin: 6px 0 0; font-size: 14px; } .notice code { background: var(--button); padding: 1px 6px; border-radius: 5px; font-size: 13px; } /* ----------------------------------------------------------------- grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; /* No bar, like every other sideways scroller here. The padding is what is left of the room the bar used to take — enough that a focused tile's ring is not clipped by the overflow, and no more. */ padding-bottom: 4px; scrollbar-width: none; } .rail::-webkit-scrollbar { width: 0; height: 0; } .rail > .tile { scroll-snap-align: start; } .tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--card); /* aspect-ratio is set inline per tile from the catalogue's real dimensions, so the grid never reflows as images arrive. */ } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.3,1); } .tile:hover img { transform: scale(1.05); } .tile-shade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); opacity: 0; transition: opacity .25s; } .tile:hover .tile-shade, .tile:focus-visible .tile-shade { opacity: 1; } .tile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .tile:hover .tile-meta, .tile:focus-visible .tile-meta { opacity: 1; transform: none; } .tile-title { color: #fff; font-size: 13px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 5px; flex-wrap: wrap; } .badge { background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.16); } .badge.premium { background: var(--accent); color: #1b1030; border-color: transparent; } .fav { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; transition: opacity .2s; } .tile:hover .fav, .fav:focus-visible, .fav.on { opacity: 1; } .fav.on { color: #FF6B8A; } .fav.on svg path { fill: #FF6B8A; } @media (hover: none) { .fav { opacity: 1; } } /* ----------------------------------------------------------- categories */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .cat-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; display: block; } .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .cat-card:hover img { transform: scale(1.06); } .cat-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.72)); } .cat-label { position: absolute; left: 16px; bottom: 14px; color: #fff; } .cat-name { display: block; font-size: 19px; font-weight: 600; } .cat-count { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); } /* --------------------------------------------------------------- detail */ .crumbs { display: flex; gap: 8px; align-items: center; padding: 22px 0 4px; font-size: 13.5px; color: var(--text-2); flex-wrap: wrap; } .crumbs a:hover { color: var(--accent); } .crumbs .current { color: var(--text); } .detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 34px; align-items: start; padding: 14px 0 10px; } .detail-image { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); max-height: 78vh; } .detail-image img { width: 100%; height: 100%; object-fit: contain; } .detail-side h1 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 32px); font-weight: 700; } .detail-sub { margin: 0 0 18px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .detail-sub a:hover { color: var(--accent); } .detail-desc { margin: 0 0 18px; color: var(--text-2); } .detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; } .premium-gate { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; margin-bottom: 24px; } .premium-gate p { margin: 0 0 8px; } .premium-gate .btn { margin-top: 6px; } .specs { margin: 0 0 26px; display: grid; gap: 0; } .specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hairline); } .specs dt { color: var(--text-2); font-size: 14px; margin: 0; } .specs dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; } .specs a:hover { color: var(--accent); } .palette, .tags { margin-bottom: 24px; } .palette h2, .tags h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--text-2); } .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hairline); display: block; } /* --------------------------------------------------------------- drops */ .drop-block { margin: 30px 0 44px; } .drop-head { margin-bottom: 14px; } .drop-head h2, .drop-head h3 { margin: 0; font-size: 19px; font-weight: 600; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .drop-head p { margin: 2px 0 0; font-size: 13.5px; } /* --------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--hairline); margin-top: 60px; padding: 42px 0 26px; } .footer-inner { display: flex; gap: 44px; flex-wrap: wrap; justify-content: space-between; } .footer-brand { max-width: 360px; } .footer-brand p { margin: 10px 0 16px; font-size: 14px; } .footer-links { display: flex; gap: 56px; flex-wrap: wrap; } .footer-links h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 0 0 10px; font-weight: 600; } .footer-links a { display: block; padding: 4px 0; color: var(--text-2); font-size: 14.5px; } .footer-links a:hover { color: var(--accent); } .footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hairline); } .footer-bottom p { margin: 0; font-size: 13px; } /* ------------------------------------------------------------ responsive */ @media (max-width: 940px) { .detail-grid { grid-template-columns: 1fr; gap: 22px; } .detail-image { max-height: 62vh; } } @media (max-width: 780px) { .header-inner { flex-wrap: wrap; gap: 10px; } .nav { order: 3; width: 100%; overflow-x: auto; } .search { order: 2; max-width: none; } .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .rail { grid-auto-columns: minmax(136px, 1fr); gap: 10px; } .cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .footer-links { gap: 32px; } } @media (max-width: 420px) { .grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== App-parity surfaces: preview/tune, filters, packs, pairs, settings ========================================================================== */ /* ------------------------------------------------------------- pills */ .pills { display: flex; gap: 7px; flex-wrap: wrap; } .pill { background: var(--button); border: 1px solid var(--hairline); color: var(--text-2); padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; position: relative; } .pill:hover { color: var(--text); } .pill.on { background: var(--accent); color: var(--accent-deep); border-color: transparent; } /* A dot marks a control the user has moved, so an adjustment hiding behind another tab is still visible — the same affordance the app uses. */ .pill.touched::after { content: ""; position: absolute; top: 3px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .pill.on.touched::after { background: var(--accent-deep); } /* ------------------------------------------------------ preview / tune */ .preview-wrap { padding-bottom: 30px; } .preview-root { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; opacity: 0; transition: opacity .3s; } .preview-root.ready { opacity: 1; } .preview-stage { display: grid; place-items: center; min-height: 60vh; background: var(--card); border-radius: 20px; padding: 18px; border: 1px solid var(--hairline); } #preview-canvas { border-radius: 12px; box-shadow: var(--shadow); touch-action: none; cursor: grab; max-width: 100%; } #preview-canvas:active { cursor: grabbing; } .preview-panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 18px; position: sticky; top: 96px; } .mode-switch { display: flex; gap: 6px; margin-bottom: 14px; } .control { margin-bottom: 20px; } .control h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin: 0 0 9px; font-weight: 600; } .slider-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .slider-row input[type=range] { flex: 1; accent-color: var(--accent); min-width: 0; } .readout { width: 46px; text-align: right; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .icon-btn { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 4px; display: grid; place-items: center; } .icon-btn:hover { color: var(--accent); } .full-width { width: 100%; } .tiny { font-size: 12px; margin: 10px 0 0; } .fit-warning { background: rgba(224, 160, 60, .16); border: 1px solid rgba(224, 160, 60, .34); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 12px; margin: 0 0 12px; } .hint { background: var(--button); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--text-2); margin: 0 0 14px; } /* ---------------------------------------------------------- filters */ .filters { margin: 4px 0 18px; } .filter-drop summary { cursor: pointer; padding: 9px 16px; border-radius: 999px; background: var(--button); border: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; list-style: none; } .filter-drop summary::-webkit-details-marker { display: none; } .filter-drop summary .badge { background: var(--accent); color: var(--accent-deep); } .filter-body { margin-top: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; align-items: start; } .filter-group { display: flex; flex-direction: column; gap: 7px; } .filter-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); font-weight: 600; } .filter-group select, .request-form textarea { background: var(--button); border: 1px solid var(--hairline); color: var(--text); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 14px; } .filter-actions { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); margin-top: 2px; } .swatch-picker { display: flex; gap: 6px; flex-wrap: wrap; } .swatch-opt { cursor: pointer; } .swatch-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .swatch-opt .swatch { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--hairline); } .swatch-opt .swatch.any { background: var(--button); font-size: 10px; color: var(--text-2); width: auto; padding: 0 9px; } .swatch-opt input:checked + .swatch { border-color: var(--accent); } .swatch-opt input:focus-visible + .swatch { outline: 2px solid var(--accent); outline-offset: 2px; } .intent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; font-size: 13.5px; } .chip-static { padding: 4px 11px; border-radius: 999px; background: var(--button); border: 1px solid var(--hairline); font-size: 12.5px; } .intent-undo { color: var(--accent); font-size: 13px; } /* ------------------------------------------------------------- packs */ .pack-hero { padding: 54px 0 44px; color: #fff; } .pack-hero h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 40px); font-weight: 700; } .pack-hero p { margin: 0; opacity: .88; } .pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .pack-card { border-radius: 18px; overflow: hidden; padding: 16px; display: block; min-height: 190px; position: relative; color: #fff; } .pack-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .pack-thumbs img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .pack-label { margin-top: 14px; } .pack-title { display: block; font-size: 18px; font-weight: 600; } .pack-sub { display: block; font-size: 12.5px; opacity: .85; } /* ------------------------------------------------------------- pairs */ .pair-block { margin: 34px 0 46px; } .pair-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; max-width: 760px; } .pair-item { margin: 0; } .pair-item figcaption { font-size: 12.5px; margin-top: 7px; text-align: center; } .colorways { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .colorway { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; } .colorway:hover { color: var(--accent); } .colorway .swatch { width: 20px; height: 20px; border-radius: 6px; } /* ---------------------------------------------------------- settings */ .setting-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; } .setting-row h2 { font-size: 16px; margin: 0 0 3px; font-weight: 600; } .setting-row p { margin: 0; font-size: 13.5px; max-width: 420px; } .request-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .request-form textarea { width: 100%; resize: vertical; } /* Honeypot: bots fill every field they find, people never see this one. */ .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 940px) { .preview-root { grid-template-columns: 1fr; } .preview-panel { position: static; } .preview-stage { min-height: 46vh; } } /* ========================================================================== App shell — top bar, drawer, floating tab bar, standalone mode ========================================================================== */ /* Safe-area insets matter here in a way they never do on a website: installed, there is no browser chrome between the app and the notch or the gesture bar. */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --appbar-h: 56px; --tabbar-h: 64px; } body { /* Room for the floating tab bar, plus the gesture area under it. */ padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px); overscroll-behavior-y: none; } body.no-scroll { overflow: hidden; } /* ------------------------------------------------------------- top bar */ .appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 6px; height: calc(var(--appbar-h) + var(--safe-top)); padding: var(--safe-top) 10px 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); } .appbar .wordmark { flex: 1; text-align: center; font-size: 19px; letter-spacing: .24em; } .icon-round { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: none; border: 0; cursor: pointer; } .icon-round:hover { background: var(--button); } /* -------------------------------------------------------------- drawer */ .drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .22s; } .drawer-scrim.open { opacity: 1; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; width: min(300px, 82vw); background: var(--surface); border-right: 1px solid var(--hairline); padding: calc(var(--safe-top) + 12px) 0 calc(var(--safe-bottom) + 20px); overflow-y: auto; transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.7,.3,1); } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 14px; } .drawer a, .drawer-install { display: block; width: 100%; text-align: left; padding: 12px 20px; color: var(--text-2); font-size: 15px; font-weight: 500; background: none; border: 0; font-family: inherit; cursor: pointer; } .drawer a:hover, .drawer-install:hover { background: var(--button); color: var(--text); } .drawer-install { color: var(--accent); } .drawer-sep { height: 1px; background: var(--hairline); margin: 10px 20px; } /* ------------------------------------------------------------ tab bar */ /* The floating pill from the app: centred, translucent, above the content. */ .tabbar { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 12px); width: min(420px, calc(100% - 32px)); height: var(--tabbar-h); display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--hairline); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.34); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-3); font-size: 10.5px; font-weight: 500; border-radius: 999px; } .tab svg { opacity: .75; } .tab.on { color: var(--accent); } .tab.on svg { opacity: 1; /* The soft glow under the active icon in the app's nav. */ filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 55%, transparent)); } .tab span { line-height: 1; } /* ------------------------------------------------------- offline / toast */ .offline-bar { position: sticky; top: calc(var(--appbar-h) + var(--safe-top)); z-index: 39; background: #E0A03C; color: #1b1305; font-size: 12.5px; font-weight: 600; text-align: center; padding: 6px 12px; } .toast { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%) translateY(10px); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 26px); background: var(--card); color: var(--text); border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 20px; font-size: 13.5px; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100% - 40px); text-align: center; } .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } .offline-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; color: var(--text-3); gap: 4px; } .offline-screen h1 { color: var(--text); font-size: 22px; margin: 14px 0 4px; } .offline-screen p { max-width: 320px; margin: 0 0 22px; } .offline-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* --------------------------------------------------------- navigation */ /* A brief dim while the next screen is fetched. Deliberately not a spinner: most swaps resolve from cache in a few milliseconds, and a spinner that flashes is worse than nothing at all. */ .navigating #main { opacity: .55; transition: opacity .12s ease-out; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: fade-out .16s ease both; } ::view-transition-new(root) { animation: fade-in .2s ease both; } } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } } /* ----------------------------------------------------------- explore */ .search-hero { display: flex; align-items: center; gap: 10px; background: var(--button); border: 1px solid var(--hairline); border-radius: 999px; padding: 0 18px; margin: 20px 0 8px; color: var(--text-3); } .search-hero input { flex: 1; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; padding: 14px 0; min-width: 0; } .search-hero input:focus { outline: none; } .search-hero:focus-within { border-color: var(--accent); } .mini-pack { position: relative; flex: none; width: 150px; height: 96px; border-radius: 14px; overflow: hidden; display: block; color: #fff; } .mini-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .mini-pack-label { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 14px; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .rail > .mini-pack { scroll-snap-align: start; } .chip-count { opacity: .55; font-size: 11.5px; margin-left: 5px; font-variant-numeric: tabular-nums; } .tile-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .tile-links a { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 3px; } .tile-links a:hover { border-color: var(--accent); } .tile-links strong { font-size: 15px; font-weight: 600; } .tile-links span { font-size: 12.5px; } /* ----------------------------------------------------------- profile */ .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; } .stat-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; text-align: center; } .stat-card:hover { border-color: var(--accent); } .stat-num { display: block; font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- footer trim */ /* Installed, the footer is redundant chrome — the drawer already has these links and the tab bar sits where a footer would be. */ .site-footer { margin-top: 40px; padding: 24px 0 10px; border-top: 1px solid var(--hairline); } .standalone .site-footer { display: none; } /* ------------------------------------------------------------ desktop */ @media (min-width: 900px) { /* Wider screens get the tab bar too. Keeping one layout means one thing to reason about, and an installed PWA on a desktop is still an app. */ .tabbar { width: 460px; } .wrap { padding: 0 28px; } } /* ========================================================================== App-exact UI — measured against the Flick screenshots ========================================================================== */ /* Rails sit tighter than a website's sections, and headings are heavier. */ .rail-title { font-size: 26px; font-weight: 700; margin: 30px 0 14px; letter-spacing: -.01em; } .rail-sub { margin: -10px 0 14px; color: var(--text-2); font-size: 15px; } .rail-section { margin: 0 0 6px; } .section-head { align-items: flex-start; margin-bottom: 0; } .section-head .rail-title { margin-bottom: 6px; } .more { font-size: 15px; padding-top: 34px; } /* ---------------------------------------------------------- daily pick */ .daily { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 10 / 13; margin-bottom: 10px; border: 1px solid var(--hairline); } .daily img { width: 100%; height: 100%; object-fit: cover; } .daily-shade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); } .daily-meta { position: absolute; left: 22px; right: 110px; bottom: 22px; color: #fff; } .daily-title { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .daily-cat { display: block; font-size: 17px; color: rgba(255,255,255,.82); margin-top: 2px; } .daily-dl { position: absolute; right: 20px; bottom: 20px; width: 72px; height: 72px; border-radius: 20px; background: var(--accent); color: var(--accent-deep); display: grid; place-items: center; } /* ---------------------------------------------------------------- tiles */ /* No hover overlays: this is a touch UI, and the app shows the artwork alone. */ .tile { border-radius: 20px; border: 1px solid var(--hairline); } .tile img { transition: none; } .tile:hover img { transform: none; } .tile-shade, .tile-meta, .fav { display: none; } .tile-badges { top: 10px; left: 10px; } .badge { background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.18); font-size: 11px; letter-spacing: .06em; padding: 4px 10px; } .badge.flag, .badge.premium { background: var(--accent); color: var(--accent-deep); border-color: transparent; font-weight: 700; } .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .rail { grid-auto-columns: 46%; gap: 12px; } /* ------------------------------------------------------- collection tiles */ .pack-tile { position: relative; flex: none; width: 78%; aspect-ratio: 16 / 11; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: center; color: #fff; scroll-snap-align: start; } .pack-tile-title { font-size: 24px; font-weight: 700; line-height: 1.15; } .pack-tile-sub { font-size: 15px; opacity: .9; margin-top: 6px; line-height: 1.35; } /* --------------------------------------------------------- load more */ .btn-load { background: var(--card); color: var(--text); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 46px; font-size: 17px; font-weight: 600; } .more-row { margin: 34px 0 10px; } /* ================================================== detail screen ======= */ .detail { position: relative; min-height: 100vh; min-height: 100dvh; margin: calc(-1 * (var(--appbar-h) + var(--safe-top))) 0 0; display: flex; flex-direction: column; justify-content: flex-end; } .detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .detail-top { position: absolute; top: calc(var(--safe-top) + 12px); left: 14px; right: 14px; display: flex; align-items: center; gap: 12px; z-index: 3; } .detail-top .spacer { flex: 1; } .glass-round { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(10px); border: 0; cursor: pointer; } .heart-btn.on { color: #FF5A72; } .heart-btn.on svg path { fill: #FF5A72; stroke: #FF5A72; } .collect-btn.on { color: var(--accent); } .collect-btn.on svg path { fill: var(--accent); stroke: var(--accent); } .detail-related { position: relative; z-index: 2; padding: 0 0 14px; } .related-label { margin: 0 0 10px 18px; color: #fff; font-size: 17px; font-weight: 600; text-shadow: 0 2px 10px rgba(0,0,0,.7); } .related-strip { display: flex; gap: 10px; overflow-x: auto; padding: 0 18px 4px; scrollbar-width: none; } .related-strip::-webkit-scrollbar { display: none; } .related-item { flex: none; width: 88px; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; scroll-snap-align: start; } .related-item img { width: 100%; height: 100%; object-fit: cover; } .action-bar { position: relative; z-index: 3; margin: 0 14px calc(var(--safe-bottom) + 14px); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 16px 8px; background: rgba(18,18,24,.72); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; } .action { display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; font-family: inherit; color: #fff; } .action-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--accent-deep); display: grid; place-items: center; } .action-label { font-size: 12.5px; font-weight: 500; } /* The detail screen owns the whole viewport, so the tab bar would sit on the action bar. Hidden here, as in the app. */ .detail ~ .tabbar, body:has(.detail) .tabbar { display: none; } body:has(.detail) { padding-bottom: 0; } body:has(.detail) .site-footer { display: none; } /* ================================================== bottom sheets ======= */ .sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .22s; } .sheet-scrim.open { opacity: 1; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: var(--surface); border-radius: 24px 24px 0 0; padding: 12px 22px calc(var(--safe-bottom) + 26px); transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.7,.3,1); max-height: 78vh; overflow-y: auto; } .sheet.open { transform: none; } .sheet-handle { width: 42px; height: 4px; border-radius: 2px; background: var(--text-3); margin: 0 auto 18px; } .sheet h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; } .sheet > p.muted { margin: 0 0 18px; font-size: 15px; } .sheet-rows { margin: 10px 0 0; } .sheet-rows > div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--hairline); } .sheet-rows dt { color: var(--text-2); font-size: 15px; margin: 0; } .sheet-rows dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; } .sheet-new { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 16px; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--accent); font-size: 16px; font-weight: 600; } .coll-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; } .coll-icon { width: 46px; height: 46px; border-radius: 12px; flex: none; background: var(--button); display: grid; place-items: center; color: var(--accent); } .coll-name { flex: 1; } .coll-name strong { display: block; font-size: 16px; font-weight: 600; } .coll-name span { font-size: 13px; color: var(--text-2); } .coll-check { color: var(--accent); opacity: 0; } .coll-row.on .coll-check { opacity: 1; } /* ==================================================== library =========== */ .lib-head { padding: 4px 20px 12px; } .lib-head h1 { margin: 0; font-size: 24px; font-weight: 700; text-align: center; } .lib-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; border-bottom: 1px solid var(--hairline); scrollbar-width: none; } .lib-tabs::-webkit-scrollbar { display: none; } .lib-tab { flex: none; padding: 12px 16px; font-size: 15px; font-weight: 500; color: var(--text-3); border-bottom: 2.5px solid transparent; white-space: nowrap; } .lib-tab.on { color: var(--text); border-bottom-color: var(--accent); } .coll-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 18px; } .coll-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px; display: block; } .coll-card strong { display: block; font-size: 16px; font-weight: 600; } .coll-card span { font-size: 13px; color: var(--text-2); } .fab { position: fixed; right: 18px; z-index: 45; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 26px); display: inline-flex; align-items: center; gap: 9px; padding: 15px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-deep); font-weight: 600; font-size: 15.5px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } /* ==================================================== tune screen ======= */ .preview-root { grid-template-columns: 1fr; gap: 0; } .preview-stage { position: fixed; inset: 0; z-index: 1; padding: 0; background: var(--bg); border: 0; border-radius: 0; } #preview-canvas { border-radius: 0; box-shadow: none; } .preview-top { position: fixed; top: calc(var(--safe-top) + 10px); left: 14px; right: 14px; z-index: 4; display: flex; align-items: center; gap: 12px; } .seg { flex: 1; display: flex; gap: 2px; padding: 4px; background: rgba(0,0,0,.5); backdrop-filter: blur(12px); border-radius: 999px; max-width: 320px; margin: 0 auto; } .seg button { flex: 1; padding: 11px 4px; border: 0; border-radius: 999px; cursor: pointer; background: none; color: rgba(255,255,255,.8); font-family: inherit; font-size: 15px; font-weight: 600; } .seg button.on { background: #fff; color: #111; } .preview-panel { position: fixed; left: 12px; right: 12px; z-index: 4; bottom: calc(var(--safe-bottom) + 12px); background: rgba(18,18,24,.78); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 16px; margin: 0; max-height: 62vh; overflow-y: auto; } .fit-warning { display: flex; gap: 10px; align-items: flex-start; background: rgba(224,160,60,.16); border: 1px solid rgba(224,160,60,.42); color: #fff; border-radius: 14px; padding: 13px 15px; font-size: 14.5px; line-height: 1.35; margin: 0 0 14px; } .control { margin-bottom: 14px; } .control h2 { display: none; } #ratio-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } #ratio-tabs::-webkit-scrollbar { display: none; } #ratio-tabs .pill { flex: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.65); padding: 11px 18px; font-size: 14.5px; } #ratio-tabs .pill.on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; } #tone-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; } #tone-tabs .pill { flex-direction: column; display: flex; align-items: center; gap: 5px; background: none; border-color: transparent; color: rgba(255,255,255,.55); padding: 10px 4px; font-size: 13.5px; } #tone-tabs .pill.on { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.2); color: #fff; } #tone-tabs .pill svg { opacity: .85; } .slider-row { margin-top: 10px; } .slider-row input[type=range] { accent-color: var(--accent); height: 22px; } .readout { color: rgba(255,255,255,.85); font-size: 14px; width: 52px; } .icon-btn { color: rgba(255,255,255,.7); } #compose-download { border-radius: 18px; padding: 17px; font-size: 17px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; } .preview-panel .tiny { color: rgba(255,255,255,.55); text-align: center; margin: 10px 0 0; font-size: 12.5px; } .preview-wrap .crumbs { display: none; } body:has(.preview-root) .tabbar, body:has(.preview-root) .site-footer, body:has(.preview-root) .appbar { display: none; } body:has(.preview-root) { padding-bottom: 0; } /* ==================================================== drawer ============ */ .drawer { width: min(300px, 80vw); } .drawer-head { padding: 8px 22px 18px; border-bottom: 1px solid var(--hairline); } .drawer-head .wordmark { font-size: 21px; } .drawer a { display: flex; align-items: center; gap: 18px; padding: 16px 22px; color: var(--text); font-size: 16.5px; font-weight: 500; } .drawer a svg { color: var(--accent); flex: none; } .drawer-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 90px); padding: 0 22px; } .drawer-foot p { font-size: 13.5px; margin: 12px 0 0; } .drawer-install { color: var(--accent); padding: 12px 0; font-size: 15.5px; font-weight: 600; text-align: left; } /* ==================================================== tab bar =========== */ .tabbar { grid-template-columns: repeat(4, 1fr); height: 68px; } .tab { gap: 0; } .tab svg { opacity: .55; } .tab.on svg { opacity: 1; } /* ==================================================== misc ============== */ .appbar .wordmark { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .rail { grid-auto-columns: minmax(190px, 1fr); } .pack-tile { width: 340px; } .daily { aspect-ratio: 16 / 10; } .detail { min-height: 78vh; } .action-bar { max-width: 620px; margin-inline: auto; } .preview-panel { left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); right: auto; } } /* ========================================================================== Measured off the app screenshots -------------------------------------------------------------------------- Screenshots are 717px wide for a 1080px device at DPR 3, so 360 CSS px. Everything below is taken from that, not eyeballed. ========================================================================== */ .wrap { padding: 0 18px; } /* Headings -------------------------------------------------------------- */ /* "Daily Pick" cap height measures 15 CSS px -> ~22px at Outfit's ratio. */ .rail-title { font-size: 22px; font-weight: 700; margin: 26px 0 12px; } .rail-sub { font-size: 15px; margin: -8px 0 12px; } .more { font-size: 14.5px; padding-top: 28px; } /* Daily Pick ------------------------------------------------------------ */ /* Card measures 323 x 389 -> 0.83, not the 0.77 I had guessed. */ .daily { aspect-ratio: 323 / 389; border-radius: 20px; margin-bottom: 4px; } .daily-meta { left: 18px; right: 96px; bottom: 18px; } .daily-title { font-size: 31px; } .daily-cat { font-size: 17px; } /* Measured 70 x 59 — a rounded rectangle, not the square it looks like. */ .daily-dl { right: 16px; bottom: 16px; width: 70px; height: 60px; border-radius: 19px; } /* Rails ----------------------------------------------------------------- */ /* Tiles measure 155 x 232 -> 2:3, and the gap is 13px. */ .rail { grid-auto-columns: 155px; gap: 13px; } .tile-card { aspect-ratio: 2 / 3; } .tile { border-radius: 18px; } /* Grid ------------------------------------------------------------------ */ .grid { gap: 13px; } /* NEW badge ------------------------------------------------------------- */ /* Measured 42 x 19. */ .tile-badges { top: 9px; left: 9px; } .badge { font-size: 10.5px; padding: 4px 11px; letter-spacing: .05em; } /* Collections ----------------------------------------------------------- */ .pack-tile { width: 268px; aspect-ratio: 268 / 168; border-radius: 18px; padding: 20px; } .pack-tile-title { font-size: 22px; } .pack-tile-sub { font-size: 14.5px; margin-top: 5px; } /* Tab bar --------------------------------------------------------------- */ /* Pill measures 303 wide (84% of 360) and 52 tall, 29px inset each side. */ .tabbar { width: calc(100% - 58px); max-width: 340px; height: 56px; bottom: calc(var(--safe-bottom) + 10px); } .tab svg { width: 25px; height: 25px; } /* App bar --------------------------------------------------------------- */ .appbar { padding-left: 8px; padding-right: 8px; } .appbar .wordmark { font-size: 20px; letter-spacing: .26em; } /* Section rhythm -------------------------------------------------------- */ /* ~48px between the bottom of one section and the next heading. */ .rail-section { margin: 0 0 22px; } .rail-section + .rail-section { margin-top: 4px; } @media (min-width: 700px) { .wrap { padding: 0 28px; } .rail { grid-auto-columns: 190px; } .pack-tile { width: 320px; } .daily { aspect-ratio: 16 / 9; } .tabbar { max-width: 380px; } } /* ========================================================================== Phone column -------------------------------------------------------------------------- The app is always about 390px wide, so its proportions are designed for that and only that. Letting the web build stretch to the window turns the Daily Pick card into a 566x682 slab and the grid into two 276px tiles — technically responsive, and nothing like the app. So the shell is capped and centred instead. A phone sees no difference; a tablet or desktop sees the app, centred, rather than a blown-up version of it. ========================================================================== */ :root { --app-max: 430px; } /* the app renders at 360-430 CSS px */ .wrap, .lib-head, .lib-tabs { max-width: var(--app-max); margin-left: auto; margin-right: auto; } .appbar { justify-content: center; } .appbar > * { flex: none; } .appbar .wordmark { flex: 1; max-width: calc(var(--app-max) - 200px); } /* The pill tracks the column rather than the window. */ .tabbar { width: min(calc(var(--app-max) - 60px), calc(100% - 58px)); max-width: none; } /* Fixed-position overlays follow the same column. */ .action-bar { max-width: calc(var(--app-max) - 28px); margin-inline: auto; } .preview-panel { left: 50%; right: auto; transform: translateX(-50%); width: min(calc(var(--app-max) - 24px), calc(100% - 24px)); } .preview-top { left: 50%; transform: translateX(-50%); width: min(var(--app-max), calc(100% - 28px)); } .sheet { left: 50%; transform: translateX(-50%) translateY(100%); width: min(var(--app-max), 100%); } .sheet.open { transform: translateX(-50%); } .fab { right: max(18px, calc(50% - var(--app-max) / 2 + 18px)); } .drawer { max-width: 300px; } /* Two columns, always — the app never shows three. */ .grid { grid-template-columns: repeat(2, 1fr); } /* The detail screen is the one full-bleed surface, so its image fills the window while its controls stay in the column. */ .detail { max-width: none; } .detail-related { max-width: var(--app-max); margin-inline: auto; width: 100%; } @media (min-width: 700px) { /* Overrides from the earlier desktop block that widened the column. */ .wrap { padding: 0 18px; } .rail { grid-auto-columns: 155px; } .pack-tile { width: 268px; } .daily { aspect-ratio: 323 / 389; } .grid { grid-template-columns: repeat(2, 1fr); } .detail { min-height: 100vh; min-height: 100dvh; } } /* The app bar has one icon on the left and two on the right, so a flex-centred wordmark lands 23px off. Positioned against the bar itself instead, which is the only way it sits in the true middle whatever the icons do. */ .appbar { position: sticky; } .appbar .wordmark { position: absolute; left: 50%; top: var(--safe-top); transform: translateX(-50%); height: var(--appbar-h); display: grid; place-items: center; flex: none; max-width: none; pointer-events: auto; } .appbar > .icon-round:first-of-type { margin-right: auto; } /* =========================================================================== Screens ported from the app: complete setup, motion, create, premium, welcome, diagnostics. Everything below reuses the tokens defined at the top of this file rather than introducing colours of its own, so these screens follow the theme switch like the rest of the site. =========================================================================== */ /* Section headings inside a ported screen. The app draws these as small spaced-out uppercase labels rather than as headings, and they carry the rhythm of every settings-shaped screen it has. */ .setup-label { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 10px; } .setup-hint { margin: -6px 0 12px; } .setup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; } /* A two-up segmented control, as the app's brightness toggle. */ .seg-pills { gap: 6px; } /* ------------------------------------------------------------ phone mockups */ .setup-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mock-caption { text-align: center; font-size: 12.5px; margin: 7px 0 0; } .mock { position: relative; margin: 0; aspect-ratio: 1 / 2; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hairline); } .mock img { width: 100%; height: 100%; object-fit: cover; } .mock > span { position: absolute; color: rgba(255,255,255,.92); } .mock-status { top: 2.5%; left: 5%; right: 5%; display: flex; justify-content: space-between; font-size: 8px; font-weight: 600; } /* Stands in for the big lock/home clock. A bar, not glyphs: the question these mockups answer is where the clock sits relative to the subject, and drawing a real time would invite comparison with a launcher this is not imitating. */ .mock-clock { left: 22%; right: 22%; top: 15%; height: 11%; border-radius: 6px; background: currentColor; opacity: .8; } .mock-clock.small { left: 30%; right: 30%; top: 11%; height: 7%; } .mock-date { left: 30%; right: 30%; top: 28%; height: 2%; border-radius: 2px; background: currentColor; opacity: .6; } .mock-notif { left: 8%; right: 8%; height: 8%; border-radius: 7px; background: rgba(255,255,255,.22); } /* Sibling-relative, not :nth-of-type — every child of .mock is a span, so nth-of-type counts the status bar and clock too and lands on the wrong ones. */ .mock-notif { top: 62%; } .mock-notif + .mock-notif { top: 72%; } .mock-icons { left: 8%; right: 8%; top: 28%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7% 6%; } .mock-icons i { aspect-ratio: 1; border-radius: 28%; background: rgba(255,255,255,.26); } .mock-dock { left: 6%; right: 6%; bottom: 3%; height: 11%; border-radius: 14px; background: rgba(255,255,255,.26); } /* The widget preview, painted by setup.js in the derived colours. */ .mock-widget { left: 11%; right: 11%; top: 52%; display: flex; align-items: center; gap: 6%; padding: 6% 7%; border-radius: 14px; background: var(--card); } .mock-widget-icon { width: 22%; aspect-ratio: 1; border-radius: 26%; flex: none; background: var(--accent); } .mock-widget-lines { flex: 1; display: grid; gap: 5px; } .mock-widget-lines b { display: block; height: 5px; border-radius: 3px; background: currentColor; } .mock-widget-lines b.short { width: 42%; opacity: .55; } /* ----------------------------------------------------------------- palette */ .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .swatch-tile { display: block; width: 100%; text-align: left; cursor: pointer; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--hairline); color: inherit; font: inherit; } .swatch-tile:hover { border-color: var(--accent); } .swatch-chip { display: block; height: 34px; border-radius: 8px; border: 1px solid var(--hairline); } .swatch-name { display: block; margin-top: 7px; font-size: 11px; font-weight: 600; } .swatch-hex { display: block; font-size: 10px; letter-spacing: .04em; color: var(--text-3); } .tint-row { display: flex; gap: 12px; } .tint { display: flex; flex-direction: column; align-items: center; gap: 6px; } .tint-chip { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; } .tint-name { font-size: 11px; color: var(--text-3); } .steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 14px; } .steps li { font-size: 14px; } .steps strong { display: block; font-weight: 600; margin-bottom: 2px; } .steps span { display: block; font-size: 13.5px; line-height: 1.5; } /* ------------------------------------------------------------------ motion */ .motion-stage { position: relative; overflow: hidden; aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--hairline); width: 100%; max-width: 340px; } .motion-stage img { width: 100%; height: 100%; object-fit: cover; /* Overscanned so the parallax shift never exposes an edge. */ transform: scale(1.06); transition: transform .18s ease-out; } #motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .motion-options { display: grid; gap: 8px; } .opt { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; padding: 13px 15px; border-radius: 14px; background: var(--card); border: 1px solid var(--hairline); color: var(--text); } .opt:hover { border-color: var(--accent); } .opt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-deep); } .opt.on .muted { color: var(--accent-deep); opacity: .8; } .opt strong { display: block; font-size: 15px; font-weight: 600; } .opt span { display: block; font-size: 12.5px; margin-top: 2px; } /* A switch, matching the app's SwitchListTile. */ .switch { width: 50px; height: 30px; border-radius: 999px; flex: none; cursor: pointer; background: var(--button); border: 1px solid var(--hairline); padding: 3px; display: flex; justify-content: flex-start; transition: background .16s; } .switch.on { background: var(--accent); border-color: var(--accent); justify-content: flex-end; } .switch span { width: 22px; height: 22px; border-radius: 50%; background: var(--text-2); transition: background .16s; } .switch.on span { background: var(--accent-deep); } /* ------------------------------------------------------------------ create */ .ai-prompt { width: 100%; resize: vertical; padding: 14px 15px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border-radius: var(--radius); border: 1px solid var(--hairline); } .ai-prompt:focus { outline: none; border-color: var(--accent); } .ai-counter { text-align: right; margin: 6px 2px 0; } .ai-colors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .dot-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid var(--hairline); } .dot-swatch.on { border: 2.5px solid var(--accent); } .ai-assembled { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .ai-assembled code { flex: 1; font-size: 13px; line-height: 1.55; color: var(--text-2); word-break: break-word; } .ai-assembled .btn { flex: none; } .ai-gate { margin-top: 22px; } .ai-gate .btn { margin-top: 10px; margin-right: 8px; } .prompt-row { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--hairline); color: var(--text); } .prompt-row:hover { border-color: var(--accent); } .prompt-row strong { display: block; font-size: 14px; font-weight: 500; } .prompt-row span { display: block; font-size: 12px; margin-top: 3px; } .disclosure { margin-top: 26px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline); color: var(--text-3); font-size: 12px; line-height: 1.5; } /* ----------------------------------------------------------------- premium */ .reason-banner { display: flex; gap: 10px; align-items: center; margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--accent); color: var(--accent-deep); font-size: 13.5px; } .benefit { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; } .benefit-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-deep); } .benefit-text strong { display: block; font-size: 15px; font-weight: 600; } .benefit-text span { display: block; font-size: 13px; margin-top: 2px; } .plan-list { display: grid; gap: 12px; margin: 24px 0; } .plan { padding: 15px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--hairline); } .plan.best { border-color: var(--accent); border-width: 2px; } .plan-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; } .plan span.muted { display: block; font-size: 12px; margin-top: 2px; } /* --------------------------------------------------------------- interests */ .interests-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 10px; } /* ------------------------------------------------------------- diagnostics */ .diag { margin: 0 0 10px; } .diag-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hairline); } .diag-row dt { margin: 0; font-size: 14px; color: var(--text-2); } .diag-row dd { margin: 0; font-size: 13.5px; font-weight: 500; text-align: right; word-break: break-word; max-width: 62%; } .diag-row.good dd { color: #4FB06A; } .diag-row.bad dd { color: #FF6B8A; } .diag-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .diag-links li { display: grid; gap: 2px; font-size: 12.5px; } .diag-links a { color: var(--accent); word-break: break-all; } /* ------------------------------------------------------- pairs rail (home) */ .pair-card { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 18px; border: 1px solid var(--hairline); } .pair-card img { width: 100%; height: 100%; object-fit: cover; } .pair-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), transparent 52%); } .pair-card-meta { position: absolute; left: 12px; right: 12px; bottom: 11px; color: #fff; } .pair-card-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; } .pair-card-sub { display: block; font-size: 12px; color: rgba(255,255,255,.75); } .rail > .pair-card { scroll-snap-align: start; } /* ---------------------------------------------------------------- narrower */ @media (max-width: 420px) { .setup-preview { gap: 10px; } .tint-row { gap: 9px; } .ai-assembled { flex-direction: column; } .ai-assembled .btn { width: 100%; } } /* ---------------------------------------------------------- profile rows */ /* The app draws these as ListTiles: an accent glyph, a label, a chevron. A `.flat` row is one that does not lead anywhere — a stated fact, or a feature the browser cannot offer — so it loses the chevron and the hover. */ .prof-list { display: grid; } .prof-row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--hairline); color: var(--text); } .prof-row:last-child { border-bottom: 0; } .prof-row:not(.flat):hover { color: var(--accent); } .prof-icon { color: var(--accent); flex: none; display: grid; place-items: center; } .prof-row.flat .prof-icon { color: var(--text-3); } .prof-label { flex: 1; font-size: 15px; } .prof-label .muted { display: block; font-size: 12.5px; margin-top: 2px; } .prof-trailing { font-size: 13.5px; flex: none; } .prof-chevron { color: var(--text-3); flex: none; display: grid; place-items: center; } /* Setup link under a pair. */ .pair-setup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; } .pair-setup .tiny { margin: 0; max-width: 320px; } /* --------------------------------------------------------------------------- Ads --------------------------------------------------------------------------- Reserved height on every unit. AdSense injects an iframe after first paint, and without a min-height the page jumps as each one fills — which is a Cumulative Layout Shift hit on exactly the pages that carry the most ads. The reserved box also means an unfilled or blocked slot looks like nothing rather than like a broken image. */ .ad { display: block; margin: 20px 0; min-height: 100px; overflow: hidden; } .ad .adsbygoogle { display: block; width: 100%; } /* Google requires ads to be distinguishable from content. On a page that is otherwise a wall of images that is not automatic, so it is labelled. */ .ad-label { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* In-feed unit: sits in the grid's flow as if it were a tile, so the masonry closes around it instead of leaving a hole. */ .ad-tile { margin: 0; padding: 10px; border-radius: 16px; background: var(--card); min-height: 180px; } /* Optional sticky footer unit. Clears the floating pill nav — an ad sitting under the tab bar is an accidental-click complaint waiting to happen, and accidental clicks are what invalid-traffic strikes are made of. */ .ad-anchor { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 20px 0 0; min-height: 60px; } /* ------------------------------------------------------------------ welcome */ /* The first-run screen. Two panels above 900px, one column below it — the art is the half that goes, because on a phone the choice is the whole screen and a decorative collage above it would push the buttons under the fold. */ /* Bare pages draw no tab bar, so the room reserved for it is room the screen should have — the same trade .detail and .preview-root already make. */ body:has(main.bare) { padding-bottom: 0; } main.bare { min-height: 100vh; min-height: 100dvh; display: flex; } main.bare .wel { flex: 1; } .wel { display: grid; grid-template-columns: 1fr; } .wel-art { display: none; position: relative; overflow: hidden; background: var(--card); } /* Nine tiles on a 3x3, rotated a few degrees and scaled past the edges so the grid reads as a wall of wallpapers rather than as nine cropped rectangles with a visible border around them. */ .wel-mosaic { position: absolute; inset: -14%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; transform: rotate(-4deg) scale(1.12); } .wel-cell { position: relative; overflow: hidden; border-radius: 16px; } .wel-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .wel-art-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,10,.94) 8%, rgba(6,6,10,.28) 62%); } .wel-art-copy { position: absolute; left: 38px; right: 38px; bottom: 40px; color: #fff; } .wel-kicker { margin: 0 0 18px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); } .wel-art-copy h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; } .wel-art-sub { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); } .wel-panel { display: flex; flex-direction: column; padding: 18px 20px 22px; min-height: 100vh; min-height: 100dvh; } .wel-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .wel-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } .wel-guest { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); } .wel-guest:hover { color: var(--accent); } /* The middle block is centred in what is left after the top and foot rows, so the panel stays balanced whatever the window height. */ .wel-panel-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 360px; width: 100%; margin: 0 auto; padding: 32px 0; } .wel-mark { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: linear-gradient(140deg, var(--accent), #E3A9FF); color: var(--accent-deep); box-shadow: 0 14px 38px color-mix(in srgb, var(--accent) 34%, transparent); } .wel-over { margin: 26px 0 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .wel-panel-mid h1 { margin: 0; font-size: clamp(26px, 6vw, 31px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; } .wel-panel-mid h1 em { font-style: normal; color: var(--accent); } .wel-sub { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); } /* White, because the Google mark is only allowed on its own button and this is the one control on the page that has to look like somebody else's. */ .wel-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 28px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff; color: #1f1f22; font-size: 14.5px; font-weight: 600; } .wel-google:hover { background: #f1f1f3; } .wel-google svg { flex: none; } .wel-skip { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--text-2); } .wel-skip:hover { color: var(--accent); } .wel-note { margin: 24px 0 0; padding: 13px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); font-size: 11.5px; line-height: 1.6; color: var(--text-3); text-align: left; } .wel-legal { margin: 20px 0 0; font-size: 11px; color: var(--text-3); } .wel-legal a { color: var(--text-2); text-decoration: underline; } .wel-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--text-3); } .wel-panel-foot a { color: var(--text-3); } .wel-panel-foot a:hover { color: var(--accent); } @media (min-width: 900px) { .wel { grid-template-columns: 1fr 1fr; } .wel-art { display: block; } .wel-panel { padding: 26px 34px 28px; } .wel-panel-mid { max-width: 380px; } } @media (min-width: 1280px) { .wel { grid-template-columns: 1.05fr 1fr; } .wel-panel { padding: 30px 56px 32px; } } /* ------------------------------------------------------------------- studio */ /* The three tool cards. A link either way — with a wallpaper chosen each one opens that tool for it, without one each selects the tool for the grid — so they get the hover the rest of .tile-links has, plus a lit state for the selected tool. */ .tool-card .muted { font-size: 12.5px; line-height: 1.45; } .tool-card.on { border-color: color-mix(in srgb, var(--accent) 52%, transparent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); } .tool-card.on strong { color: var(--accent); } /* The chosen wallpaper, shown instead of the grid so the page says which one the three cards above are about. */ .studio-subject { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; } .studio-subject > .tile { width: 132px; flex: none; aspect-ratio: 2 / 3; } .studio-subject-text { display: grid; gap: 4px; min-width: 0; } .studio-subject-text strong { font-size: 17px; font-weight: 600; } .studio-subject-text .muted { font-size: 13px; } .studio-subject-text .more { margin-top: 6px; font-size: 13px; }