/* Quipflip — front-end styles. Plain CSS, served statically (no build step). */ :root { /* Per-setup color is injected as --bg on ; this is the fallback. */ --bg: #6c4ab6; --accent: #ffffff; --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.78); --card: rgba(255, 255, 255, 0.14); --card-strong: rgba(255, 255, 255, 0.22); --radius: 18px; --maxw: 620px; font-synthesis: none; } /* Light-background override — set by PHP via data-theme="light" on . */ [data-theme="light"] { --ink: #111111; --ink-dim: rgba(0, 0, 0, 0.55); --card: rgba(0, 0, 0, 0.09); --card-strong: rgba(0, 0, 0, 0.15); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100%; transition: background 0.4s ease; } /* ---- Layout shell ---- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .logo { font-weight: 800; font-size: 22px; letter-spacing: 1.5px; color: var(--ink); text-decoration: none; display: flex; align-items: center; } .logo img { display: block; height: 26px; width: auto; } .user-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: none; color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1; } .user-btn svg { width: 22px; height: 22px; } .site-header form { margin: 0; } .badge-dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #e0554f; border: 2px solid var(--bg); } /* ---- Main ---- */ main { flex: 1 0 auto; width: 100%; padding: 8px 0 48px; } .eyebrow { letter-spacing: 0.2px; font-size: 13px; font-weight: 700; color: var(--ink-dim); margin: 12px 0 10px; } .setup { font-size: clamp(34px, 9vw, 56px); line-height: 1.08; font-weight: 800; margin: 0 0 28px; letter-spacing: -0.5px; } /* Setup shown above a list of quips (the /q/{date} view page), where the prompt is context for browsing rather than the hero. Smaller than the home/quip-page treatment so a quip card is reachable sooner, on phones especially. */ .setup-compact { font-size: clamp(23px, 5vw, 30px); margin-bottom: 20px; } /* ---- Quip box (home / setup page) ---- */ .quip { display: block; width: 100%; min-height: 140px; resize: vertical; padding: 16px; border-radius: var(--radius); border: none; background: var(--card); color: var(--ink); font: inherit; font-size: 17px; } .quip::placeholder { color: var(--ink-dim); } .quip:focus { outline: 3px solid var(--card-strong); background: var(--card-strong); } /* Compact one-line box for the /q/{date}/view page: starts a single row so the Flip / View switch, the Respond button and the first quips all stay in view on a phone, and grows on focus for writing room. */ .quip-form-compact .quip { min-height: 0; height: 52px; padding: 13px 16px; resize: none; transition: height 0.15s ease; } .quip-form-compact .quip:focus, .quip-form-compact .quip:not(:placeholder-shown) { height: 128px; } @media (prefers-reduced-motion: reduce) { .quip-form-compact .quip { transition: none; } } .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } .actions .btn-primary:only-child { margin-left: auto; } .btn-primary { display: inline-flex; align-items: center; gap: 6px; appearance: none; border: none; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 16px; padding: 14px 22px; border-radius: 999px; cursor: pointer; text-decoration: none; } .link { color: var(--ink); font-weight: 600; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink-dim); text-decoration-thickness: 2px; text-underline-offset: 2px; } .link:hover { text-decoration-color: var(--ink); } /* The date inside an .eyebrow, linked to its /q/{date} page without the underline the regular .link treatment carries. */ .eyebrow-link { color: inherit; text-decoration: none; } .eyebrow-link:hover { color: var(--ink); } /* Closing "add your quip" line at the end of a quip thread. */ .quip-cta { margin: 28px 0 0; color: var(--ink-dim); font-weight: 600; } .quip-cta .link { margin-left: 4px; } /* Browse block on the left of the home quip form's action row: a "Quips" label next to a Flip / View segmented pair. Echoes the setup page's .control pills so the two read as the same kind of control. */ .quip-jump { display: inline-flex; align-items: center; gap: 10px; } .quip-jump-label { font-weight: 700; color: var(--ink-dim); } .quip-jump-track { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px; } /* The two segments butt together inside the track; only the outer edge of the pair is rounded, so an active or hovered half never shows a rounded corner against its neighbour. */ .quip-jump-link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 0; font-weight: 600; color: var(--ink); text-decoration: none; } .quip-jump-link:first-child { border-radius: 999px 0 0 999px; } .quip-jump-link:last-child { border-radius: 0 999px 999px 0; } .quip-jump-link:hover { background: var(--card-strong); } .quip-jump-link[aria-current="true"] { background: var(--ink); color: var(--bg); } .empty { color: var(--ink-dim); font-size: 17px; line-height: 1.5; } /* ---- Share page ---- */ .share-heading { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; font-weight: 800; margin: 20px 0 20px; letter-spacing: -0.4px; } .share-card { background: var(--card); border-radius: var(--radius); padding: 18px 20px 20px; } .share-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-dim); margin: 0 0 8px; } .share-block-heading { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.2px; margin: 0 0 14px; } .share-draft { background: var(--card-strong); } .share-counter { margin: 8px 0 16px; font-size: 13px; font-weight: 600; color: var(--ink-dim); } .share-counter.is-over { color: #e0554f; } .share-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .share-actions-row-nowrap { flex-wrap: nowrap; } .share-actions-row + .share-actions-row { margin-top: 10px; } .share-actions-row .btn-primary { padding: 10px 18px; font-size: 14px; white-space: nowrap; } .share-actions-row .btn-primary svg { width: 16px; height: 16px; } .share-actions-label { font-size: 13px; font-weight: 600; color: var(--ink-dim); } /* Image share: shape picker, live preview, and the link out to the screenshot page. */ .share-image-card { margin-bottom: 16px; } .share-ratio-group { display: flex; gap: 8px; } .share-ratio-btn { flex: 1; padding: 9px 12px; border: none; border-radius: 10px; background: var(--card-strong); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .share-ratio-btn.is-active { background: var(--ink); color: var(--bg); } /* Post-submit panel on the quip page. */ .share-just-posted { margin-top: 28px; } .share-back-note { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); } .share-back-note .mark { flex-shrink: 0; display: inline-flex; } .share-back-note svg { width: 16px; height: 16px; } .share-sec-head { font-size: 16px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; } .share-sec-sub { font-size: 13px; font-weight: 600; color: var(--ink-dim); } .share-open-centered { margin-left: auto; margin-right: auto; } .share-just-posted .share-preview { position: relative; } .share-ratio-overlay { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 6px 8px; border: none; border-radius: 8px; background: var(--ink); color: var(--bg); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .share-ratio-overlay:focus { outline: 2px solid var(--bg); outline-offset: 1px; } .share-preview { margin: 14px auto 0; width: 100%; max-width: 300px; aspect-ratio: 1 / 1; background: var(--card-strong); border: 1px solid var(--card-strong); border-radius: 12px; overflow: hidden; } .share-preview-portrait { max-width: 240px; aspect-ratio: 9 / 16; } .share-preview-landscape { max-width: 100%; aspect-ratio: 16 / 9; } .share-preview-frame { display: block; width: 100%; height: 100%; border: 0; } .share-open-full { margin-top: 10px; display: flex; width: fit-content; align-items: center; gap: 8px; } .share-open-full svg { width: 16px; height: 16px; } .share-copy-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .share-copy-row .share-open-full { margin-top: 0; } .share-hint { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-dim); } .meta-note { color: var(--ink-dim); font-size: 14px; font-weight: 600; margin: 0 0 14px; } .theme-callout { font-size: 20px; margin: 0 0 16px; } /* sort + scope controls */ .controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .control { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; } .control[aria-current="true"] { background: var(--ink); color: var(--bg); } a.control { text-decoration: none; } /* Quip list heading row: "Quips" and the Flip / View switch on the left, the collapsed sort/scope filter chip on the right. The chip opens a small panel holding both option groups. */ .quip-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 14px; } .quip-list-head .section-title { margin: 0; } .quip-list-head-main { display: flex; align-items: center; gap: 12px; } /* The switch already sits under the "Quips" heading here, so drop its own label. */ .quip-list-head .quip-jump-label { display: none; } .filter { position: relative; } .filter-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; } .filter.is-filtered .filter-toggle, .filter-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); } .filter-toggle svg { width: 14px; height: 14px; } /* Heading row above a quip's builds: "N Yes, ands" and the "Add yours" pill sit together on the left, not spread to opposite ends. */ .thread-yesand-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; } .thread-yesand-head .section-title { margin: 0; } /* "Add yours" pill next to the Yes, and heading on a quip's thread page. Opens the same inline reply form the arrow on the quip card above controls, via a scoped Livewire event rather than a second form. */ .add-yours-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; flex: none; } .add-yours-pill:hover { background: var(--card-strong); } .add-yours-pill .mark { line-height: 1; display: inline-flex; } .add-yours-pill .mark svg { width: 16px; height: 16px; } .filter-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; padding: 16px; border-radius: var(--radius); background: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .filter-group-label { font-size: 12px; font-weight: 700; color: var(--ink-dim); margin: 0 0 8px; } .filter-options { display: flex; flex-wrap: wrap; gap: 8px; } .filter-options + .filter-group-label { margin-top: 14px; } /* ---- Profile / feed ---- */ .profile-header .eyebrow { margin: 0 0 4px; } .profile-header .setup { margin: 0; } .profile-header .meta-note { margin: 8px 0 0; } .profile-header + .section-title { margin-top: 20px; } .profile-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .profile-actions form { margin: 0; } .section-title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 36px 0 14px; } .profile-q-row { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; } /* small setup-color dot beside the setup link (matches the archive dot) */ .q-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--q); margin-top: 7px; } .profile-q { display: block; font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.3px; color: var(--ink); text-decoration: none; } .profile-q:hover { text-decoration: underline; } .follow-btn.is-following { background: var(--card-strong); color: var(--ink); } [x-cloak] { display: none !important; } .confirm-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.45); } .confirm-overlay[hidden] { display: none; } .confirm-card { width: 100%; max-width: 340px; background: var(--bg); color: var(--ink); border-radius: var(--radius); padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .confirm-card p { margin: 0 0 20px; font-size: 16px; font-weight: 700; } .confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; } .confirm-actions .btn-primary { padding: 10px 18px; font-size: 14px; } /* palette swatch picker (settings page) */ .color-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; max-width: 440px; margin: 12px 0 16px; } .color-swatch { appearance: none; border: none; padding: 0; width: 100%; aspect-ratio: 1; border-radius: 10px; cursor: pointer; position: relative; transition: transform 0.1s ease, box-shadow 0.15s ease; box-shadow: 0 0 0 2px transparent; } .color-swatch:hover { transform: scale(1.08); } .color-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--bg); transform: scale(1.08); } /* owner edit/delete controls under a quip */ .quip-card-controls { display: flex; gap: 14px; margin-top: 10px; } .control-link { background: none; border: none; padding: 0; color: var(--ink-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .control-link:hover { color: var(--ink); text-decoration: underline; } .quip-card-edit { margin-top: 4px; } .quip-card-edit .quip { min-height: 80px; font-size: 15px; } .quip-card-edit-build { border-top: 1px solid var(--card); padding-top: 16px; } .quip-card-edit-heading { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; } .quip-card-controls-end { justify-content: flex-end; } /* starred state for the mark */ .star.is-starred { color: var(--ink); } .star.is-starred .count { opacity: 1; } .quip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .quip-card { background: var(--card); border-radius: var(--radius); padding: 16px; } .quip-card-body { min-width: 0; } /* A build ("Yes, and") reply, shown after its original quip card. */ .quip-card.is-indented { margin-left: 24px; } /* Connects an original quip card to the build that follows it, when the build isn't a direct reply (i.e. there are steps in between). */ .quip-card-depth-note { margin-left: 24px; padding-left: 12px; border-left: 3px solid var(--card-strong); color: var(--ink-dim); font-size: 13px; font-weight: 600; } .quip-card-depth-note a { color: var(--ink-dim); text-decoration: none; } .quip-card-depth-note a:hover { color: var(--ink); } .quip-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .quip-card-meta { display: flex; align-items: center; gap: 8px; } .author { font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; cursor: pointer; } .author:hover { text-decoration: underline; } .timestamp { color: var(--ink-dim); font-size: 13px; } .quip-card-text { margin: 0; font-size: 17px; line-height: 1.5; white-space: pre-wrap; } /* Star and "Yes, and" share one grammar: icon, then count, no border, plain hover pill — kept visually identical so the two actions read as siblings. */ .quip-card-actions { flex: none; display: flex; align-items: center; gap: 4px; } .star { flex: none; display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 12px; } .star:hover { background: var(--card-strong); } .star .mark { line-height: 1; display: inline-flex; } .star .mark svg { width: 20px; height: 20px; } .star .count { font-size: 13px; font-weight: 700; } /* The arrow (opens the reply form) and the count (links to the thread page) are separate controls, but sit flush together so their hover states read as two halves of one pill: each rounds only its outer edge. */ .yes-and-group { flex: none; display: flex; align-items: center; } .yes-and-trigger { flex: none; display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 12px; } .yes-and-trigger.has-count { border-radius: 12px 0 0 12px; } .yes-and-trigger:hover, .yes-and-trigger.is-active { background: var(--card-strong); } .yes-and-glyph { line-height: 1; display: inline-flex; } .yes-and-glyph svg { width: 20px; height: 20px; } /* The build count next to the arrow: a separate link to the quip's thread page, so browsing existing yes, ands doesn't require opening the reply form the arrow controls. */ .yes-and-count { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 2px 6px; border-radius: 0 12px 12px 0; } .yes-and-count:hover { background: var(--card-strong); text-decoration: underline; } .share-trigger { flex: none; display: flex; align-items: center; background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 12px; text-decoration: none; } .share-trigger:hover { background: var(--card-strong); } .share-trigger .mark { line-height: 1; display: inline-flex; } .share-trigger .mark svg { width: 19px; height: 19px; } /* Owner-only block under a quip: who has starred it. */ .starred-by { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-strong); color: var(--ink-dim); } .starred-by .mark { flex: none; line-height: 1; display: inline-flex; margin-top: 2px; } .starred-by .mark svg { width: 15px; height: 15px; } .starred-by-text { margin: 0; font-size: 13px; line-height: 1.5; } .starred-by-text a { color: var(--ink-dim); font-weight: 600; text-decoration: none; } .starred-by-text a:hover { color: var(--ink); text-decoration: underline; } /* ---- Archive ---- */ /* Row above the archive list: on the archive, the nav pills ("Theme list", "Newsletter archive") sit as a group at the right, with the active theme filter (when set) to their left. On the themes page it just carries the back link. */ .archive-nav { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 14px; font-weight: 600; color: var(--ink-dim); } .archive-nav .control { margin-left: auto; } /* Only the first pill takes the auto margin; the rest ride along beside it so the group stays glued to the right edge instead of each pill claiming its own share of the free space. */ .archive-nav .control ~ .control { margin-left: 0; } .archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* One archived issue: a back link, then (for anyone not on the list) a signup prompt, above the frozen issue body. Neutral class names so content blockers that hide anything matching newsletter/subscribe/signup leave it alone. */ .issue-back { margin: 0 0 16px; font-size: 14px; font-weight: 600; } .issue-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 20px; } @media (min-width: 640px) { .issue-cta { flex-direction: row; align-items: center; gap: 12px; } } /* Same flat translucent surface as the quip cards; the setup color (--q, set inline per card) appears only as a small dot in the meta row. */ .archive-card { display: block; background: var(--card); border-radius: var(--radius); padding: 16px 20px; text-decoration: none; color: var(--ink); transition: background 0.15s ease; } .archive-card:hover { background: var(--card-strong); } .archive-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-dim); } .archive-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--q); } .archive-card .archive-q { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -0.3px; color: var(--ink); } /* ---- Followers / following list ---- */ .stat-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink-dim); } .stat-link:hover { border-bottom-color: var(--ink); } .back-link { color: var(--ink-dim); text-decoration: none; font-weight: 600; } .back-link:hover { color: var(--ink); } .user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .user-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--card); } .user-row:last-child { border-bottom: none; } .user-row-name { font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; } .user-row-name:hover { text-decoration: underline; } .user-row-meta { color: var(--ink-dim); font-size: 13px; } .notification-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .notification-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--card); } .notification-row:last-child { border-bottom: none; } .notification-row a { color: var(--ink); font-weight: 700; } .notification-time { width: 100%; color: var(--ink-dim); font-size: 13px; } .actions-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; color: var(--ink-dim); font-size: 13px; } .actions-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; } .actions-legend .mark { display: inline-flex; align-items: center; line-height: 1; } .actions-legend .mark svg { width: 14px; height: 14px; } /* pagination (Laravel default markup, restyled minimally) */ .pagination-wrap { margin-top: 22px; } .pagination-wrap nav { display: flex; gap: 8px; flex-wrap: wrap; } .pagination-wrap a, .pagination-wrap span { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; } /* ---- Footer ---- */ .site-footer { flex-shrink: 0; border-top: 1px solid var(--card); padding: 16px 0 28px; } /* Mobile-first: the footer link row wraps, with the legal links dropping to their own second row. The single-row layout is restored at 640px below. */ .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; } /* Even vertical rhythm between the stacked footer rows, matching the row-gap used when links wrap within a row. */ .site-footer .wrap + .wrap { margin-top: 12px; } /* The newsletter block carries its own divider spacing below it. */ .footer-daily + .wrap { margin-top: 0; } /* Newsletter prompt. On mobile it's a plain underlined link plus a short one-line blurb; from 640px up it becomes the filled-button block. */ .footer-daily { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--card); } .footer-daily-text { margin: 0; min-width: 0; color: var(--ink-dim); font-size: 13px; font-weight: 600; } .footer-daily-text-full { display: none; } .footer-daily-btn { color: var(--ink) !important; font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ink-dim); padding-bottom: 1px; } .footer-daily-btn:hover { border-bottom-color: var(--ink); } .site-footer a { color: var(--ink-dim); text-decoration: none; font-size: 13px; font-weight: 600; } .site-footer a:hover { color: var(--ink); } .footer-legal { display: flex; gap: 16px; align-items: center; flex-basis: 100%; } .footer-signout { margin: 0; } .site-footer button { background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-dim); font-size: 13px; font-weight: 600; font-family: inherit; } .site-footer button:hover { color: var(--ink); } /* Social and network links each get their own row under the nav/legal links; vertical spacing is handled by `.wrap + .wrap` above. */ .footer-row-label { color: var(--ink); font-size: 13px; font-weight: 700; } @media (min-width: 640px) { .site-header .wrap { height: 72px; } .logo { font-size: 26px; } .logo img { height: 30px; } .site-footer .wrap { flex-wrap: nowrap; } .footer-daily { flex-direction: row; align-items: flex-start; gap: 12px; padding-bottom: 20px; margin-bottom: 16px; } .footer-daily-text { flex: 1; } .footer-daily-text-full { display: inline; } .footer-daily-text-short { display: none; } .footer-daily-btn { flex-shrink: 0; display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--ink); color: var(--bg) !important; border-bottom: none; } .footer-daily-btn:hover { opacity: 0.9; } .footer-legal { flex-basis: auto; margin-left: auto; } } /* ---- Auth / form kit (utility zone) ---- */ .auth-main { display: flex; flex: 1 0 auto; align-items: center; padding: 32px 0 56px; } .auth-card { width: 100%; max-width: 400px; margin: 0 auto; } .auth-card h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.5px; } .auth-card .sub { color: var(--ink-dim); margin: 0 0 24px; font-size: 15px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border-radius: 12px; border: none; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; } .field textarea { resize: vertical; min-height: 120px; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); } .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--card-strong); background: var(--card-strong); } .field input:read-only { color: var(--ink-dim); } .field input:read-only:focus { outline: none; background: var(--card); } .field .hint { color: var(--ink-dim); font-size: 12px; margin-top: 5px; } /* Honeypot: kept in the layout flow (unlike display:none) so basic bots that skip hidden fields still fill it in, but invisible and unreachable by keyboard/screen reader for real users. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-error { background: rgba(0, 0, 0, 0.22); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .form-error ul { margin: 0; padding-left: 18px; } .status-msg { background: rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; } .settings-form { max-width: 440px; margin-bottom: 36px; } .toggle-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--card); cursor: pointer; } .toggle-row:last-child { border-bottom: none; } .toggle-row input { width: 18px; height: 18px; } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-dim); font-size: 13px; margin: 20px 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--card-strong); } .passkey-list { list-style: none; margin: 0 0 16px; padding: 0; max-width: 440px; } .passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--card); border-radius: 12px; margin-bottom: 8px; } .passkey-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .passkey-name { font-weight: 700; } .passkey-sub { color: var(--ink-dim); font-size: 12px; } .passkey-add { margin-top: 4px; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 16px; line-height: 1.5; color: var(--ink); } .checkbox-row input { width: 18px; height: 18px; flex: none; margin-top: 2px; } .checkbox-row .hint { color: var(--ink-dim); } .checkbox-row[hidden] { display: none; } .btn-block { display: block; width: 100%; text-align: center; margin-top: 6px; } .auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 14px; flex-wrap: wrap; } .auth-links a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--ink-dim); padding-bottom: 1px; } .auth-links a:hover { border-bottom-color: var(--ink); } /* ---- Legal pages (terms, privacy) ---- */ .legal { max-width: 720px; } .legal .setup { font-size: clamp(28px, 6vw, 40px); margin-bottom: 4px; } .legal h2 { font-size: 20px; margin: 32px 0 10px; letter-spacing: -0.2px; } .legal h3 { font-size: 16px; margin: 20px 0 8px; } .legal p { line-height: 1.6; margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; } .legal li { margin-bottom: 6px; } .legal .link { text-decoration-thickness: 1px; } .legal-note { margin-top: 12px; } /* ---- Reroll deck (/q/{date}/flip, and the /deck-preview sandbox) ---- */ /* One column on a phone, two from the site's own 640px breakpoint, so six cards read as three rows of two. Deliberately no third column: a wider card gives the quip fewer, longer lines to wrap around the flip icon. */ .deckwrap { margin-bottom: 20px; } .deck { display: grid; grid-template-columns: 1fr; gap: 12px; perspective: 1600px; } .deck-actions { display: flex; justify-content: center; margin-top: 18px; } /* The legend explains the card icons, so it sits under the grid rather than under the button that follows it. */ .deckwrap .actions-legend { margin-top: 16px; } .deck-actions .btn-primary { display: inline-flex; align-items: center; gap: 8px; } .deck-actions svg { width: 17px; height: 17px; } @media (min-width: 640px) { .deck { grid-template-columns: repeat(2, 1fr); } } /* Both faces share one grid cell, so a card is as tall as its taller face and the grid row is as tall as its tallest card. */ .deckcard { display: grid; transform-style: preserve-3d; transition: transform var(--flip-speed, 550ms) cubic-bezier(0.2, 0.7, 0.3, 1); } /* Not a click target. The face is a plain panel; the corner controls inside it are the only interactive things on the card. */ .deckface { grid-area: 1 / 1; position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 132px; } /* The quip content and the end marker are swapped by x-if, so each is the lone child of the face and has to carry the column layout itself. */ .deckface-in { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } /* Shown once every quip for the setup has been dealt. The flip control sits in the corner like the others; the message and the write-one button center in what is left. */ .deck-end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; } .deck-end .deck-flip { position: absolute; top: 14px; right: 14px; float: none; margin: 0; } .deck-end-text { margin: 0; font-size: 15px; color: var(--ink-dim); } .deck-end-cta { display: inline-flex; align-items: center; gap: 8px; } .deck-end-cta svg { width: 16px; height: 16px; } /* The face is not focusable, so the ring has to come from whichever control inside it has focus. */ .deckface:focus-within { outline: 3px solid var(--card-strong); outline-offset: 3px; } .deck-tool { appearance: none; border: none; background: none; padding: 2px; display: inline-flex; color: var(--ink); opacity: 0.45; cursor: pointer; border-radius: 6px; transition: opacity 120ms ease; } .deck-tool svg { width: 17px; height: 17px; } .deckface:hover .deck-tool { opacity: 0.75; } .deck-tool:hover, .deck-tool:focus-visible { opacity: 1; } /* Floated, not flexed. A flex item cannot have text flow around it, so the reroll lives inside the paragraph and the quip wraps past it. It floats right but stays first in the markup, which is what puts it on the top line rather than partway down the quip. */ .deck-flip { float: right; margin: 1px 0 2px 8px; } .deckface-b { transform: rotateY(180deg); } .deck-quip { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; } .deck-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-dim); /* The floated reroll is in the paragraph above; without this the meta row would ride up alongside it on a short quip. */ clear: both; } .deck-meta .author { font-size: 14px; } .deck-meta-end { display: inline-flex; align-items: center; gap: 10px; flex: none; } .deck-stars { display: inline-flex; align-items: center; gap: 4px; flex: none; font: inherit; } .deck-stars svg { width: 15px; height: 15px; } .deck-stars span { display: inline-flex; } /* A star the viewer has given stays lit rather than fading with the other tools, so the card shows at a glance what they have already starred. */ .deck-stars.is-starred, .deckface:hover .deck-stars.is-starred { opacity: 1; color: var(--ink); } /* A reroll is decoration for anyone who has asked not to see motion; the quip still has to change, so swap it for an instant cut. */ @media (prefers-reduced-motion: reduce) { .deckcard { transition-duration: 1ms; } }