/* Linkyard public pages. Colours, font and button shape come from CSS variables that themes.css_vars() puts on , so one stylesheet serves every customer's look. */ * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font: 16px/1.45 var(--font); color: var(--text); background: var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; min-height: 100vh; } body.bg-image { background: var(--bg-color) center / cover no-repeat fixed; } body.bg-image::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, var(--dim)); pointer-events: none; } @supports (-webkit-touch-callout: none) { body, body.bg-image { background-attachment: scroll; } } a { color: inherit; } [hidden] { display: none !important; } .wrap { position: relative; max-width: 620px; margin: 0 auto; padding: 44px 18px 32px; } .top-actions { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; } .round { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--btn) 88%, transparent); color: var(--btn-text); cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.12); } .round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .profile { text-align: center; margin-bottom: 22px; } .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; background: color-mix(in srgb, var(--text) 12%, transparent); } .avatar.square { border-radius: 18px; } .avatar.initial { display: grid; place-items: center; font-size: 40px; font-weight: 700; color: var(--text); } .profile h1 { font-size: 21px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.01em; } .profile p { margin: 0 auto; max-width: 440px; opacity: .88; white-space: pre-line; } .socials { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 16px 0 22px; } .socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; } .socials a:hover { background: color-mix(in srgb, var(--text) 10%, transparent); } .socials svg { width: 24px; height: 24px; fill: var(--text); } .socials.bottom { margin: 28px 0 10px; } .blocks { display: flex; flex-direction: column; gap: 14px; } .btn-link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 10px 62px; border-radius: var(--radius); text-decoration: none; text-align: center; font-weight: 600; line-height: 1.3; word-break: break-word; background: var(--btn); color: var(--btn-text); border: 2px solid var(--btn); transition: transform .15s ease, box-shadow .15s ease, filter .15s; } .btn-link:hover { transform: scale(1.02); } .btn-link:active { transform: scale(.99); } .btn-link:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; } .style-outline .btn-link { background: transparent; color: var(--btn-text); border-color: var(--btn); } .style-outline .btn-link:hover { background: color-mix(in srgb, var(--btn) 14%, transparent); } .style-soft .btn-link { box-shadow: 0 6px 18px rgba(0,0,0,.16); border-color: transparent; } .style-hard .btn-link { box-shadow: 4px 4px 0 var(--text); border-color: var(--text); } .style-hard .btn-link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--text); } .style-glass .btn-link { background: color-mix(in srgb, var(--btn) 18%, transparent); border-color: color-mix(in srgb, var(--btn) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn-link .thumb { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: calc(min(var(--radius), 22px) - 4px); object-fit: cover; } .btn-link .glyph { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; } .btn-link .glyph svg { width: 24px; height: 24px; fill: currentColor; } .btn-link .lock { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .75; } .btn-link .lock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .featured { position: relative; display: block; overflow: hidden; padding: 0; min-height: 0; text-align: left; } .featured img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .featured span { display: block; padding: 14px 18px; } .featured .lock { top: 14px; transform: none; } .section-title { text-align: center; font-size: 17px; font-weight: 700; margin: 12px 0 0; } .text-block { text-align: center; white-space: pre-line; margin: 2px 8px; opacity: .92; } .card { border-radius: var(--radius); padding: 18px; background: color-mix(in srgb, var(--btn) 16%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); } .card h2 { font-size: 16px; margin: 0 0 12px; text-align: center; } .card form { display: flex; flex-direction: column; gap: 10px; } .card input, .card textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: min(var(--radius), 12px); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); background: rgba(255,255,255,.92); color: #1b1b1b; } .card textarea { min-height: 110px; resize: vertical; } .card button { font: inherit; font-weight: 700; padding: 13px; border-radius: var(--radius); border: 2px solid var(--btn); background: var(--btn); color: var(--btn-text); cursor: pointer; } .style-outline .card button { background: transparent; } .card .note { text-align: center; font-size: 14px; margin: 0; } .card .note.bad { font-weight: 600; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .embed { border-radius: var(--radius); overflow: hidden; background: rgba(0,0,0,.2); } .embed iframe { display: block; width: 100%; border: 0; } .embed .ratio { position: relative; } .embed .ratio iframe { position: absolute; inset: 0; height: 100%; } .embed-title { text-align: center; font-weight: 600; margin: 0 0 8px; } .foot { text-align: center; margin-top: 34px; font-size: 13px; } .foot a { text-decoration: none; opacity: .75; } .foot a:hover { opacity: 1; } .brand-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; background: var(--text); color: var(--bg-color); opacity: .9 !important; } .foot .report { display: block; margin-top: 14px; font-size: 12px; } /* priority animations (Pro) */ @keyframes shake { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-2deg); } 93% { transform: rotate(2deg); } 96% { transform: rotate(-1deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } @keyframes wobble { 0%, 85%, 100% { transform: translateX(0); } 88% { transform: translateX(-6px); } 92% { transform: translateX(5px); } 96% { transform: translateX(-3px); } } @keyframes spotlight { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn) 60%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } } .anim-shake { animation: shake 3s infinite; } .anim-pulse { animation: pulse 1.8s ease-in-out infinite; } .anim-wobble { animation: wobble 3s infinite; } .anim-spotlight { animation: spotlight 1.8s infinite; } @media (prefers-reduced-motion: reduce) { .btn-link { animation: none !important; transition: none; } } /* gates: sensitive page, 18+ link, access code */ .gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .gate .panel { max-width: 420px; width: 100%; text-align: center; padding: 30px 24px; border-radius: 20px; background: color-mix(in srgb, var(--btn) 14%, rgba(0,0,0,.25)); color: var(--text); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .gate h1 { font-size: 21px; margin: 0 0 10px; } .gate p { margin: 0 0 20px; opacity: .9; } .gate .actions { display: flex; flex-direction: column; gap: 10px; } .gate .btn-link { padding: 10px 20px; min-height: 52px; } .gate input { width: 100%; font: inherit; font-size: 18px; padding: 12px; border-radius: 12px; border: 0; text-align: center; margin-bottom: 10px; } .gate .err { color: var(--text); font-weight: 700; margin: 0 0 10px; } .share-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; max-width: 460px; background: #fff; color: #1b1b1b; border-radius: 20px 20px 0 0; padding: 20px; box-shadow: 0 -10px 40px rgba(0,0,0,.25); z-index: 10; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .share-sheet h2 { font-size: 16px; margin: 0 0 12px; text-align: center; } .share-sheet img { display: block; width: 180px; height: 180px; margin: 0 auto 12px; } .share-sheet .row { display: flex; gap: 8px; } .share-sheet button, .share-sheet a { flex: 1; font: inherit; font-weight: 600; padding: 12px; border-radius: 12px; border: 1px solid #ddd; background: #f6f6f4; color: #1b1b1b; text-align: center; text-decoration: none; cursor: pointer; } .save-contact { display: flex; justify-content: center; margin: -8px 0 18px; } .save-contact .btn-link { min-height: 44px; padding: 8px 20px; font-size: 15px; gap: 8px; } .save-contact svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .share-back { margin: 0 0 22px; } .share-back .skip { text-align: center; font-size: 14px; opacity: .8; } .preview-bar { position: sticky; top: 0; z-index: 5; text-align: center; font: 600 12px/1 -apple-system, sans-serif; padding: 8px; background: #ffd84d; color: #222; } /* ---------- shared additions */ .profile .tagline { margin: 0 0 6px; font-weight: 600; color: var(--btn); } .style-glass .profile .tagline, .bg-image .profile .tagline { color: inherit; opacity: .9; } .btn-link.has-sub { flex-direction: column; } .btn-link small { display: block; font-weight: 400; font-size: 13px; opacity: .8; margin-top: 2px; } .featured .cap { display: block; padding: 14px 18px; } .featured .cap b { display: block; } .featured .cap small { margin-top: 2px; } .embed-block { margin: 0; } .embed-block figcaption { font-size: 14px; font-weight: 600; margin-top: 8px; } .brand-pill .mark { width: 16px; height: 16px; } /* ---------- index layout: an editorial, numbered list (the Linkyard theme) */ .layout-index .wrap { max-width: 640px; padding-top: 22px; } .layout-index .topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } .layout-index .addr { font: 13px var(--font); opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layout-index .actions { display: flex; gap: 8px; flex: none; } .layout-index .pill { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--font); padding: 8px 13px; border-radius: 999px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: color-mix(in srgb, var(--bg-color) 70%, #fff); color: var(--text); cursor: pointer; } .layout-index .pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .layout-index .round-pill { padding: 8px; } .layout-index .profile { display: flex; gap: 18px; align-items: flex-start; text-align: left; margin-bottom: 30px; } .layout-index .avatar { width: 84px; height: 84px; margin: 0; flex: none; border-radius: 14px; } .layout-index .avatar.circle { border-radius: 50%; } .layout-index .who { min-width: 0; } .layout-index .profile h1 { font-size: 27px; letter-spacing: -.025em; margin-bottom: 2px; } .layout-index .profile .bio { margin: 6px 0 0; max-width: none; opacity: .85; white-space: pre-line; } .layout-index .socials { justify-content: flex-start; gap: 4px 14px; margin: 12px 0 0; } .layout-index .socials a { width: auto; height: auto; display: inline-flex; gap: 6px; align-items: center; border-radius: 0; text-decoration: none; font-size: 14px; } .layout-index .socials a:hover { background: none; text-decoration: underline; } .layout-index .socials svg { width: 17px; height: 17px; } .layout-index .socials.bottom { justify-content: center; margin-top: 30px; } .layout-index .blocks { gap: 0; } .layout-index .section-title { text-align: left; font-size: 18px; letter-spacing: -.01em; margin: 30px 0 0; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } .layout-index .section-title:first-child { margin-top: 0; } .layout-index .section-title .n { font: 500 12px var(--font); opacity: .55; margin-right: 13px; letter-spacing: 0; } .row-link { display: flex; align-items: center; gap: 16px; padding: 18px 2px; text-decoration: none; color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); transition: padding .15s, background .15s; } .row-link:hover { background: color-mix(in srgb, var(--btn) 7%, transparent); padding-left: 8px; } .row-link:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; } .row-link .n { font: 500 13px var(--font); color: var(--btn); min-width: 22px; } .row-link .thumb { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex: none; } .row-link .glyph { width: 22px; flex: none; } .row-link .glyph svg { width: 22px; height: 22px; fill: currentColor; } .row-link .text { flex: 1; min-width: 0; } .row-link b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.01em; } .row-link small { display: block; font-size: 14px; opacity: .7; margin-top: 2px; } .row-link .go { width: 20px; flex: none; opacity: .6; } .row-link .go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .row-link.anim-spotlight, .row-link.anim-pulse, .row-link.anim-shake, .row-link.anim-wobble { animation: none; } .row-link.anim-spotlight .n, .row-link.anim-pulse .n { background: var(--btn); color: var(--bg-color); padding: 2px 6px; border-radius: 4px; } .layout-index .featured { margin: 18px 0; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: color-mix(in srgb, var(--bg-color) 60%, #fff); color: var(--text); } .layout-index .featured:hover { transform: none; } .layout-index .featured img { border-radius: 9px 9px 0 0; } .layout-index .embed-block { margin: 18px 0; } .layout-index .embed { border-radius: 10px; } .layout-index .text-block { text-align: left; margin: 16px 0; } .layout-index .card { margin: 18px 0; border-radius: 10px; background: color-mix(in srgb, var(--bg-color) 60%, #fff); } .layout-index .card h2 { text-align: left; } .layout-index .card button { border-radius: 8px; background: var(--btn); border-color: var(--btn); color: var(--bg-color); } .layout-index .share-back { margin-top: 0; } .layout-index .foot { margin-top: 40px; } @media (max-width: 460px) { .layout-index .profile { gap: 14px; } .layout-index .avatar { width: 68px; height: 68px; } .layout-index .profile h1 { font-size: 23px; } } /* a small bar for a signed-in owner looking at their own page */ .owner-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 14px; background: #1b2422; color: #f5f3ee; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } .owner-bar span { opacity: .7; font-weight: 500; } .owner-bar a { color: #f5f3ee; text-decoration: underline; text-underline-offset: 3px; } /* a video shown as a link rather than a player */ .poster { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000; } .poster img { display: block; width: 100%; height: 100%; object-fit: cover; } .poster:hover .play { transform: translate(-50%, -50%) scale(1.06); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* A video shown as a link rather than a player: the still gets a play badge. */ .poster .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; transition: transform .15s; } .featured .play { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; pointer-events: none; } .featured .play svg, .poster .play svg { width: 26px; height: 26px; fill: none; stroke: #111; stroke-width: 1.8; } .row-link .play, .btn-link:not(.featured) .play { display: none; }