/* ========================================================================== GSL Profiles — shared stylesheet Per-profile colours are set with the custom properties below, so a new profile only needs its own index.html plus (optionally) a :root override. ========================================================================== */ /* Body: Sarabun Light for copy, SemiBold for buttons and labels. (Aptos was the first choice but Microsoft does not license it for self-hosting as a webfont — Sarabun is the agreed substitute.) */ @font-face { font-family: 'Sarabun'; src: url('/fonts/sarabun-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Sarabun'; src: url('/fonts/sarabun-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* Headline */ @font-face { font-family: 'Volkhov'; src: url('/fonts/volkhov-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Brand palette, carried over from the Linktree theme */ --bg: #1e475b; --bg-deep: #16323f; --ink: #ffffff; /* Nudged up from 0.82 when the body went to Light: thin strokes on a dark ground read lighter than they measure. Revert to 0.82 if it looks heavy. */ --ink-muted: rgba(255, 255, 255, 0.88); --accent: #8ec0b8; --accent-hover: #a3cfc8; --accent-ink: #10252f; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --measure: 580px; --gap: 14px; --font-body: 'Sarabun', 'Aptos', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Volkhov', Georgia, 'Times New Roman', serif; /* Body copy runs Light; UI chrome (buttons, labels) keeps SemiBold so it stays legible and tappable against the Light setting. */ --weight-body: 300; --weight-ui: 600; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* The background lives on rather than : a fixed background image is clipped to its element's box, so putting it on leaves a seam below the content on tall viewports. */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background-color: var(--bg); background-image: radial-gradient( 120% 70% at 50% 0%, #27596f 0%, var(--bg) 46%, var(--bg-deep) 100% ); background-attachment: fixed; background-repeat: no-repeat; } body { margin: 0; min-height: 100svh; padding: clamp(24px, 6vw, 56px) 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; font-family: var(--font-body); font-size: 16px; font-weight: var(--weight-body); line-height: 1.55; color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; /* width/height attributes reserve layout space; height:auto keeps the intrinsic ratio (and lets aspect-ratio win) once CSS sizes the width */ height: auto; display: block; } a { color: inherit; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .page { width: 100%; max-width: var(--measure); display: flex; flex-direction: column; flex: 1 0 auto; } /* -------------------------------------------------------------------------- Utility bar (share) -------------------------------------------------------------------------- */ .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--ink); cursor: pointer; transition: background-color 0.18s ease, transform 0.18s ease; } .icon-button:hover { background: rgba(255, 255, 255, 0.18); } .icon-button:active { transform: scale(0.94); } .icon-button svg { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- Profile header -------------------------------------------------------------------------- */ .profile { position: relative; text-align: center; margin-bottom: clamp(24px, 5vw, 34px); } /* --- Scroll-linked header fade ------------------------------------------- As the page scrolls the photo drifts down and dissolves, while the photo inside it drifts up and scales — a slight parallax. Progressive enhancement: browsers without scroll-driven animations get a static header, and it is skipped entirely under reduced-motion. */ @keyframes header-fade { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(100px) scale(1.01); } } @keyframes header-parallax { from { transform: translateY(0) scale(1); } to { transform: translateY(-50px) scale(1.1); } } @supports (animation-timeline: scroll(root)) { @media (prefers-reduced-motion: no-preference) { /* Longhands on purpose: the `animation` shorthand resets duration to 0s, which collapses a scroll timeline to a zero-length range. */ .profile__hero, .profile__photo { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 40px 400px; } .profile__hero { animation-name: header-fade; } .profile__photo { animation-name: header-parallax; } } } /* Full-bleed hero. The photo is square and the full column width, but only 500/580 of its height takes up flow space — the remaining tail is masked out to transparent and the name sits over it. */ .profile__hero { position: relative; width: 100%; aspect-ratio: 580 / 500; } .profile__photo { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background-color: rgba(255, 255, 255, 0.06); /* Eased radial fade so the photo dissolves into the page background */ -webkit-mask-image: radial-gradient( 110.26% 96% at 50% 0%, #000 50%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100% ); mask-image: radial-gradient( 110.26% 96% at 50% 0%, #000 50%, rgba(0, 0, 0, 0.97) 58.79%, rgba(0, 0, 0, 0.9) 65.61%, rgba(0, 0, 0, 0.79) 71.2%, rgba(0, 0, 0, 0.65) 76.25%, rgba(0, 0, 0, 0.48) 81.48%, rgba(0, 0, 0, 0.3) 87.6%, rgba(0, 0, 0, 0.1) 95.32%, rgba(0, 0, 0, 0) 100% ); } .profile__share { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(0, 0, 0, 0.3); } .profile__share:hover { background: rgba(0, 0, 0, 0.45); } /* Sit above the photo's faded tail rather than under it */ .profile__name, .profile__bio, .profile nav { position: relative; z-index: 1; } .profile__name { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 7vw, 40px); line-height: 1.15; letter-spacing: -0.01em; } .profile__bio { margin: 0 auto; max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; } /* -------------------------------------------------------------------------- Social icons -------------------------------------------------------------------------- */ .socials { display: flex; justify-content: center; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; } .socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); transition: background-color 0.18s ease, transform 0.18s ease; } .socials a:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); } .socials svg { width: 22px; height: 22px; fill: currentColor; } /* -------------------------------------------------------------------------- Content blocks -------------------------------------------------------------------------- */ .blocks { display: flex; flex-direction: column; gap: var(--gap); margin: 0; padding: 0; list-style: none; } /* Video embed --------------------------------------------------------------- */ .video { border-radius: var(--radius-md); overflow: hidden; background: rgba(0, 0, 0, 0.28); box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.6); } .video__frame { position: relative; aspect-ratio: 16 / 9; } .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video__caption { margin: 0; padding: 11px 16px; font-size: 14px; font-weight: var(--weight-ui); text-align: center; color: var(--ink-muted); } /* Doubles as a fallback route to the video if the embed is ever blocked */ .video__caption a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 1px; transition: color 0.18s ease, border-color 0.18s ease; } .video__caption a:hover { color: var(--ink); border-bottom-color: var(--ink); } /* Link buttons -------------------------------------------------------------- */ .link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 12px 62px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: var(--weight-ui); line-height: 1.35; text-align: center; text-decoration: none; transition: background-color 0.18s ease, transform 0.18s ease; } .link:hover { background: var(--accent-hover); transform: scale(1.014); } .link:active { transform: scale(0.99); } .link__thumb { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 5px; object-fit: cover; } /* A link button with no thumbnail reclaims the reserved gutter */ .link--plain { padding-left: 20px; padding-right: 20px; } /* Index and error pages: no avatar, so drop the header lower */ .profile--standalone { margin-top: 10vh; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { margin-top: auto; padding-top: 40px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .footer a { color: rgba(255, 255, 255, 0.82); font-weight: var(--weight-ui); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.28); padding-bottom: 1px; transition: color 0.18s ease, border-color 0.18s ease; } .footer a:hover { color: var(--ink); border-bottom-color: var(--ink); } /* -------------------------------------------------------------------------- Share sheet -------------------------------------------------------------------------- */ .sheet { width: min(340px, calc(100vw - 32px)); padding: 26px 24px 22px; border: 0; border-radius: var(--radius-md); background: #ffffff; color: var(--accent-ink); text-align: center; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7); } .sheet::backdrop { background: rgba(9, 26, 34, 0.68); backdrop-filter: blur(3px); } .sheet__title { margin: 0 0 18px; font-size: 17px; font-weight: var(--weight-ui); letter-spacing: -0.01em; } .sheet__qr { width: 216px; height: 216px; margin: 0 auto; border-radius: 8px; } .sheet__url { margin: 14px 0 20px; font-size: 14px; font-weight: var(--weight-ui); color: #4a6572; word-break: break-all; } .sheet__actions { display: flex; flex-direction: column; gap: 8px; } .sheet__btn { padding: 12px 16px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: var(--weight-ui); cursor: pointer; transition: background-color 0.18s ease; } .sheet__btn:hover { background: var(--accent-hover); } .sheet__btn--ghost { background: transparent; color: #4a6572; } .sheet__btn--ghost:hover { background: rgba(0, 0, 0, 0.06); } /* -------------------------------------------------------------------------- Toast (share confirmation) -------------------------------------------------------------------------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: var(--weight-ui); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .toast[data-visible='true'] { opacity: 1; transform: translate(-50%, 0); } /* -------------------------------------------------------------------------- Accessibility -------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .link:focus-visible { outline-color: var(--ink); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Small screens -------------------------------------------------------------------------- */ @media (max-width: 420px) { .link { padding-left: 58px; padding-right: 58px; font-size: 14.5px; } .link__thumb { width: 44px; height: 44px; left: 6px; } }