@layer variables {
:root {
--breakpoint-xs: 0px;
--breakpoint-sm: 600px;
--breakpoint-md: 900px;
--breakpoint-lg: 1200px;
--breakpoint-xl: 1536px;
--radius-base: 3px;
--gap-base: 4px;
--padding-base: 4px;
--margin-base: 4px;
--blur-base: 4px;
--color-page-background: rgb(230 234 237);
--color-surface: #f0f0f0;
--color-surface-2: #E0E0E0;
--color-surface-3: #C0C0C0;
--color-link-background: #000000;
--color-link-text: #FFFFFF;
--color-active-background: #6E6E6E;
--color-active-text: #000000;
--color-primary: #000000;
--color-secondary: #6E6E6E;
--color-success: #18d31e;
--color-success-text: #000000;
--color-warning: #FFC107;
--color-warning-text: #000000;
--color-error: #9B2323;
--color-error-text: #FFFFFF;
--color-brand: #06A0A2;
--color-brand-text: #000000;
--color-brand-dark: hsl(from var(--color-brand) h s calc(l - 10%));
--color-brand-strands: oklch(62.33% 0.2641 345.89);
--color-brand-strands-text: #FFFFFF;
--color-blue: #00AEFF;
--color-blue-text: #000000;
--color-twitch: #6441A4;
--color-twitch-text: #FFFFFF;
--color-youtube: #FF0000;
--color-youtube-text: #FFFFFF;
--color-button-primary: var(--color-brand);
--color-button-primary-text: var(--color-brand-text);
}
}
@layer themes {
}
@layer inputs {
input {
&[type="file"] {
border: 1px solid var(--color-neutral-400);
border-radius: 10px;
block-size: 48px;
inline-size: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
&::file-selector-button {
background-color: var(--color-teal-500);
color: var(--color-neutral-50);
border-radius: 7px;
padding: 10px 20px;
block-size: 100%;
margin: 0;
display: flex;
justify-self: end;
align-items: center;
justify-content: center;
}
}
}
}
@layer variables, reset, default, themes, buttons, inputs, theme, base, components, utilities;
@layer variables {
:root {
--color-white: #ffffff;
--color-black: #000000;
--color-neutral-50: oklch(98.5% 0 0);
--color-neutral-100: oklch(97% 0 0);
--color-neutral-200: oklch(92.2% 0 0);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-400: oklch(70.8% 0 0);
--color-neutral-500: oklch(55.6% 0 0);
--color-neutral-600: oklch(43.9% 0 0);
--color-neutral-700: oklch(37.1% 0 0);
--color-neutral-800: oklch(26.9% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--color-neutral-950: oklch(14.5% 0 0);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-900: oklch(21% 0.034 264.665);
--color-pink-500: oklch(65.6% 0.241 354.308);
--color-slate-800: oklch(27.9% 0.041 260.031);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-fuchsia-500: oklch(66.7% 0.295 322.15);
--color-teal-50:  color-mix(in oklch, var(--color-brand) 10%,  var(--color-white) 90%);
--color-teal-100: color-mix(in oklch, var(--color-brand) 20%,  var(--color-white) 80%);
--color-teal-200: color-mix(in oklch, var(--color-brand) 40%,  var(--color-white) 60%);
--color-teal-300: color-mix(in oklch, var(--color-brand) 60%,  var(--color-white) 40%);
--color-teal-400: color-mix(in oklch, var(--color-brand) 80%,  var(--color-white) 20%);
--color-teal-500: var(--color-brand);
--color-teal-600: color-mix(in oklch, var(--color-brand) 80%,  var(--color-black) 20%);
--color-teal-700: color-mix(in oklch, var(--color-brand) 60%,  var(--color-black) 40%);
--color-teal-800: color-mix(in oklch, var(--color-brand) 40%,  var(--color-black) 60%);
--color-teal-900: color-mix(in oklch, var(--color-brand) 20%,  var(--color-black) 80%);
--color-teal-950: color-mix(in oklch, var(--color-brand) 10%,  var(--color-black) 90%);
--color-magenta-50:  color-mix(in oklch, var(--color-brand-strands) 10%,  var(--color-white) 90%);
--color-magenta-100: color-mix(in oklch, var(--color-brand-strands) 20%,  var(--color-white) 80%);
--color-magenta-200: color-mix(in oklch, var(--color-brand-strands) 40%,  var(--color-white) 60%);
--color-magenta-300: color-mix(in oklch, var(--color-brand-strands) 60%,  var(--color-white) 40%);
--color-magenta-400: color-mix(in oklch, var(--color-brand-strands) 80%,  var(--color-white) 20%);
--color-magenta-500: var(--color-brand-strands);
--color-magenta-600: color-mix(in oklch, var(--color-brand-strands) 80%,  var(--color-black) 20%);
--color-magenta-700: color-mix(in oklch, var(--color-brand-strands) 60%,  var(--color-black) 40%);
--color-magenta-800: color-mix(in oklch, var(--color-brand-strands) 40%,  var(--color-black) 60%);
--color-magenta-900: color-mix(in oklch, var(--color-brand-strands) 20%,  var(--color-black) 80%);
--color-magenta-950: color-mix(in oklch, var(--color-brand-strands) 10%,  var(--color-black) 90%);
--color-blue-50:  color-mix(in oklch, var(--color-blue) 10%,  var(--color-white) 90%);
--color-blue-100: color-mix(in oklch, var(--color-blue) 20%,  var(--color-white) 80%);
--color-blue-200: color-mix(in oklch, var(--color-blue) 40%,  var(--color-white) 60%);
--color-blue-300: color-mix(in oklch, var(--color-blue) 60%,  var(--color-white) 40%);
--color-blue-400: color-mix(in oklch, var(--color-blue) 80%,  var(--color-white) 20%);
--color-blue-500: var(--color-blue);
--color-blue-600: color-mix(in oklch, var(--color-blue) 80%,  var(--color-black) 20%);
--color-blue-700: color-mix(in oklch, var(--color-blue) 60%,  var(--color-black) 40%);
--color-blue-800: color-mix(in oklch, var(--color-blue) 40%,  var(--color-black) 60%);
--color-blue-900: color-mix(in oklch, var(--color-blue) 20%,  var(--color-black) 80%);
--color-blue-950: color-mix(in oklch, var(--color-blue) 10%,  var(--color-black) 90%);
--font-montserrat: "Montserrat", sans-serif;
--font-inter: "Inter", sans-serif;
--font-outfit: "Outfit", sans-serif;
--text-home-card: 28px;
--text-home-card--line-height: 36px;
--color-background: var(--color-page-background);
--shadow-elevation-2: 0 2px 6px 0 hsl(from black h s l / 12%);
--shadow-beta-glow: 0 0 12px 0 hsl(from var(--color-blue-500) h s l / 48%);
--shadow-editor: 0 0 8px 0 hsl(from var(--color-black) h s l / 8%);
--shadow-social: 0 2px 4px 0 hsl(from var(--color-black) h s l / 8%);
--shadow-active-nav-item:
0 4px 6px 0 hsl(from var(--color-black) h s l / 12%),
0 2px 4px 0 hsl(from var(--color-black) h s l / 4%)
;
--shadow-modal:
0 2px 8px 0 hsl(from var(--color-black) h s l / 10%),
0 2px 2px 0 hsl(from var(--color-black) h s l / 8%)
;
--shadow-auth:
0 4px 8px 0 hsl(from var(--color-black) h s l / 12%),
0 0 64px 0 hsl(from var(--color-black) h s l / 12%)
;
--shadow-gradient-button: 0 0 12px 0 hsl(from #2EC8CD h s l / 32%);
--ti-primary: var(--color-brand);
--ti-neutral: var(--color-neutral-700);
--ti-success: var(--color-success);
--ti-warning: var(--color-warning);
--ti-error: var(--color-error);
--ti-info: var(--color-blue);
--ti-surface: var(--color-white);
--ti-border: var(--color-neutral-300);
--ti-border-strong: var(--color-neutral-500);
--ti-muted: var(--color-neutral-500);
--ti-radius: calc(var(--radius-base) * 2);
--ti-radius-lg: calc(var(--radius-base) * 4);
}
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd, pre {
margin: 0;
}
ul, ol { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
}
@layer utilities {
[hidden] { display: none; }
}
:root {
interpolate-size: allow-keywords;
}
body {
display: flex;
flex-direction: column;
block-size: 100dvb;
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: var(--color-page-background);
color: var(--color-primary);
}
@layer base {
h1, h2, h3, h4, h5, h6 {
font-family: "Inter", sans-serif;
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes slide-from-top {
from { transform: translateY(130px); }
}
@keyframes slide-to-bottom {
to { transform: translateY(-130px); }
}
::view-transition-old(root) {
}
::view-transition-new(root) {
}
::view-transition-group(navigationTab) {
animation-duration: 250ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(navigationTab) {
display: none;
}
::view-transition-new(navigationTab) {
animation: none;
block-size: 100%;
inline-size: 100%;
}
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none;
}
}
@layer components {
.tooltip {
display: none;
max-inline-size: 18rem;
padding: calc(var(--padding-base) * 1.5) calc(var(--padding-base) * 2.5);
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: var(--color-slate-900, #0f172a);
color: var(--color-white);
font: 500 0.8125rem/1.35 "Inter", sans-serif;
box-shadow: 0 4px 14px hsl(from var(--color-black) h s l / 18%);
pointer-events: none;
&:popover-open {
display: block;
animation: tooltip-in 120ms ease-out;
}
}
@keyframes tooltip-in {
from { opacity: 0; transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
.tooltip:popover-open { animation: none; }
}
}
@layer components {
.page-shell {
flex: 1;
display: flex;
flex-direction: column;
background: var(--color-white);
}
.page-theme {
flex: 1;
display: flex;
flex-direction: column;
}
.page-view {
container-name: page;
container-type: inline-size;
align-self: center;
inline-size: 100%;
max-inline-size: calc(992px + calc(var(--padding-base) * 8));
padding: calc(var(--padding-base) * 6);
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
}
.explicit-gate {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 4);
padding: calc(var(--padding-base) * 3) calc(var(--padding-base) * 4);
border-radius: calc(var(--radius-base) * 3);
background: var(--color-error);
color: var(--color-error-text);
&[hidden] { display: none; }
p {
flex: 1 1 280px;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 3);
}
strong {
display: grid;
place-items: center;
inline-size: 40px;
aspect-ratio: 1;
border: 3px solid currentColor;
border-radius: 50%;
font-size: 13px;
font-weight: 800;
}
button {
flex: none;
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 4);
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: hsl(from var(--color-white) h s l / 16%);
color: inherit;
font-weight: 600;
cursor: pointer;
}
}
html:not([data-explicit-ok]) .page-view {
.user-section.banner-explicit .banner,
.user-section.avatar-explicit .avatar {
background-image: none;
}
.link[data-explicit] .text {
filter: blur(6px);
}
}
.user-section {
display: grid;
grid-template-columns: 200px 14px 1fr;
grid-template-rows: 1fr 14px 102px 98px;
block-size: 378px;
isolation: isolate;
.banner {
grid-column: 1 / -1;
grid-row: 1 / 4;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
background-color: var(--page-placeholder);
background-image: var(--_banner);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--radius-lg);
border-end-start-radius: 0;
z-index: -1;
mask-image: var(--notch-path);
mask-position: var(--notch-anchor);
mask-size: 2000px 500px;
mask-repeat: no-repeat;
}
.controls {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 3);
padding: calc(var(--padding-base) * 5);
}
.control {
flex: none;
inline-size: 44px;
aspect-ratio: 1;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: hsl(from var(--page-bg) h s l / 86%);
color: var(--page-text);
backdrop-filter: blur(calc(var(--blur-base) * 8));
font-size: 16px;
text-decoration: none;
cursor: pointer;
&[hidden] { display: none; }
}
.avatar {
grid-column: 1 / 2;
grid-row: 3 / 5;
display: grid;
place-items: center;
background-color: var(--page-placeholder);
background-image: var(--_avatar);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--avatar-radius);
outline: 1px solid var(--page-line);
font-family: "Outfit", sans-serif;
font-size: 8rem;
color: var(--page-muted);
}
.details {
grid-column: 3 / -1;
grid-row: 4 / 5;
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(var(--gap-base) * 2);
padding-inline-start: 14px;
h1 {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 0.5);
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.username { font-family: var(--font-body); }
.username {
font-size: 12px;
font-weight: 200;
line-height: 20px;
}
.description {
font-size: 16px;
line-height: 20px;
text-wrap: balance;
}
}
.chips {
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap-base) * 2);
}
}
.chip {
display: inline-flex;
align-items: center;
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 5);
border-radius: var(--radius-chip);
background-color: var(--page-surface);
color: var(--page-text);
font-family: "Outfit", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 20px;
user-select: none;
cursor: default;
&.explicit {
background-color: #982323;
color: white;
}
&.role-founder {
inline-size: 32px;
background-color: var(--color-brand-strands);
background-image: url(/images/chips/role-founder.svg);
background-size: auto 70%;
background-position: center;
background-repeat: no-repeat;
color: transparent;
}
&.role-staff {
background-color: var(--color-brand);
color: var(--color-brand-text);
}
&.role-partner {
background-image: url(/images/chips/role-partner.png);
background-size: auto 100%;
background-position: center top;
color: black;
}
}
.page-view .sections {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
}
.section {
container-name: section;
container-type: inline-size;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
}
.section-title {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.rich-text {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
padding-block: calc(var(--padding-base) * 2);
line-height: 1.5;
p { line-height: 1; }
a {
color: var(--accent-ink);
transition: color 200ms;
&:hover { color: var(--accent-ink-hover); }
}
.mention {
font-weight: 600;
text-decoration: none;
}
ul, ol {
display: flex;
flex-direction: column;
gap: var(--gap-base);
padding-inline-start: calc(var(--padding-base) * 6);
}
ul { list-style: disc; }
ol { list-style: decimal; }
blockquote {
padding-inline-start: calc(var(--padding-base) * 4);
border-inline-start: 3px solid var(--page-line);
}
code {
padding-inline: var(--padding-base);
border-radius: var(--radius-base);
background: var(--page-surface);
font-size: 0.9em;
}
}
.timestamp {
padding-inline: calc(var(--padding-base) * 0.5);
border-radius: var(--radius-base);
background: color-mix(in srgb, var(--accent-ink) 15%, transparent);
white-space: nowrap;
cursor: default;
}
.links {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: calc(var(--gap-base) * 5) calc(var(--gap-base) * 4);
padding-block-end: var(--padding-base);
.link {
display: flex;
align-items: center;
block-size: 44px;
border: 2px solid transparent;
border-radius: var(--radius-sm);
background: var(--link-bg);
color: var(--link-text);
text-align: center;
text-decoration: none;
overflow: hidden;
&:has(> :is(i, svg)) { padding-inline-start: var(--link-icon-inset, calc(var(--padding-base) * 2)); }
> i, > svg {
flex: none;
inline-size: 44px;
block-size: 24px;
font-size: 24px;
text-align: center;
}
.text {
flex: 1;
padding-inline: calc(var(--gap-base) * 2);
}
.explicit-badge {
block-size: 100%;
display: flex;
align-items: center;
padding-inline: calc(var(--padding-base) * 4);
background: var(--color-error);
color: var(--color-error-text);
}
}
}
@container section (inline-size >= 600px) { .links { grid-template-columns: repeat(2, 1fr); } }
@container section (inline-size >= 900px) { .links { grid-template-columns: repeat(3, 1fr); } }
.page-view.page-setup { flex: 1; }
.page-missing {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--gap-base) * 6);
padding: calc(var(--padding-base) * 12) calc(var(--padding-base) * 6);
text-align: center;
img { max-inline-size: min(400px, 80vw); block-size: auto; }
h1 { font-size: 35px; font-weight: 700; }
}
@container page (width <= 900px) {
.user-section {
--notch-path: var(--notch-path-sm);
--notch-anchor: center bottom;
grid-template-columns: 1fr 140px 1fr;
grid-template-rows: auto 70px 70px auto;
block-size: auto;
.banner {
grid-column: 1 / 4;
grid-row: 1 / 3;
block-size: 200px;
border-end-start-radius: var(--radius-lg);
}
.avatar {
grid-row: 2 / 4;
grid-column: 2 / 3;
font-size: 6rem;
}
.details {
grid-column: 1 / 4;
grid-row: 4 / 5;
align-items: center;
padding-block: calc(var(--padding-base) * 4) calc(var(--padding-base) * 2);
padding-inline: 0;
text-align: center;
h1 {
align-items: center;
font-size: 16px;
line-height: 20px;
}
.description {
font-size: 14px;
line-height: 18px;
}
}
.chips { justify-content: center; }
}
}
}
@layer components {
.themed {
--page-bg: var(--color-white);
--page-text: var(--color-black);
--page-muted: var(--color-slate-300);
--page-surface: var(--color-surface-2);
--page-placeholder: hsl(from var(--color-neutral-500) h s l / 10%);
--page-line: var(--color-neutral-200);
--link-bg: var(--theme-accent, var(--color-slate-900));
--link-text: var(--theme-accent-text, var(--color-link-text));
--accent-ink: var(--theme-accent-ink, var(--color-teal-500));
--accent-ink-hover: color-mix(in oklch, var(--accent-ink) 78%, black);
--button-ink: var(--theme-accent-ink, var(--page-text));
--accent-fill: var(--theme-accent, var(--color-brand));
--font-heading: "Inter", sans-serif;
--font-body: "Inter", sans-serif;
--radius-sm: 8px;
--radius-lg: 16px;
--radius-chip: 100dvi;
--avatar-radius: 8px;
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H226 A12 12 0 0 1 214 488 V406 A22 22 0 0 0 192 384 H12 A12 12 0 0 1 0 372 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1088 A12 12 0 0 1 1076 488 V438 A14 14 0 0 0 1062 424 H938 A14 14 0 0 0 924 438 V488 A12 12 0 0 1 912 500 H0 Z'/%3E%3C/svg%3E");
--notch-path: var(--notch-path-lg);
--notch-anchor: left bottom;
background-color: var(--page-bg);
color: var(--page-text);
font-family: var(--font-body);
}
.themed[data-bg="tint"] {
--page-bg: color-mix(in oklch, var(--accent-fill) 7%, white);
}
.themed[data-bg="gradient"] {
background-image: linear-gradient(
to bottom,
color-mix(in oklch, var(--accent-fill) 22%, white),
color-mix(in oklch, var(--accent-fill) 6%, white) 520px,
white 960px
);
}
.themed[data-bg="dark"] {
--page-bg: #0b1220;
--page-text: #e5e7eb;
--page-muted: #475569;
--page-surface: hsl(0 0% 100% / 10%);
--page-placeholder: hsl(0 0% 100% / 6%);
--page-line: hsl(0 0% 100% / 14%);
--link-bg: var(--theme-accent, #e2e8f0);
--link-text: var(--theme-accent-text, #0f172a);
--accent-ink: var(--theme-accent-ink, #2dd4bf);
--accent-ink-hover: color-mix(in oklch, var(--accent-ink) 78%, white);
color-scheme: dark;
}
.themed[data-hfont="outfit"] { --font-heading: "Outfit", sans-serif; }
.themed[data-hfont="montserrat"] { --font-heading: "Montserrat", sans-serif; }
.themed[data-bfont="outfit"] { --font-body: "Outfit", sans-serif; }
.themed[data-bfont="montserrat"] { --font-body: "Montserrat", sans-serif; }
.themed[data-corners="square"] {
--radius-sm: 0;
--radius-lg: 0;
--radius-chip: 0;
--avatar-radius: 0;
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H214 L214 500 V384 L214 384 H0 L0 384 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1076 L1076 500 V424 L1076 424 H924 L924 424 V500 L924 500 H0 Z'/%3E%3C/svg%3E");
}
.themed[data-corners="pill"] {
--link-icon-inset: calc(var(--padding-base) * 4);
--radius-sm: 100dvi;
--radius-lg: 32px;
--avatar-radius: 32px;
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H246 A32 32 0 0 1 214 468 V430 A46 46 0 0 0 168 384 H32 A32 32 0 0 1 0 352 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1108 A32 32 0 0 1 1076 468 V462 A38 38 0 0 0 1038 424 H962 A38 38 0 0 0 924 462 V468 A32 32 0 0 1 892 500 H0 Z'/%3E%3C/svg%3E");
}
.themed[data-avatar="circle"] {
--avatar-radius: 50%;
}
.themed[data-avatar="circle"] {
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H225.6 A12 12 0 0 1 213.64 488.95 A114 114 0 0 0 20.38 416.41 A12 12 0 0 1 0 407.82 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1087.18 A12 12 0 0 1 1075.29 489.64 A76 76 0 0 0 924.71 489.64 A12 12 0 0 1 912.82 500 H0 Z'/%3E%3C/svg%3E");
}
.themed[data-avatar="circle"][data-corners="square"] {
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H213.98 A114 114 0 0 0 0 443.26 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1076 A76 76 0 0 0 924 500 H0 Z'/%3E%3C/svg%3E");
}
.themed[data-avatar="circle"][data-corners="pill"] {
--notch-path-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H242.88 A32 32 0 0 1 211.57 474.58 A114 114 0 0 0 46.9 397.12 A32 32 0 0 1 0 368.8 Z'/%3E%3C/svg%3E");
--notch-path-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='500'%3E%3Cpath d='M0 0 H2000 V500 H1103.15 A32 32 0 0 1 1072.59 477.48 A76 76 0 0 0 927.41 477.48 A32 32 0 0 1 896.85 500 H0 Z'/%3E%3C/svg%3E");
}
.themed[data-banner="gradient"]:not([data-header="compact"]) .user-section:not(.has-banner) .banner {
background-color: transparent;
background-image: linear-gradient(135deg, var(--accent-fill), color-mix(in oklch, var(--accent-fill) 35%, white));
}
.themed[data-buttons="outline"] .links .link {
border-color: var(--button-ink);
background: transparent;
color: var(--button-ink);
}
.themed[data-buttons="soft"] .links .link {
background: color-mix(in srgb, var(--button-ink) 12%, transparent);
color: var(--button-ink);
}
.themed[data-icons="off"] .links .link > :is(i, svg) {
--fa-display: none;
display: none;
}
.themed[data-header="centred"] .user-section {
--notch-path: var(--notch-path-sm);
--notch-anchor: center bottom;
grid-template-columns: 1fr 140px 1fr;
grid-template-rows: auto 70px 70px auto;
block-size: auto;
.banner {
grid-column: 1 / 4;
grid-row: 1 / 3;
block-size: 240px;
border-end-start-radius: var(--radius-lg);
}
.avatar {
grid-row: 2 / 4;
grid-column: 2 / 3;
font-size: 6rem;
}
.details {
grid-column: 1 / 4;
grid-row: 4 / 5;
align-items: center;
padding-block: calc(var(--padding-base) * 4) calc(var(--padding-base) * 2);
padding-inline: 0;
text-align: center;
h1 { align-items: center; }
}
.chips { justify-content: center; }
}
.themed[data-header="compact"] .user-section {
grid-template-columns: 120px 1fr auto;
grid-template-rows: auto;
align-items: center;
column-gap: calc(var(--gap-base) * 6);
block-size: auto;
.banner {
grid-column: 3 / 4;
grid-row: 1 / 2;
align-self: start;
block-size: auto;
background: none;
mask: none;
z-index: 0;
.image-upload { display: none; }
}
.controls { padding: 0; }
.control { background: var(--page-surface); }
.avatar {
grid-column: 1 / 2;
grid-row: 1 / 2;
aspect-ratio: 1;
font-size: 4rem;
}
.details {
grid-column: 2 / 3;
grid-row: 1 / 2;
align-items: flex-start;
padding: 0;
text-align: start;
h1 { align-items: flex-start; }
}
.chips { justify-content: flex-start; }
}
@container page (width <= 600px) {
.themed[data-header="compact"] .user-section {
grid-template-columns: 88px 1fr;
grid-template-rows: auto auto;
.banner { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; }
.avatar { grid-row: 1 / 3; font-size: 3rem; }
.details { grid-row: 2 / 3; }
}
}
}
@layer components {
.tippy-box[data-theme~='tofee-menu'] {
background: transparent;
box-shadow: none;
}
.tippy-box[data-theme~='tofee-menu'] > .tippy-content {
padding: 0;
}
.tofee-menu {
display: flex;
flex-direction: column;
gap: var(--gap-base);
inline-size: 280px;
max-block-size: 420px;
overflow-y: auto;
scrollbar-width: thin;
padding: calc(var(--padding-base) * 1.5);
border: 1px solid var(--color-neutral-300);
border-radius: calc(var(--radius-base) * 3);
background: var(--color-white);
box-shadow: var(--shadow-modal);
color: var(--color-black);
font-family: "Inter", sans-serif;
}
.tofee-menu-header {
display: flex;
align-items: center;
gap: var(--gap-base);
padding: var(--padding-base) var(--padding-base) calc(var(--padding-base) * 1.5);
border-block-end: 1px solid var(--color-neutral-200);
font-size: 0.875rem;
font-weight: 600;
}
.tofee-menu-back {
display: grid;
place-items: center;
inline-size: 28px;
aspect-ratio: 1;
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: transparent;
cursor: pointer;
&:hover { background: var(--color-neutral-100); }
}
.tofee-menu-item {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 3);
inline-size: 100%;
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 2.5);
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: transparent;
text-align: start;
cursor: pointer;
&:hover { background: var(--color-neutral-100); }
&.is-selected {
background: var(--color-teal-500);
color: var(--color-white);
.tofee-menu-preview { opacity: 0.85; }
}
}
.tofee-menu-icon {
flex: none;
inline-size: 1.25em;
block-size: 1.25em;
display: grid;
place-items: center;
text-align: center;
}
img.tofee-menu-icon { object-fit: contain; }
.tofee-menu-text {
flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
}
.tofee-menu-label {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.tofee-menu-preview {
font-size: 0.75rem;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tofee-menu-chevron {
flex: none;
font-size: 0.7rem;
opacity: 0.6;
}
.tofee-menu-empty {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 2.5);
font-size: 0.875rem;
color: var(--color-neutral-500);
}
.tofee-menu-form {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 1.5);
input {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 2.5);
border: 1px solid var(--color-neutral-300);
border-radius: calc(var(--radius-base) * 2);
font-size: 0.875rem;
&:focus-visible {
outline: 2px solid var(--color-teal-500);
outline-offset: -2px;
}
}
}
.tofee-menu-submit {
padding: calc(var(--padding-base) * 2);
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: var(--color-teal-500);
color: var(--color-white);
font-weight: 600;
cursor: pointer;
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
}
@layer components {
.editor-shell {
flex: 1;
block-size: 100dvb;
display: grid;
grid-template-columns: 400px 1fr;
grid-template-rows: 100px 1fr;
grid-template-areas:
"top top"
"side main";
background: var(--color-surface);
overflow: hidden;
transition: 200ms;
&.opening {
grid-template-columns: 0px 1fr;
grid-template-rows: 0px 1fr;
}
@media (prefers-reduced-motion: reduce) { transition: none; }
}
.editor-brand {
grid-area: top;
justify-self: start;
inline-size: 400px;
block-size: 100px;
display: flex;
align-items: flex-start;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 4) calc(var(--padding-base) * 4) 0;
.edit-corner { position: relative; z-index: 2; }
.editor-logo { align-self: center; text-decoration: none; --logo-scale: 1.5; }
}
.editor-top {
grid-area: top;
justify-self: end;
inline-size: calc(100% - 400px);
block-size: 100px;
display: flex;
align-items: center;
padding-inline: calc(var(--padding-base) * 4) calc(var(--padding-base) * 6);
min-inline-size: 0;
}
.editor-side {
grid-area: side;
justify-self: start;
inline-size: 400px;
display: flex;
flex-direction: column;
min-block-size: 0;
overflow-y: auto;
}
.editor-main > :is(tibi-page-editor, tibi-branding-form) {
flex: 1;
display: flex;
flex-direction: column;
min-block-size: 0;
}
.editor-main > tibi-page-editor {
position: absolute;
inset: 0;
visibility: hidden;
pointer-events: none;
}
.editor-shell.view-content .editor-main {
> tibi-page-editor {
position: static;
visibility: visible;
pointer-events: auto;
}
> :not(tibi-page-editor, .page-shell) { display: none; }
> .page-shell {
position: absolute;
inset: 0;
overflow: hidden;
visibility: hidden;
pointer-events: none;
}
}
.editor-top > tibi-editor-toolbar {
flex: 1;
display: flex;
min-inline-size: 0;
}
.editor-side > tibi-editor-nav {
flex: 1;
display: flex;
flex-direction: column;
}
.editor-main {
grid-area: main;
container-name: editor-main;
container-type: inline-size;
display: flex;
flex-direction: column;
min-block-size: 0;
min-inline-size: 0;
overflow: hidden;
position: relative;
z-index: 1;
border-start-start-radius: calc(var(--radius-base) * 8);
background: var(--color-white);
box-shadow: var(--shadow-editor);
transition: border-radius 200ms;
}
.editor-shell:is(.opening, .closed) .editor-main { border-start-start-radius: 0; }
.editor-side {
align-self: start;
block-size: calc(100dvb - var(--padding-base) * 23);
translate: 0 calc(var(--padding-base) * -2);
transition: 200ms;
@media (prefers-reduced-motion: reduce) { transition: none; }
}
.editor-shell:is(.closed, .opening) .editor-side { translate: 0 calc(var(--padding-base) * 23); }
.section-editor .section-head {
min-block-size: 0;
overflow: clip;
transition: block-size 250ms;
@media (prefers-reduced-motion: reduce) { transition: none; }
}
.editor-shell.closed {
.section-editor {
border-width: 0;
border-radius: 0;
background-color: transparent;
color: var(--page-text);
font-family: var(--font-body);
color-scheme: inherit;
.section-head { block-size: 0; }
.section-body { padding: 0; }
.section-actions { display: none; }
:is(.editor-toolbar, .links-hint, .links-actions) { display: none; }
.section-title-input {
padding: 0;
box-shadow: none;
background-color: transparent;
color: inherit;
font-family: var(--font-heading);
}
.editor-surface .ProseMirror {
min-block-size: 0;
padding: calc(var(--padding-base) * 2) 0;
box-shadow: none;
color: inherit;
}
.editor-links button.link.active { outline: 0; }
}
.add-section-row { display: none; }
.page-view.editing .name-field::before { opacity: 0; }
}
.editor-shell:not(.view-content) .editor-main > .page-shell .section,
.editor-shell.view-content .editor-main > tibi-page-editor .section-editor {
view-transition-name: var(--vt, none);
}
.editor-shell.closed {
grid-template-columns: 0px 1fr;
grid-template-rows: 0px 1fr;
.editor-main {
overflow-y: auto;
box-shadow: none;
}
}
.editor-shell.closed .editor-close,
.editor-shell:not(.closed) .editor-enter,
.editor-main .page-view > .owner-edit { display: none; }
.editor-main > tibi-site-footer { display: none; }
.opening-stand-in {
position: absolute;
inset: 0;
z-index: 2;
display: none;
overflow: hidden;
> .page-theme { min-block-size: 100%; }
}
.editor-shell.opening .editor-main > .opening-stand-in { display: flex; flex-direction: column; }
.toolbar {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 4);
min-inline-size: 0;
}
.view-toggles {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
padding: var(--padding-base);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
box-shadow: var(--shadow-editor);
}
.view-toggle {
inline-size: 44px;
block-size: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: calc(var(--radius-base) * 2);
font-size: 1.125rem;
background: transparent;
cursor: pointer;
&:hover { background: var(--color-neutral-100); }
&.active { background: var(--color-black); color: var(--color-white); }
}
.view-label {
padding-inline: calc(var(--padding-base) * 2) calc(var(--padding-base) * 3);
font-size: 1.125rem;
text-transform: capitalize;
}
.toolbar-end {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
--ti-button-weight: 500;
--ti-neutral: var(--color-black);
--ti-radius: 6px;
white-space: nowrap;
}
.save-status {
display: flex;
flex-direction: column;
align-items: flex-end;
padding-inline-end: calc(var(--padding-base) * 2);
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 1.3;
color: var(--color-neutral-500);
text-align: end;
.status-conflict {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
color: oklch(55% 0.15 70);
}
.status-error { color: var(--color-error); }
.status-saving {
display: flex;
align-items: center;
gap: var(--gap-base);
color: var(--color-teal-600);
}
}
.history {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 3);
padding: calc(var(--padding-base) * 4);
inline-size: 340px;
max-block-size: 420px;
h3 { font-size: 1.05rem; font-weight: 700; }
}
.history-empty {
font-size: 0.875rem;
color: var(--color-neutral-500);
}
.history-list {
display: flex;
flex-direction: column;
gap: var(--gap-base);
overflow-y: auto;
scrollbar-width: thin;
}
.history-item {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 3);
padding: calc(var(--padding-base) * 2);
border-radius: calc(var(--radius-base) * 2);
&:hover { background: var(--color-neutral-100); }
> i, > svg {
flex: none;
inline-size: 1.25em;
text-align: center;
color: var(--color-teal-500);
}
}
.history-text {
flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
font-size: 0.875rem;
line-height: 1.3;
.history-kind { font-weight: 600; }
.history-time { font-size: 0.75rem; color: var(--color-neutral-500); }
}
.schedule-body, .delete-body, .crop-body {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 3);
padding-block: calc(var(--padding-base) * 2);
}
.schedule-hint {
font-size: 0.8125rem;
color: var(--color-neutral-500);
}
.schedule-actions, .crop-actions {
display: flex;
justify-content: flex-end;
gap: calc(var(--gap-base) * 2);
}
.editor-nav {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
padding: 0 calc(var(--padding-base) * 4);
}
.nav-user-row {
display: flex;
justify-content: flex-start;
}
.nav-items {
display: flex;
flex-direction: column;
gap: var(--gap-base);
padding: 0;
list-style: none;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 3);
block-size: 48px;
padding: calc(var(--padding-base) * 1.5) calc(var(--padding-base) * 2.5);
border-radius: 8px;
color: var(--color-slate-500);
font-size: 1.125rem;
font-weight: 500;
text-decoration: none;
i { inline-size: 20px; text-align: center; color: var(--color-black); }
&:hover { background: hsl(from var(--color-teal-500) h s l / 10%); }
&.active {
background: var(--color-white);
color: var(--color-black);
box-shadow: 0 4px 6px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 4%);
&::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--padding-base) * -4);
inline-size: 6px;
block-size: 28px;
border-radius: 0 8px 8px 0;
background: var(--color-teal-500);
}
}
}
.nav-spacer { flex: 1; }
.editor-nav .site-footer {
padding-inline: 0;
}
.preview {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
min-block-size: 0;
overflow: auto;
background: var(--color-neutral-100);
}
.preview-frame {
flex: none;
inline-size: 100%;
min-block-size: 100%;
max-inline-size: 100%;
display: flex;
flex-direction: column;
background-color: var(--page-bg, var(--color-white));
box-shadow: 0 0 0 0 transparent;
transition: max-inline-size 400ms ease, box-shadow 400ms ease;
}
.preview-tablet .preview-frame,
.preview-mobile .preview-frame { box-shadow: var(--shadow-editor); }
.preview-tablet .preview-frame { max-inline-size: 800px; }
.preview-mobile .preview-frame { max-inline-size: 420px; }
@media (prefers-reduced-motion: reduce) {
.preview-frame { transition: none; }
}
.editor-shell:not(.closed) .preview-frame.themed .section-editor {
color: var(--color-black);
font-family: "Inter", sans-serif;
}
.editor-loading {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 12);
color: var(--color-neutral-500);
}
.page-view.editing {
.banner, .avatar { position: relative; }
.avatar { overflow: clip; }
.name-field {
position: relative;
isolation: isolate;
display: flex;
max-inline-size: 420px;
&::before {
content: "";
position: absolute;
inset: calc(var(--padding-base) * -1) calc(var(--padding-base) * -2);
z-index: -1;
border: 1px solid var(--page-line, var(--color-neutral-300));
border-radius: calc(var(--radius-base) * 2);
background: var(--page-bg, var(--color-white));
transition: border-color 150ms, box-shadow 150ms, opacity 250ms;
}
&:focus-within::before {
border-color: var(--color-teal-500);
box-shadow: 0 0 0 1px var(--color-teal-500);
}
}
.name-input {
flex: 1;
min-inline-size: 0;
block-size: 24px;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: inherit;
text-align: inherit;
outline: none;
}
.avatar-initial { pointer-events: none; }
}
.image-upload {
position: absolute;
inset: 0;
display: flex;
}
.image-upload[data-variant="button"] { position: static; }
.image-upload-trigger {
flex: 1;
position: relative;
display: grid;
place-items: center;
border: 0;
border-radius: inherit;
background: hsl(from var(--color-white) h s l / 70%);
color: var(--color-black);
font-size: 20px;
opacity: 0;
cursor: pointer;
transition: opacity 200ms;
&:hover, &:focus-visible { opacity: 1; }
}
.crop-modal {
--ti-modal-width: 56rem;
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-align: start;
color: var(--color-black);
cursor: auto;
}
.crop-stage {
display: flex;
gap: calc(var(--gap-base) * 4);
@media (width < 720px) { flex-direction: column; }
}
.crop-area {
flex: 1;
min-inline-size: 0;
block-size: clamp(240px, 100dvb - 380px, 480px);
display: flex;
border-radius: calc(var(--radius-base) * 3);
background: var(--color-neutral-900);
overflow: hidden;
cropper-canvas { flex: 1; }
}
.crop-side {
flex: none;
inline-size: 220px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
@media (width < 720px) { inline-size: auto; flex-direction: row; align-items: flex-end; }
}
.crop-preview-wrap {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
}
.crop-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-neutral-500);
}
.crop-preview {
display: flex;
overflow: hidden;
border-radius: calc(var(--radius-base) * 4);
background: var(--color-neutral-100);
box-shadow: var(--shadow-editor);
cropper-viewer { flex: 1; }
}
.crop-banner .crop-preview { inline-size: 220px; aspect-ratio: 976 / 280; }
.crop-image .crop-preview { inline-size: 160px; aspect-ratio: 1; }
.crop-zoom {
display: flex;
gap: calc(var(--gap-base) * 2);
}
.crop-tool {
inline-size: 40px;
block-size: 40px;
display: grid;
place-items: center;
border: 1px solid var(--color-neutral-200);
border-radius: calc(var(--radius-base) * 2);
background: var(--color-white);
color: var(--color-neutral-700);
cursor: pointer;
&:hover { background: var(--color-neutral-100); color: var(--color-black); }
}
.crop-problem {
color: var(--color-error);
font-size: 0.875rem;
}
.page-view.editing .editor-sections {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
}
.section-editor {
container-name: section;
container-type: inline-size;
display: flex;
flex-direction: column;
border: 2px solid var(--color-slate-800);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
overflow: clip;
color-scheme: light;
&:has(.ProseMirror-focused) {
outline: 2px solid var(--color-teal-500);
outline-offset: 4px;
}
}
.section-ghost { opacity: 0.4; }
.section-head {
display: flex;
align-items: stretch;
background: var(--color-slate-800);
color: var(--color-white);
}
.section-type {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 1.5);
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 3);
white-space: nowrap;
font-size: 1rem;
line-height: 24px;
b { font-weight: 800; }
}
.drag-handle {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
&:active { cursor: grabbing; }
}
.section-actions {
display: flex;
align-items: center;
gap: var(--gap-base);
padding-inline: calc(var(--padding-base) * 2);
}
.icon-button {
inline-size: 32px;
aspect-ratio: 1;
display: grid;
place-items: center;
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: transparent;
color: inherit;
cursor: pointer;
&:hover { background: hsl(from currentColor h s l / 12%); }
&:disabled { opacity: 0.35; cursor: default; background: transparent; }
&.active { background: var(--color-teal-500); color: var(--color-white); }
}
.action-separator {
inline-size: 1px;
block-size: 18px;
background: currentColor;
opacity: 0.3;
}
.section-body {
display: flex;
flex-direction: column;
padding: calc(var(--padding-base) * 4);
}
.text-section {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
}
.links-section {
display: flex;
flex-direction: column;
> :is(.links-hint, .editor-links) { padding-block-start: calc(var(--padding-base) * 4); }
}
.section-title-input {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 3);
border: 0;
border-radius: calc(var(--radius-base) * 2);
box-shadow: inset 0 0 0 1px var(--color-neutral-300);
font-size: 24px;
font-weight: 700;
line-height: 32px;
&:focus-visible {
outline: 2px solid var(--color-teal-500);
outline-offset: -1px;
}
}
.rich-text-editor {
display: flex;
flex-direction: column;
}
.rich-text.editor-surface { padding-block: 0; }
.editor-surface .ProseMirror {
min-block-size: 48px;
padding: calc(var(--padding-base) * 4) calc(var(--padding-base) * 3);
line-height: 1.5;
border: 0;
border-radius: calc(var(--radius-base) * 2);
box-shadow: inset 0 0 0 1px var(--color-neutral-300);
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
p { line-height: 1; }
&.ProseMirror-focused {
outline: 2px solid var(--color-teal-500);
outline-offset: -2px;
}
p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: inline-start;
block-size: 0;
color: var(--color-neutral-400);
pointer-events: none;
}
.timestamp.ProseMirror-selectednode {
outline: 2px solid var(--color-teal-500);
}
}
.editor-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 5) calc(var(--padding-base) * 2) var(--padding-base);
color: var(--color-neutral-700);
.icon-button {
inline-size: 68px;
block-size: 32px;
font-size: 1rem;
&.active { background: var(--color-slate-900); color: var(--color-white); }
}
.action-separator {
block-size: 16px;
background: var(--color-neutral-200);
opacity: 1;
}
}
.toolbar-select {
position: relative;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
block-size: 32px;
padding-inline: calc(var(--padding-base) * 2);
border-radius: calc(var(--radius-base) * 2);
cursor: pointer;
&:hover { background: hsl(from currentColor h s l / 12%); }
&:focus-within { outline: 2px solid var(--color-teal-500); outline-offset: -2px; }
.toolbar-chevron { font-size: 0.75rem; pointer-events: none; }
select {
field-sizing: content;
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 0.875rem;
color: inherit;
cursor: pointer;
outline: none;
}
}
.toolbar-colour {
position: relative;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
block-size: 32px;
padding-inline: calc(var(--padding-base) * 6);
border-radius: calc(var(--radius-base) * 2);
cursor: pointer;
&:hover { background: hsl(from currentColor h s l / 12%); }
&:focus-within { outline: 2px solid var(--color-teal-500); outline-offset: -2px; }
.fa-chevron-down { font-size: 0.75rem; }
input {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
opacity: 0;
cursor: pointer;
}
}
.toolbar-swatch {
inline-size: 14px;
aspect-ratio: 1;
border-radius: 50%;
background: currentColor;
outline: 1px solid var(--color-neutral-500);
outline-offset: 1px;
}
.toolbar-info {
display: grid;
place-items: center;
inline-size: 32px;
block-size: 32px;
border-radius: calc(var(--radius-base) * 2);
color: var(--color-neutral-500);
cursor: help;
&:focus-visible { outline: 2px solid var(--color-teal-500); }
}
.links-hint {
display: flex;
align-items: center;
gap: var(--gap-base);
color: var(--color-neutral-500);
opacity: 0.75;
}
.editor-links {
li { cursor: grab; }
button.link {
inline-size: 100%;
padding-block: 0;
padding-inline-end: 0;
font: inherit;
&.no-icon { padding-inline-start: 0; }
cursor: pointer;
&.active {
outline: 4px solid var(--color-teal-500);
outline-offset: 2px;
}
}
}
.links-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 4);
padding: calc(var(--padding-base) * 5) calc(var(--padding-base) * 2) var(--padding-base);
}
.add-link {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 6);
border: 0;
background: transparent;
font: inherit;
font-weight: 700;
line-height: 24px;
color: var(--color-black);
cursor: pointer;
transition: color 150ms;
&:hover { color: var(--color-neutral-600); }
}
.link-fields {
display: flex;
flex: 1;
justify-content: flex-end;
align-items: center;
gap: calc(var(--gap-base) * 4);
> tibi-ti-input { inline-size: 200px; min-inline-size: 0; }
> tibi-ti-select-menu { inline-size: 128px; min-inline-size: 0; }
}
.add-section-row {
display: flex;
justify-content: center;
padding-block: calc(var(--padding-base) * 4) calc(var(--padding-base) * 8);
}
.add-section {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 5);
border: 1px dashed var(--color-neutral-400);
border-radius: calc(var(--radius-base) * 3);
background: transparent;
font-weight: 600;
cursor: pointer;
&:hover { border-color: var(--color-teal-500); color: var(--color-teal-600); }
}
.editor-panel {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
padding: calc(var(--padding-base) * 8);
overflow-y: auto;
}
.panel-card {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 5);
inline-size: 100%;
max-inline-size: 720px;
padding: calc(var(--padding-base) * 6);
border: 1px solid var(--color-neutral-200);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
}
.branding-layout {
display: grid;
grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
align-items: start;
gap: calc(var(--gap-base) * 8);
@container editor-main (width <= 1000px) { grid-template-columns: minmax(0, 1fr); }
}
.branding-forms {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
}
.look-group {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
}
.look-row {
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap-base) * 6);
}
.media-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--gap-base) * 3);
}
.media-actions {
flex: 1 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
gap: calc(var(--gap-base) * 2);
}
.media-thumb {
flex: none;
display: grid;
place-items: center;
block-size: 56px;
border-radius: calc(var(--radius-base) * 2);
background-color: var(--color-neutral-100);
background-position: center;
background-size: cover;
outline: 1px solid var(--color-neutral-200);
font-family: "Outfit", sans-serif;
font-size: 1.75rem;
color: var(--color-slate-300);
}
.media-avatar { inline-size: 56px; }
.media-banner { inline-size: 196px; aspect-ratio: 976 / 280; block-size: auto; }
.media-text {
flex: 1 1 160px;
min-inline-size: 0;
display: flex;
flex-direction: column;
}
.look-label { font-size: 0.875rem; font-weight: 600; color: var(--color-neutral-700); }
.look-hint { font-size: 0.8125rem; color: var(--color-neutral-500); }
.preset-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: calc(var(--gap-base) * 2);
}
.preset {
display: flex;
flex-direction: column;
align-items: stretch;
gap: calc(var(--gap-base) * 1.5);
padding: calc(var(--padding-base) * 1.5);
border: 1px solid var(--color-neutral-200);
border-radius: calc(var(--radius-base) * 3);
background: var(--color-white);
cursor: pointer;
transition: border-color 150ms, box-shadow 150ms;
&:hover { border-color: var(--color-neutral-400); }
&.active { border-color: var(--color-teal-500); box-shadow: 0 0 0 1px var(--color-teal-500); }
}
.preset-swatch {
block-size: 44px;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 1.5);
padding-inline: calc(var(--padding-base) * 2);
border-radius: calc(var(--radius-base) * 2);
background: var(--preset-bg);
outline: 1px solid hsl(0 0% 0% / 6%);
}
.preset-dot { inline-size: 16px; aspect-ratio: 1; border-radius: 50%; background: var(--preset-accent); opacity: 0.5; }
.preset-bar { flex: 1; block-size: 10px; border-radius: 99px; background: var(--preset-accent); }
.preset-name { font-size: 0.8125rem; font-weight: 700; color: var(--color-neutral-800); }
.swatch-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--gap-base) * 2);
}
.swatch {
inline-size: 28px;
aspect-ratio: 1;
border: 0;
border-radius: 50%;
background: var(--swatch);
box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 12%);
cursor: pointer;
&.active { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-neutral-800); }
&.swatch-default { background: linear-gradient(135deg, var(--color-slate-900) 50%, var(--color-brand) 50%); }
}
.choice-group {
display: flex;
flex-wrap: wrap;
gap: var(--gap-base);
padding: var(--padding-base);
inline-size: fit-content;
max-inline-size: 100%;
border-radius: calc(var(--radius-base) * 3);
background: var(--color-neutral-100);
}
.choice {
padding: calc(var(--padding-base) * 1.5) calc(var(--padding-base) * 3);
border: 0;
border-radius: calc(var(--radius-base) * 2);
background: transparent;
color: var(--color-neutral-700);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
&:hover { color: var(--color-black); }
&.active { background: var(--color-white); color: var(--color-black); box-shadow: var(--shadow-editor); }
}
.look-pane {
position: sticky;
inset-block-start: 0;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 3);
min-inline-size: 0;
}
.look-pane-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.look-window {
display: flex;
justify-content: center;
padding: calc(var(--padding-base) * 3);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-neutral-100);
overflow: hidden;
}
.look-preview {
flex: none;
border-radius: calc(var(--radius-base) * 3);
box-shadow: var(--shadow-editor);
pointer-events: none;
user-select: none;
}
.panel-title {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-neutral-700);
}
.panel-note {
font-size: 0.9375rem;
color: var(--color-neutral-600);
a { color: var(--color-teal-600); }
}
.tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 1.5);
border: 1px solid var(--color-neutral-300);
border-radius: calc(var(--radius-base) * 2);
&:focus-within { outline: 2px solid var(--color-teal-500); outline-offset: -1px; }
input {
flex: 1;
min-inline-size: 120px;
border: 0;
padding: var(--padding-base);
outline: none;
}
}
.tag {
display: inline-flex;
align-items: center;
gap: var(--gap-base);
padding: var(--padding-base) calc(var(--padding-base) * 1.5) var(--padding-base) calc(var(--padding-base) * 3);
border-radius: 100dvi;
background: var(--color-surface-2);
font-size: 0.875rem;
}
.tag-remove {
display: grid;
place-items: center;
inline-size: 20px;
aspect-ratio: 1;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
&:hover { background: var(--color-surface-3); }
}
.preview-controls { pointer-events: none; }
.settings-layout {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
align-items: start;
gap: calc(var(--gap-base) * 8);
padding: calc(var(--padding-base) * 8);
overflow-y: auto;
.panel-card { max-inline-size: none; }
@container editor-main (width <= 900px) { grid-template-columns: 1fr; }
}
.settings-title { color: var(--color-gray-600); font-size: 1.125rem; font-weight: 600; }
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 6);
}
.settings-text {
display: flex;
flex-direction: column;
gap: var(--gap-base);
h3 { font-weight: 700; }
p { font-size: 0.9375rem; color: var(--color-neutral-600); }
}
.page-address {
font-family: ui-monospace, monospace;
font-size: 0.9375rem;
color: var(--color-teal-600);
word-break: break-all;
}
.settings-link {
display: inline-flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
color: var(--color-teal-600);
font-weight: 600;
text-decoration: none;
&:hover { text-decoration: underline; }
}
.danger-panel .danger-item {
flex-direction: column;
align-items: flex-start;
gap: calc(var(--gap-base) * 2);
tibi-ti-button, tibi-ti-modal { display: flex; }
}
.danger-zone {
--ti-warning: oklch(76.9% 0.188 70.08);
--ti-error: oklch(63.7% 0.237 25.331);
border-color: oklch(63.7% 0.237 25.331);
background: oklch(93.6% 0.032 17.717);
.panel-title { color: var(--ti-error); font-size: 1.125rem; font-weight: 600; }
}
.danger-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 6);
}
.danger-text {
display: flex;
flex-direction: column;
gap: var(--gap-base);
h3 { font-weight: 700; }
p { font-size: 0.9375rem; color: var(--color-neutral-600); }
}
@container editor-main (width <= 700px) {
.editor-panel { padding: calc(var(--padding-base) * 4); }
.danger-item { flex-direction: column; align-items: flex-start; }
}
}
@layer components {
.marketing {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--gap-base) * 24);
padding-block-end: calc(var(--padding-base) * 24);
overflow-x: clip;
> * {
inline-size: 100%;
max-inline-size: 1280px;
padding-inline: calc(var(--padding-base) * 8);
}
}
.marketing > tibi-marketing-header { display: contents; }
.marketing .marketing-header {
max-inline-size: none;
inline-size: calc(100% - 80px);
padding-inline: calc(var(--padding-base) * 10);
@media (width < 1024px) { inline-size: 100%; padding-inline: calc(var(--padding-base) * 2); }
}
.marketing-header {
position: sticky;
inset-block-start: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
min-block-size: 80px;
border-radius: 0 0 calc(var(--radius-base) * 8) calc(var(--radius-base) * 8);
background: hsl(from var(--color-page-background) h s l / 80%);
backdrop-filter: blur(16px);
}
.user-button {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
padding: var(--padding-base) calc(var(--padding-base) * 3) var(--padding-base) var(--padding-base);
border: 1px solid var(--color-slate-300);
border-radius: 999px;
background: hsl(from var(--color-white) h s l / 70%);
color: var(--color-slate-800);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
cursor: pointer;
transition: background 150ms, border-color 150ms, box-shadow 150ms;
&:hover { background: var(--color-white); border-color: var(--color-teal-300); box-shadow: var(--shadow-elevation-2); }
&:focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }
}
.user-avatar {
flex: none;
inline-size: 28px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
}
.user-initial {
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--color-teal-400), var(--color-teal-600));
color: var(--color-white);
font-size: 0.75rem;
font-weight: 700;
}
.user-name {
max-inline-size: 14ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-chevron { font-size: 0.625rem; color: var(--color-slate-500); }
@media (width < 640px) {
.user-button { padding: var(--padding-base); }
.user-name, .user-chevron { display: none; }
}
.edit-corner {
flex: none;
inline-size: 80px;
block-size: 80px;
display: grid;
grid-template-columns: 5px 1fr 1fr;
grid-template-rows: 5px 1fr 1fr;
grid-template-areas:
". . ."
". icon ."
". . .";
place-items: center;
background: linear-gradient(to bottom right, var(--color-teal-600), var(--color-teal-500) 50%, transparent 50%);
clip-path: path("M51.029,0L12,0C5.373,0 0,5.373 0,12L0,51.029C0,61.72 12.926,67.074 20.485,59.515L59.515,20.485C67.074,12.926 61.72,0 51.029,0Z");
color: var(--color-white);
text-decoration: none;
transition: background 200ms;
i { grid-area: icon; }
&:hover { background: linear-gradient(to bottom right, var(--color-teal-600), var(--color-teal-600) 50%, transparent 50%); }
}
.page-view > .edit-corner {
position: absolute;
inset-block-start: calc(var(--padding-base) * 4);
inset-inline-start: calc(var(--padding-base) * 4);
z-index: 20;
}
.marketing-logo {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 4);
text-decoration: none;
--logo-scale: 1.2;
.fa-tofee { font-size: 2.25rem; color: var(--color-teal-500); }
}
.marketing-nav {
min-block-size: 80px;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 8);
}
.nav-link, .nav-cta, .nav-solid {
font-size: 0.875rem;
line-height: 1.25rem;
text-decoration: none;
white-space: nowrap;
}
.nav-link {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 6);
border-radius: 4px;
color: var(--color-slate-800);
font-weight: 700;
}
.nav-cta {
padding: var(--padding-base) calc(var(--padding-base) * 5.5);
border: 2px solid var(--color-teal-500);
border-radius: 4px;
box-shadow: var(--shadow-beta-glow);
color: var(--color-slate-800);
font-weight: 700;
&:hover { background: var(--color-teal-50); }
}
.nav-solid {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 4);
border-radius: 6px;
background: var(--color-slate-900);
color: var(--color-white);
font-weight: 500;
}
.marketing:has(> .home-grid) { gap: calc(var(--gap-base) * 2); padding-block-end: 0; }
.marketing > .home-grid {
--_gap-x: calc(var(--gap-base) * 8);
--_gap-y: calc(var(--gap-base) * 16);
--_breakout: calc(80px - var(--_gap-x));
max-inline-size: none;
padding-inline: 0;
display: grid;
grid-template-columns: [breakout-start] var(--_breakout) [main-start] repeat(12, 1fr) [main-end] var(--_breakout) [breakout-end];
gap: var(--_gap-y) var(--_gap-x);
> * { grid-column: main-start / main-end; min-inline-size: 0; }
> .breakout { grid-column: breakout-start / breakout-end; }
> .breakout-end { grid-column: main-start / breakout-end; }
}
.goo-defs { position: absolute; inline-size: 0; block-size: 0; }
.hero {
container-type: inline-size;
min-block-size: 700px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 16);
pointer-events: none;
@media (width >= 1280px) { flex-direction: row; gap: calc(var(--gap-base) * 4); }
}
.hero-text {
flex: none;
max-inline-size: 600px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 16);
pointer-events: auto;
h1 {
font-size: 3rem;
line-height: 1;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.accent { color: var(--color-teal-500); }
}
.hero-lead {
font-size: 28px;
font-weight: 300;
line-height: 1.25;
color: var(--color-slate-800);
text-wrap: balance;
}
.hero-actions { display: flex; align-items: center; gap: calc(var(--gap-base) * 4); }
.hero-cta {
padding: 10px 30px;
border: 2px solid var(--color-teal-500);
border-radius: 4px;
box-shadow: var(--shadow-beta-glow);
color: var(--color-slate-800);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.75rem;
text-decoration: none;
pointer-events: auto;
&:hover { background: var(--color-teal-50); }
}
.hero-art {
position: relative;
flex: none;
inline-size: min(100%, 935px);
aspect-ratio: 935 / 599;
@media (width >= 1280px) { inline-size: min(935px, calc(100cqi - 616px)); }
img { position: absolute; max-inline-size: none; }
.art-blob { inset-block-start: -18.7%; inset-inline-start: 34.2%; inline-size: 65.8%; block-size: 100%; }
.art-shadows { inset-block-start: 14.7%; inset-inline-start: 0; inline-size: 79.1%; block-size: 100%; }
.art-desktop { inset-block-start: 6.7%; inset-inline-start: 7.7%; inline-size: 56.1%; }
.art-tablet { inset-block-end: 12%; inset-inline-end: 20.9%; block-size: 67.2%; animation: float-tablet 6s ease-in-out infinite; }
.art-mobile { inset-block-end: 5.3%; inset-inline-start: 0; block-size: 59.4%; animation: float-mobile 7s ease-in-out infinite; }
}
@keyframes float-tablet {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(0.5deg); }
}
@keyframes float-mobile {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-0.3deg); }
}
.promo-cards {
justify-self: start;
display: flex;
gap: calc(var(--gap-base) * 8);
}
.promo-card {
flex: none;
inline-size: 368px;
block-size: 480px;
display: flex;
align-items: flex-end;
padding: calc(var(--padding-base) * 8) calc(var(--padding-base) * 3);
border-radius: 24px;
background: var(--color-teal-300);
box-shadow: var(--shadow-elevation-2);
&.promo-wide {
inline-size: 716px;
padding-inline: calc(var(--padding-base) * 20);
border-radius: 0 24px 24px 0;
}
}
.promo-label {
position: relative;
.goo {
display: flex;
flex-direction: column;
filter: url(#schlurp);
span { display: block; inline-size: var(--w); block-size: var(--h); background: var(--color-white); }
}
p {
position: absolute;
inset-block-start: calc(var(--padding-base) * 4);
inset-inline-start: calc(var(--padding-base) * 4);
font-size: 28px;
font-weight: 300;
line-height: 1.25;
color: var(--color-slate-800);
white-space: nowrap;
}
}
.features {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--gap-base) * 8);
> h2 {
font-size: 1.875rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: -0.05em;
text-align: center;
}
}
.feature-row {
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--gap-base) * 6);
inline-size: 100%;
}
.feature {
flex: 0 1 336px;
min-inline-size: 0;
align-self: stretch;
min-block-size: 328px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
padding: calc(var(--padding-base) * 8) calc(var(--padding-base) * 6);
border-radius: 16px;
background: var(--color-white);
box-shadow: var(--shadow-elevation-2);
p { font-size: 1.25rem; font-weight: 300; line-height: 1.25; }
}
.feature-head {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 2);
h3 {
font-size: 2.25rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.05em;
color: var(--color-pink-500);
}
h4 {
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.05em;
color: var(--color-gray-600);
}
}
.privacy {
inline-size: 100%;
max-inline-size: 1280px;
justify-self: center;
display: flex;
gap: 100px;
}
.privacy-text {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
font-weight: 300;
line-height: 1.25;
h2 { font-size: 1.875rem; font-weight: 300; letter-spacing: -0.05em; }
p { font-size: 1.25rem; }
.privacy-note { font-size: 1rem; }
}
.privacy-list {
flex: 0 1 512px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
padding: 0;
list-style: none;
li {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 6);
padding-block: calc(var(--padding-base) * 3);
font-size: 1.25rem;
line-height: 1.75rem;
}
i { inline-size: 32px; font-size: 2rem; text-align: center; }
}
.home-spacer { block-size: 100px; }
.landing-footer-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap-base) * 4);
padding: calc(var(--padding-base) * 4) calc(var(--padding-base) * 20);
background: var(--color-gray-300);
.lfb-brand { display: flex; align-items: baseline; gap: calc(var(--gap-base) * 2); color: var(--color-slate-500); }
.lfb-logo { text-decoration: none; }
}
.marketing-footer {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 8);
color: var(--color-gray-900);
@media (width >= 1024px) { flex-direction: row; }
}
.mf-brand {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
--logo-scale: 1.5;
.mf-intro { display: flex; flex-direction: column; gap: calc(var(--gap-base) * 2); }
p { max-inline-size: 24rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-gray-600); }
}
.mf-socials {
display: flex;
gap: calc(var(--gap-base) * 4);
font-size: 1.25rem;
a { color: var(--color-gray-600); }
a:hover { color: var(--color-gray-900); }
}
.mf-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(var(--gap-base) * 8);
@media (width >= 640px) { grid-template-columns: repeat(4, 1fr); }
@media (width >= 1024px) { display: flex; gap: calc(var(--gap-base) * 8); }
}
.mf-column {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
@media (width >= 1024px) { flex: none; inline-size: 200px; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.5rem; }
ul { display: flex; flex-direction: column; gap: calc(var(--gap-base) * 2); padding: 0; list-style: none; }
a {
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-gray-600);
text-decoration: none;
&:hover { color: var(--color-gray-900); text-decoration: underline; }
}
}
.about {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
max-inline-size: 720px;
h1 { font-size: 2.5rem; font-weight: 700; }
p { font-size: 1.25rem; font-weight: 300; }
}
@media (width <= 1000px) {
.privacy { flex-direction: column; gap: calc(var(--gap-base) * 12); }
.privacy-list { flex: none; }
.feature-row { flex-wrap: wrap; }
.feature { flex: 1 1 280px; }
.marketing-nav .nav-link { display: none; }
}
@media (width <= 640px) {
.marketing > .home-grid { --_breakout: 0px; --_gap-x: calc(var(--gap-base) * 4); }
.hero-text h1 { font-size: 2.25rem; }
.hero-lead { font-size: 22px; }
.promo-cards { flex-direction: column; justify-self: stretch; }
.promo-card, .promo-card.promo-wide { inline-size: auto; block-size: 320px; padding-inline: calc(var(--padding-base) * 3); border-radius: 24px; }
.promo-label p { font-size: 22px; white-space: normal; }
.promo-label .goo { display: none; }
.promo-label p { position: static; padding: calc(var(--padding-base) * 3) calc(var(--padding-base) * 4); border-radius: 16px; background: var(--color-white); }
.landing-footer-bar { flex-wrap: wrap; padding-inline: calc(var(--padding-base) * 4); }
}
.dash {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--gap-base) * 8);
padding: calc(var(--padding-base) * 6);
}
.dash-header {
inline-size: 100%;
max-inline-size: 1280px;
display: flex;
align-items: center;
justify-content: space-between;
.dash-logo { text-decoration: none; }
}
.dash-body {
inline-size: 100%;
max-inline-size: 720px;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
h1 { font-size: 2rem; font-weight: 700; }
}
.dash-pages {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 3);
}
.dash-page {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 4);
padding: calc(var(--padding-base) * 4);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
box-shadow: var(--shadow-elevation-2);
}
.dash-avatar {
flex: none;
display: grid;
place-items: center;
inline-size: 48px;
aspect-ratio: 1;
border-radius: calc(var(--radius-base) * 3);
background: var(--color-teal-100);
color: var(--color-teal-800);
font-family: "Outfit", sans-serif;
font-size: 1.5rem;
font-weight: 700;
}
.dash-name {
flex: 1;
font-size: 1.125rem;
font-weight: 700;
}
.dash-action {
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 4);
border: 1px solid var(--color-neutral-300);
border-radius: calc(var(--radius-base) * 2);
font-weight: 600;
text-decoration: none;
&.dash-primary {
border-color: var(--color-teal-500);
background: var(--color-teal-500);
color: var(--color-white);
}
}
.dash-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--gap-base) * 4);
padding: calc(var(--padding-base) * 8);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
box-shadow: var(--shadow-elevation-2);
h2 { font-size: 1.5rem; font-weight: 700; }
}
.create {
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 4);
h1 { font-size: 2rem; font-weight: 700; }
}
.create-lead { font-size: 1.125rem; }
.create-form {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--gap-base) * 2);
padding: calc(var(--padding-base) * 6);
border-radius: calc(var(--radius-base) * 4);
background: var(--color-white);
box-shadow: var(--shadow-elevation-2);
}
.create-label { font-weight: 600; }
.create-input {
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 2);
inline-size: min(100%, 420px);
padding: calc(var(--padding-base) * 2) calc(var(--padding-base) * 3);
border: 1px solid var(--color-neutral-300);
border-radius: calc(var(--radius-base) * 2);
font-size: 1.125rem;
&:focus-within { outline: 2px solid var(--color-teal-500); outline-offset: -1px; }
input { flex: 1; min-inline-size: 0; border: 0; outline: none; }
.create-ok { color: var(--color-success); }
.create-bad { color: var(--color-error); }
}
.create-message {
padding-block-end: calc(var(--padding-base) * 2);
font-size: 0.875rem;
color: var(--color-neutral-600);
&.bad { color: var(--color-error); }
}
.compact-shell {
align-items: center;
justify-content: center;
padding: calc(var(--padding-base) * 6);
background: var(--color-page-background);
}
.card-view, .ad-view {
container-name: page;
container-type: inline-size;
display: flex;
flex-direction: column;
gap: calc(var(--gap-base) * 6);
inline-size: min(100%, 720px);
padding: calc(var(--padding-base) * 6);
border-radius: calc(var(--radius-base) * 6);
background-color: var(--page-bg, var(--color-white));
box-shadow: var(--shadow-elevation-2);
}
@container page (width <= 900px) {
.user-section.compact .banner { block-size: 160px; }
}
.card-share {
align-self: center;
inline-size: min(100%, 384px);
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--gap-base) * 4);
}
.page-qr {
inline-size: fit-content;
padding: calc(var(--padding-base) * 2);
border: 8px solid var(--color-black);
border-radius: calc(var(--radius-base) * 5);
svg { display: block; }
}
.card-row {
inline-size: 100%;
display: flex;
align-items: center;
gap: calc(var(--gap-base) * 4);
}
.card-text {
flex: 1;
display: flex;
flex-direction: column;
h2 { font-size: 1.5rem; font-weight: 700; }
p { font-size: 1.125rem; }
}
.copy-link { display: flex; gap: calc(var(--gap-base) * 2); }
.ad-view {
.banner, .avatar { background-color: var(--color-teal-200); }
.ad-brand {
align-self: flex-end;
--logo-scale: 0.6;
}
> tibi-page-qr { align-self: center; }
}
}