/* =========================================================== Fufe design system =========================================================== */ :root { /* Type */ --font-display: "DM Serif Display", "Times New Roman", serif; --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist", ui-sans-serif, system-ui, sans-serif; --font-stamp: "JetBrains Mono", ui-monospace, monospace; --font-editorial: "Newsreader", "Georgia", serif; /* Dark surface (default) */ --ink: #0A0A0B; --ink-2: #131316; --ink-3: #1B1B1F; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --fg: #F2EFE9; --fg-2: rgba(242, 239, 233, 0.72); --fg-3: rgba(242, 239, 233, 0.45); /* Editorial paper (blog) */ --paper: #F4F1EA; --paper-2: #ECE7DC; --paper-ink: #18181B; --paper-ink-2: rgba(24, 24, 27, 0.66); --paper-line: rgba(24, 24, 27, 0.12); /* Accent — default vivid green; overridden by Tweaks */ --accent: oklch(0.84 0.19 145); --accent-ink: #0A0A0B; --accent-soft: oklch(0.84 0.19 145 / 0.16); /* Radii / spacing */ --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-xl: 28px; --shell-pad: clamp(20px, 4vw, 56px); --gutter: clamp(16px, 2vw, 28px); } /* Accent variants — set via [data-accent] on */ html[data-accent="orange"] { --accent: oklch(0.78 0.18 55); --accent-soft: oklch(0.78 0.18 55 / 0.18); } html[data-accent="coral"] { --accent: oklch(0.78 0.18 28); --accent-soft: oklch(0.78 0.18 28 / 0.18); } html[data-accent="green"] { --accent: oklch(0.84 0.19 145); --accent-soft: oklch(0.84 0.19 145 / 0.16); } html[data-accent="citrus"] { --accent: oklch(0.90 0.18 105); --accent-soft: oklch(0.90 0.18 105 / 0.18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font-sans); background: var(--ink); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; line-height: 1.55; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } img, svg, video { display: block; max-width: 100%; } /* ===================== Typography utilities ===================== */ .t-mono { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); } .t-stamp { font-family: var(--font-stamp); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-3); } .t-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 0.96; } .t-it { font-style: italic; } /* ===================== Layout primitives ===================== */ .shell { max-width: 1440px; margin: 0 auto; padding-left: var(--shell-pad); padding-right: var(--shell-pad); } .section { padding-top: clamp(72px, 10vw, 160px); padding-bottom: clamp(72px, 10vw, 160px); position: relative; } /* Alternating section rhythm — subtle bands so adjacent sections read distinctly */ main > .section + .section { border-top: 1px solid color-mix(in oklab, var(--line) 80%, transparent); } main > .section:nth-of-type(even):not(.hero) { background: linear-gradient(180deg, color-mix(in oklab, var(--ink-2) 90%, var(--ink)) 0%, color-mix(in oklab, var(--ink-2) 30%, var(--ink)) 38%, var(--ink) 78%); } main > .section:nth-of-type(odd):not(.hero)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 280px; pointer-events: none; background: radial-gradient(ellipse 1200px 320px at 50% 0%, color-mix(in oklab, var(--accent) 5%, transparent) 0%, transparent 70%); } main > .section:nth-of-type(odd):not(.hero) { background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink-2) 12%, var(--ink)) 50%, var(--ink) 100%); } /* Ensure section content sits above the ::before glow */ main > .section > * { position: relative; z-index: 1; } .divider { height: 1px; background: var(--line); width: 100%; } /* ===================== Buttons ===================== */ .btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: 0.005em; border: 1px solid transparent; transition: transform 160ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { filter: brightness(1.05); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); } .btn-secondary:hover { border-color: var(--fg); } .btn-ghost { background: transparent; color: var(--fg); } .btn-ghost:hover { color: var(--accent); } .btn-paper { background: var(--paper-ink); color: var(--paper); } .btn-paper-ghost { background: transparent; color: var(--paper-ink); border-color: var(--paper-line); } .btn-sm { height: 38px; padding: 0 16px; font-size: 13px; } .btn-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; font-weight: 500; } .btn-arrow .arrow { transition: transform 200ms ease; display: inline-block; } .btn-arrow:hover .arrow { transform: translateX(4px); } /* ===================== Header ===================== */ .header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--ink) 78%, transparent); border-bottom: 1px solid var(--line); } .header.is-paper { background: color-mix(in oklab, var(--paper) 88%, transparent); border-bottom-color: var(--paper-line); color: var(--paper-ink); } .header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; } .brand-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-size: 14px; color: var(--fg-2); transition: color 160ms ease; position: relative; padding: 6px 0; } .nav a:hover, .nav a.is-active { color: var(--fg); } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); } .header.is-paper .nav a { color: var(--paper-ink-2); } .header.is-paper .nav a:hover, .header.is-paper .nav a.is-active { color: var(--paper-ink); } .menu-btn { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); align-items: center; justify-content: center; } /* Mobile menu */ .mobile-menu { position: fixed; inset: 72px 0 0 0; z-index: 49; background: var(--ink); padding: 32px var(--shell-pad); display: flex; flex-direction: column; gap: 8px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 220ms ease, opacity 220ms ease; } .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em; padding: 12px 0; border-bottom: 1px solid var(--line); } .mobile-menu a:last-of-type { border-bottom: none; } .mobile-menu .btn { margin-top: 24px; align-self: flex-start; } /* ===================== Hero ===================== */ .hero { position: relative; padding-top: 56px; padding-bottom: clamp(60px, 8vw, 120px); } .hero-grid { display: grid; gap: 32px; grid-template-columns: 1fr; } .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); } .hero-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7.8vw, 116px); line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 28px; } .hero-headline em { font-style: italic; color: var(--accent); } .hero-sub { max-width: 540px; font-size: clamp(15px, 1.3vw, 18px); color: var(--fg-2); line-height: 1.55; margin: 0 0 36px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero-meta { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 32px; margin-top: 40px; border-top: 1px solid var(--line); } .hero-meta .item { display: flex; flex-direction: column; gap: 6px; } .hero-meta .num { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; } /* Hero media — striped video placeholder */ .media-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); isolation: isolate; } .media-frame.is-video::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.022) 0, rgba(255,255,255,0.022) 2px, transparent 2px, transparent 14px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05), transparent 60%), radial-gradient(ellipse at 70% 80%, var(--accent-soft), transparent 60%); } .media-frame .mono-tag { position: absolute; left: 16px; top: 16px; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; color: var(--fg-2); background: rgba(0,0,0,0.45); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); backdrop-filter: blur(6px); } .media-frame .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; border: none; transition: transform 220ms ease; } .media-frame .play-btn:hover { transform: translate(-50%, -50%) scale(1.06); } .media-frame .duration { position: absolute; right: 14px; bottom: 14px; font-family: var(--font-stamp); font-size: 11px; background: rgba(0,0,0,0.55); padding: 5px 9px; border-radius: 6px; } .hero-media { aspect-ratio: 16 / 10; margin-top: 64px; } .hero-media .ticker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 48px; padding: 14px 20px; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; overflow: hidden; } /* ===================== Section heading ===================== */ .section-head { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 32px; align-items: end; margin-bottom: 56px; } .section-head .label { padding-top: 6px; } .section-head .label .t-mono { color: var(--accent); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; } .section-head .label .t-mono::before { content: ""; display: inline-block; width: 18px; height: 1px; vertical-align: middle; background: currentColor; margin-right: 12px; transform: translateY(-2px); } .section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.022em; line-height: 1.05; margin: 0; max-width: 900px; } .section-head h2 em { font-style: italic; color: var(--accent); } .section-head .lede { margin-top: 22px; max-width: 580px; color: var(--fg-2); font-size: 16px; } /* ===================== "Who this is for" — split cards ===================== */ .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .audience-card { background: var(--ink); padding: clamp(28px, 3.5vw, 56px); display: flex; flex-direction: column; gap: 22px; min-height: 360px; } .audience-card .ix { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.15em; } .audience-card h3 { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 400; letter-spacing: -0.015em; margin: 0; line-height: 1.05; } .audience-card h3 em { font-style: italic; color: var(--accent); } .audience-card ul { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 10px; } .audience-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--fg-2); } .audience-card li::before { content: "—"; color: var(--accent); flex-shrink: 0; } /* ===================== Flow Method — 5-step ===================== */ .method-rail { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); } .step { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 22px 24px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 60%); transition: border-color 200ms ease, transform 200ms ease; min-height: 280px; } .step:hover { border-color: var(--line-strong); transform: translateY(-2px); } .step .num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.12em; } .step .glyph { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; color: var(--accent); } .step h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; margin: 0; line-height: 1.15; } .step p { color: var(--fg-2); font-size: 13.5px; margin: 0; line-height: 1.55; } .step .tag { margin-top: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.15em; text-transform: uppercase; } .method-progress { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; } .method-progress .bar { flex: 1; height: 1px; background: var(--line); position: relative; } .method-progress .bar::before { content: ""; position: absolute; left: 0; top: -1px; width: 22%; height: 3px; background: var(--accent); } /* ===================== Find Your Flow — product cards ===================== */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .product-card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; transition: transform 220ms ease, border-color 220ms ease; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; width: 100%; } .product-card:hover { transform: translateY(-3px); border-color: var(--line-strong); } .product-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Featured / most-chosen treatment */ .product-card.is-featured { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent) inset, 0 24px 60px -28px color-mix(in oklab, var(--accent) 50%, transparent), 0 4px 24px -8px rgba(0,0,0,0.5); } .product-card.is-featured:hover { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent) inset, 0 32px 70px -28px color-mix(in oklab, var(--accent) 65%, transparent), 0 6px 28px -8px rgba(0,0,0,0.55); } .product-card.is-featured .head::before { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 11px), radial-gradient(ellipse at 70% 30%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%); } .featured-flag { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 14px -2px color-mix(in oklab, var(--accent) 45%, transparent); } .featured-flag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-ink); } .card-link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--fg); font-size: 13px; font-weight: 500; transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; } .product-card:hover .card-link { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .product-card:hover .card-link::after, .product-card:hover .card-link .arrow { transform: translateX(2px); } .card-link::after { content: ""; } .product-card .head { position: relative; aspect-ratio: 4 / 3; background: var(--ink-3); } .product-card .head::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 11px), radial-gradient(ellipse at 70% 30%, var(--accent-soft), transparent 55%); } .product-card .head .index { position: absolute; left: 18px; top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--fg-3); } .product-card .head .label { position: absolute; right: 16px; top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--accent); border: 1px solid var(--accent); padding: 4px 9px; border-radius: 999px; } .product-card .head .title { position: absolute; left: 22px; right: 22px; bottom: 18px; font-family: var(--font-display); font-size: 30px; line-height: 1.04; letter-spacing: -0.015em; } .product-card .body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 18px; flex: 1; } .product-card .body > p { color: var(--fg-2); font-size: 14.5px; margin: 0; } .product-card .meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg-2); } .product-card .meta .row { display: flex; gap: 10px; align-items: baseline; } .product-card .meta .k { flex-shrink: 0; width: 78px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; } .product-card .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); } .product-card .foot { display: flex; align-items: center; justify-content: center; margin-top: auto; gap: 12px; padding-top: 6px; } /* ===================== Modal ===================== */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in oklab, var(--ink) 70%, transparent); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); animation: modalFade 220ms ease; } .modal-backdrop[hidden] { display: none; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .modal { position: relative; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); width: 100%; max-width: 720px; max-height: 88vh; overflow-y: auto; padding: clamp(28px, 4vw, 48px); animation: modalRise 320ms cubic-bezier(0.2, 0.8, 0.2, 1); scrollbar-width: thin; } .modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 999px; background: transparent; border: 1px solid var(--line-strong); color: var(--fg-2); display: flex; align-items: center; justify-content: center; transition: all 160ms ease; } .modal-close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: rotate(90deg); } .modal-head { padding-right: 48px; margin-bottom: 28px; } .modal-kicker { color: var(--accent); display: block; margin-bottom: 16px; } .modal-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.022em; line-height: 1.0; margin: 0 0 18px; } .modal-lede { font-family: var(--font-editorial); font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 60ch; } .modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .modal-block h5 { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .modal-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .modal-block li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--fg); line-height: 1.5; } .modal-block li::before { content: "—"; color: var(--accent); flex-shrink: 0; } .modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; flex-wrap: wrap; } .modal-note { color: var(--fg-3); font-size: 13px; max-width: 36ch; } @media (max-width: 720px) { .modal-body { grid-template-columns: 1fr; } .modal-foot { flex-direction: column; align-items: stretch; } .modal-foot .btn { width: 100%; justify-content: center; } } .product-card .price { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; } .product-card .price .from { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.15em; } /* ===================== Gallery grid ===================== */ .gallery-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; } .gallery-strip .right { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; } .gallery-strip .right > div { aspect-ratio: 16 / 10; } .tile { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); background-color: var(--ink-2); aspect-ratio: 16 / 11; background-size: cover; background-position: center center; transition: transform 220ms ease; } .tile:hover { transform: scale(1.005); } .tile::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 11px), radial-gradient(ellipse at var(--gx, 50%) var(--gy, 50%), var(--accent-soft), transparent 60%); } .tile .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid var(--line-strong); color: var(--fg); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background 200ms ease; } .tile:hover .play-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tile .caption { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; align-items: end; gap: 12px; } .tile .caption .name { font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); } .tile .caption .dur { font-family: var(--font-stamp); font-size: 10.5px; color: var(--fg-2); } /* ===================== Philosophy — five columns ===================== */ .philosophy-section { position: relative; } .philosophy-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .phil { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 24px 28px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 60%); transition: border-color 200ms ease, transform 200ms ease, background 200ms ease; min-height: 280px; } .phil:hover { border-color: var(--line-strong); transform: translateY(-2px); } .phil .n { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -0.025em; color: var(--accent); } .phil h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; margin: 0; color: var(--fg); } .phil p { color: var(--fg-2); font-size: 14px; margin: 0; line-height: 1.55; } /* ===================== Testimonials carousel ===================== */ .carousel { position: relative; } .carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; cursor: grab; user-select: none; } .carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track > .t-card { scroll-snap-align: start; min-height: 320px; } .carousel-track.is-dragging > .t-card { pointer-events: none; } .carousel-btn--side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--ink) 80%, transparent); backdrop-filter: blur(8px); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 180ms ease; } .carousel-btn--side:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-50%) scale(1.05); } .carousel-btn--side:disabled { opacity: 0.25; cursor: not-allowed; } .carousel-btn--left { left: -22px; } .carousel-btn--right { right: -22px; } @media (max-width: 1080px) { .carousel-track { grid-auto-columns: calc((100% - 14px) / 2); } .carousel-btn--left { left: 4px; } .carousel-btn--right { right: 4px; } } @media (max-width: 720px) { .carousel-track { grid-auto-columns: 88%; } } .t-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; background: var(--ink-2); display: flex; flex-direction: column; gap: 22px; min-height: 320px; } .t-card .q { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--fg); margin: 0; } .t-card .meta { display: flex; align-items: center; gap: 12px; margin-top: auto; } .t-card .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .t-card .who { display: flex; flex-direction: column; gap: 3px; } .t-card .who .n { font-size: 13px; } .t-card .who .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg-3); text-transform: uppercase; } .t-card.is-screenshot { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 11px), var(--ink-2); } .t-card.is-screenshot .q { font-family: var(--font-sans); font-style: normal; font-size: 15px; color: var(--fg); line-height: 1.55; } /* Testimonial with video background — drop a