/* ========================================================================= Caplume - studio site Design system. Tokens derived from the cadro.com stylesheet (for FEEL only). ------------------------------------------------------------------------ FONTS: Self-hosted Satoshi (Fontshare, free license) - ship-legal, and the chosen close match to Cadro's Aeonik. Files live in /fonts. The stylesheet references --font-display / --font-body, so swapping is a 2-line change. ========================================================================= */ /* ---- Fonts ---- Self-hosted Satoshi (Fontshare, free license). Ship-legal. */ @font-face { font-family:'Satoshi'; src:url('fonts/Satoshi-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Satoshi'; src:url('fonts/Satoshi-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; } :root { /* Type */ --font-display: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Hoefler Text', Georgia, 'Times New Roman', serif; /* Neutrals (warm) */ --bg: #F2F1F0; /* warm off-white */ --ink: #16130F; /* warm near-black (not pure #000) */ --ink-soft: #6B655C; /* warm grey for labels/meta */ --ink-faint: #A39C90; /* warm faint */ --card-grey: #ECEAE5; --line: #E4E0D9; /* warm hairline */ --on-grad: #ffffff; /* Mesh-gradient stops (the real cadro hero hues) */ --g-coral: #fe9574; --g-lime: #8edf1c; --g-green: #64e300; --g-mint: #c8fe9e; --g-teal: #64dda7; --g-teald: #3e8c5e; --g-blue: #5478f9; --g-blue2: #9eb3fe; --g-lilac: #cd7dff; --g-lilac2: #f6c2ff; --g-violet: #b7b2f2; /* Radii */ --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --pill: 100vw; /* Layout */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 72px); } /* ---- Alternative gradient palettes (testing) ---- Switch by setting data-palette on . Default (none) = original Cadro hues. */ body[data-palette="aurora"] { --g-coral:#FF2D78; --g-lime:#00C2A8; --g-green:#00C2A8; --g-mint:#1FB6FF; --g-teal:#1FB6FF; --g-teald:#00C2A8; --g-blue:#5E5CE6; --g-blue2:#1FB6FF; --g-lilac:#BF5AF2; --g-lilac2:#FF2D78; --g-violet:#5E5CE6; } body[data-palette="electric"] { --g-coral:#FF2E97; --g-lime:#00E0FF; --g-green:#00E0FF; --g-mint:#00E0FF; --g-teal:#2D6CFF; --g-teald:#2D6CFF; --g-blue:#2D6CFF; --g-blue2:#7B2FF7; --g-lilac:#C724FF; --g-lilac2:#FF2E97; --g-violet:#7B2FF7; } body[data-palette="sunset"] { --g-coral:#FF2D55; --g-lime:#FFB200; --g-green:#FF7A00; --g-mint:#FFB200; --g-teal:#FF7A00; --g-teald:#FF2D55; --g-blue:#E0249A; --g-blue2:#FF2D78; --g-lilac:#FF2D78; --g-lilac2:#FFB200; --g-violet:#E0249A; } body[data-palette="dusk"] { --g-coral:#FF5E5E; --g-lime:#B6FF3C; --g-green:#11C5C5; --g-mint:#B6FF3C; --g-teal:#11C5C5; --g-teald:#2D6CFF; --g-blue:#2D6CFF; --g-blue2:#6D4AFF; --g-lilac:#6D4AFF; --g-lilac2:#FF5E5E; --g-violet:#6D4AFF; } /* From uploaded references: */ body[data-palette="garden"] { /* White Bean / Raspberry / Squash / Lime / Thyme / Kale / Salmon */ --g-coral:#EF7D40; --g-lime:#E5E798; --g-green:#3F461F; --g-mint:#F8BEAD; --g-teal:#898241; --g-teald:#21392D; --g-blue:#B4265B; --g-blue2:#F8BEAD; --g-lilac:#B4265B; --g-lilac2:#EF7D40; --g-violet:#898241; } body[data-palette="playground"] { /* Lavender / Pink Pearl / Lime / GO Green / Red / UN Blue */ --g-coral:#F8311C; --g-lime:#D6EF72; --g-green:#00B65C; --g-mint:#EAA9CB; --g-teal:#00B65C; --g-teald:#537CDE; --g-blue:#537CDE; --g-blue2:#A785FE; --g-lilac:#A785FE; --g-lilac2:#EAA9CB; --g-violet:#A785FE; } body[data-palette="retro"] { /* Peach / Pink / Orange / Periwinkle / Maroon / Olive */ --g-coral:#E15304; --g-lime:#FFBAEC; --g-green:#775D0F; --g-mint:#FFD5BB; --g-teal:#9DA5C5; --g-teald:#410016; --g-blue:#9DA5C5; --g-blue2:#FFBAEC; --g-lilac:#FFBAEC; --g-lilac2:#E15304; --g-violet:#775D0F; } body[data-palette="neon"] { /* Neon / Violet / Nude / Cream */ --g-coral:#BC94FF; --g-lime:#DBFE53; --g-green:#B4A384; --g-mint:#DBFE53; --g-teal:#BC94FF; --g-teald:#B4A384; --g-blue:#BC94FF; --g-blue2:#DBFE53; --g-lilac:#BC94FF; --g-lilac2:#DBFE53; --g-violet:#B4A384; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; } .display { font-size: clamp(44px, 8vw, 104px); line-height: 0.95; letter-spacing: -0.032em; } /* editorial serif accent - used sparingly */ .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; } .statement { padding: clamp(48px, 8vw, 120px) 0; } .statement p { margin: 0; max-width: 24ch; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 4vw, 50px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); } .h-section { font-size: clamp(34px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.02em; } .label { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; } .lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink); max-width: 42ch; } /* ---------- Buttons ---------- */ .btn-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 15px; padding: 13px 22px; border-radius: var(--pill); transition: transform .25s ease, opacity .25s ease; } .btn-pill:hover { opacity: .85; transform: translateY(-1px); } .btn-pill .chev { font-size: 13px; } /* large outlined CTA with corner arrow */ .btn-outline { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; flex-direction: column; justify-content: flex-end; min-width: 280px; min-height: 132px; border: 1.5px solid var(--ink); border-radius: var(--r-sm); padding: 22px 24px; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); transition: color .35s ease, border-color .35s ease; } /* gradient wipe that rises from the bottom on hover */ .btn-outline::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(125deg, var(--g-lime) 0%, var(--g-lilac) 55%, var(--g-blue) 100%); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.22,.61,.36,1); } .btn-outline:hover { border-color: transparent; } .btn-outline:hover::before { transform: scaleY(1); } .btn-outline .arrow { position: absolute; top: 18px; right: 20px; display: block; transition: transform .35s ease; } .btn-outline .arrow svg { width: 22px; height: 22px; display: block; } .btn-outline:hover .arrow { transform: translate(3px, -3px); } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .nav.scrolled { background: rgba(242, 241, 240, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; } .nav-logo svg { height: 26px; width: auto; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a.link { font-family: var(--font-display); font-weight: 500; font-size: 16px; } .nav-links a.link:hover { opacity: .6; } /* ---------- Hero ---------- */ .hero-grad { position: relative; height: clamp(360px, 56vh, 560px); overflow: hidden; background: #ECEAE5; } /* Gradient layers are real
s, animated by JS (see script in each page). This avoids reliance on CSS @keyframes / blend modes / OS motion settings. */ .hero-grad .blob { position: absolute; inset: -55%; filter: blur(42px) saturate(1.12); will-change: transform; } .hero-grad .b1 { background: radial-gradient(38% 38% at 18% 32%, var(--g-lime) 0%, transparent 60%), radial-gradient(42% 42% at 78% 22%, var(--g-lilac) 0%, transparent 62%), radial-gradient(48% 48% at 62% 72%, var(--g-blue) 0%, transparent 60%), radial-gradient(55% 55% at 48% 48%, var(--g-blue2) 0%, transparent 72%); } .hero-grad .b2 { background: radial-gradient(40% 40% at 28% 78%, var(--g-teal) 0%, transparent 60%), radial-gradient(34% 34% at 88% 64%, var(--g-coral) 0%, transparent 58%), radial-gradient(46% 46% at 70% 38%, var(--g-lilac2) 0%, transparent 64%); opacity: .85; } .hero-body { padding: clamp(48px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); } .hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; } .hero-text { max-width: 16ch; } .hero-lead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 40px; flex-wrap: wrap; } /* ---------- What we make ---------- */ .make { padding: clamp(64px, 9vw, 150px) 0; } .make-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; } .make-intro .label { margin-bottom: 18px; } .cards { display: flex; flex-direction: column; gap: 20px; } .gcard { position: relative; border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px); min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; color: var(--on-grad); overflow: hidden; isolation: isolate; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; } /* base gradient pans, brightens slightly on hover */ .gcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background-size: 100% 100%; background-position: 0% 50%; transition: background-size .8s ease, filter .5s ease; } /* layered gradient: highlight glow (top-right) + shade (bottom-left) + base = depth/contrast */ .gcard.green::before { background-image: radial-gradient(72% 58% at 72% 12%, rgba(255,255,255,.50) 0%, transparent 55%), radial-gradient(95% 80% at 8% 112%, rgba(20,16,12,.30) 0%, transparent 55%), linear-gradient(140deg, var(--g-teald) 0%, var(--g-teald) 20%, var(--g-mint) 105%); } .gcard.violet::before { background-image: radial-gradient(72% 58% at 72% 12%, rgba(255,255,255,.42) 0%, transparent 55%), radial-gradient(95% 80% at 8% 112%, rgba(20,16,12,.34) 0%, transparent 55%), linear-gradient(140deg, var(--g-blue) 0%, var(--g-blue) 20%, var(--g-lilac2) 105%); } .gcard:hover, .gcard:focus-within { transform: translateY(-5px); } /* on hover the gradient grows and drifts (animates) */ .gcard:hover::before, .gcard:focus-within::before { background-size: 132% 132%; filter: saturate(1.14) brightness(1.06); animation: gcardPan 8s ease-in-out infinite; } @keyframes gcardPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gcard h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.02em; padding-right: 84px; } .gcard .gcard-foot { border-top: 1px solid rgba(255,255,255,.45); padding-top: 18px; } .gcard .gcard-foot p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.92); } .gcard .circ { position: absolute; top: clamp(24px, 3vw, 36px); right: clamp(24px, 3vw, 36px); width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background .4s ease, transform .4s cubic-bezier(.22,.61,.36,1); } .gcard .circ svg { width: 24px; height: 24px; display: block; } /* on hover: white circle fades away, leaving just the bold black arrow */ .gcard:hover .circ { background: transparent; transform: translate(5px, -5px) scale(1.06); } /* ---------- CTA banner ---------- */ .cta { padding-bottom: clamp(64px, 9vw, 140px); } .cta-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: clamp(40px, 6vw, 88px); min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; color: var(--on-grad); } .cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 80% at 12% 40%, var(--g-lime) 0%, transparent 60%), radial-gradient(50% 90% at 60% 30%, var(--g-lilac) 0%, transparent 65%), radial-gradient(60% 100% at 90% 70%, var(--g-blue2) 0%, transparent 70%), linear-gradient(110deg, var(--g-teald), var(--g-blue)); filter: saturate(1.05); } .cta-card .cta-q { font-size: clamp(16px, 1.5vw, 19px); max-width: 30ch; color: rgba(255,255,255,.95); } .cta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-top: 32px; } .cta-card .h-section { color: #fff; } .btn-outline.on-grad { border-color: rgba(255,255,255,.9); color: #fff; } .btn-outline.on-grad::before { background: linear-gradient(125deg, #ffffff 0%, var(--g-lime) 100%); } .btn-outline.on-grad:hover { border-color: transparent; color: var(--ink); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--ink); padding: 40px 0 64px; } .footer-top { display: flex; align-items: baseline; gap: 24px; padding-bottom: 56px; } .footer-top .foot-logo svg { height: 24px; color: var(--ink); } .footer-top .tagline { font-family: var(--font-display); font-size: clamp(15px,1.4vw,18px); color: var(--ink); } .footer-cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; } .footer-nav { display: flex; gap: 40px; flex-wrap: wrap; } .footer-nav a { font-family: var(--font-display); font-weight: 500; font-size: 16px; } .footer-nav a:hover { opacity: .6; } .footer-legal { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); max-width: 46ch; } .footer-legal a { text-decoration: underline; text-underline-offset: 3px; } .footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-faint); } /* ---------- Generic page header (About/Support) ---------- */ .page-head { padding: clamp(120px, 16vh, 220px) 0 clamp(28px, 3.5vw, 52px); } .make.flush { padding-top: 0; } .prose { max-width: 64ch; } .prose p { margin: 0 0 22px; font-size: 19px; line-height: 1.65; } .prose h2 { font-size: clamp(24px,3vw,34px); margin: 56px 0 16px; letter-spacing: -0.015em; } .page-head .label { margin-bottom: 22px; } .page-head .lead { margin-top: 28px; max-width: 56ch; } .page-head .display { font-size: clamp(40px, 7vw, 88px); } .section-label { margin-bottom: 36px; } /* values list (editorial, lettered) */ .values { padding: clamp(8px,2vw,24px) 0 clamp(56px,8vw,120px); } .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 64px; } .value { padding-top: 26px; border-top: 1px solid var(--ink); } .value .idx { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; } .value h3 { font-size: clamp(22px,2.4vw,30px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--ink); } .value p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; } /* About: mission text + image, two columns */ .mission-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px,5vw,72px); align-items: center; } .mission-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card-grey); box-shadow: 0 24px 60px -28px rgba(22,19,15,.35); } .mission-figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .mission-figure.placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--g-blue), var(--g-lime)); } .mission-figure .ph-label { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .03em; color: rgba(255,255,255,.9); } @media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; gap: 32px; } .mission-figure { aspect-ratio: 16 / 10; } } /* contact block (support) */ .contact { padding: clamp(8px,2vw,24px) 0 clamp(48px,7vw,100px); } .contact-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: clamp(36px,5vw,72px); color: var(--on-grad); } .contact-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 14% 30%, var(--g-lime) 0%, transparent 60%), radial-gradient(50% 90% at 70% 25%, var(--g-lilac) 0%, transparent 65%), radial-gradient(60% 100% at 92% 75%, var(--g-blue2) 0%, transparent 70%), linear-gradient(115deg, var(--g-teald), var(--g-blue)); } .contact-card .label { color: rgba(255,255,255,.82); } .contact-card .big-email { display: inline-block; margin: 14px 0 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(26px, 5vw, 54px); color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,0); transition: border-color .25s ease; } .contact-card .big-email:hover { border-bottom-color: #fff; } .contact-card .note { margin: 0; color: rgba(255,255,255,.9); font-size: 15px; } .contact-meta { display: flex; flex-wrap: wrap; gap: 36px 56px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.35); } .contact-meta .ci .label { color: rgba(255,255,255,.72); display: block; margin-bottom: 6px; } .contact-meta .ci a, .contact-meta .ci span { color: #fff; font-size: 15px; } .contact-meta .ci a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); } .contact-meta .ci a:hover { border-bottom-color: #fff; } /* contact two-column (form + details) */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px,6vw,90px); align-items: start; } .contact-info .ci { margin-bottom: 30px; } .contact-info .ci .label { display: block; margin-bottom: 8px; } .contact-info .ci a { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(18px,2vw,24px); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .25s ease; } .contact-info .ci a:hover { border-bottom-color: var(--ink); } .contact-info .ci .val { color: var(--ink); font-size: 16px; } .contact-info .ci .note { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; } .contact-form .field { margin-bottom: 26px; } .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 10px 0; font-size: 16px; font-family: var(--font-body); color: var(--ink); resize: vertical; min-height: 96px; } .contact-form textarea:focus { outline: none; border-bottom-width: 2px; } .contact-form .form-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 22px; } .contact-form .form-note a { text-decoration: underline; text-underline-offset: 3px; } /* map */ .map { padding-bottom: clamp(48px,7vw,100px); } .map-embed { border-radius: var(--r-lg); overflow: hidden; line-height: 0; box-shadow: 0 18px 44px rgba(0,0,0,.08); } .map-embed iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; filter: grayscale(.15); } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 36px; } } /* FAQ */ .faq-section { padding: clamp(40px,6vw,90px) 0 clamp(64px,9vw,130px); } .faq { max-width: 780px; } .faq details { border-top: 1px solid var(--line); padding: 22px 0; } .faq details:last-of-type { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px,1.7vw,21px); color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary .pm { flex: 0 0 auto; font-size: 26px; line-height: 1; transition: transform .3s ease; } .faq details[open] summary .pm { transform: rotate(45deg); } .faq details p { margin: 14px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 64ch; } .faq details a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* privacy / legal doc */ .prose ul { margin: 0 0 22px; padding-left: 20px; } .prose li { margin-bottom: 8px; font-size: 17px; line-height: 1.6; color: var(--ink); } .prose h3 { font-size: clamp(16px,1.6vw,19px); margin: 28px 0 8px; color: var(--ink); } .doc-meta { margin-top: 26px; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; } .ptable-wrap { overflow-x: auto; margin: 18px 0 28px; } .ptable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; } .ptable th, .ptable td { text-align: left; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .ptable th { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 13px; } .ptable td { color: var(--ink-soft); } .ptable td:first-child, .ptable th:first-child { color: var(--ink); padding-right: 28px; } /* ---------- Voyager Quest legal docs (migrated to light style) ---------- */ .doc { max-width: 720px; margin: 0 auto; padding: clamp(24px,3vw,44px) 0 clamp(56px,8vw,110px); } .vq-top { max-width: 720px; margin: 0 auto; padding-top: clamp(108px,15vh,168px); } .vq-top .label { margin-bottom: 14px; } .doc .doc-header { margin-bottom: 56px; } .doc .doc-eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--ink-soft); margin: 0 0 22px; } .doc h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,7vw,72px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 32px; color: var(--ink); } .doc .doc-meta { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); } .doc .doc-meta strong { color: var(--ink); font-weight: 500; margin-right: 8px; } .doc h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.015em; margin: 48px 0 14px; color: var(--ink); } .doc h3 { font-family: var(--font-display); font-weight: 500; font-size: 16px; margin: 30px 0 8px; color: var(--ink); } .doc p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--ink); } .doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .doc strong { color: var(--ink); font-weight: 500; } .doc em { font-style: italic; } .doc ul { margin: 0 0 20px; padding-left: 20px; } .doc li { margin-bottom: 8px; font-size: 17px; line-height: 1.65; color: var(--ink); } .doc .callout { margin: 32px 0 40px; padding: 28px 30px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); } .doc .callout-label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; } .doc .callout p:last-child { margin-bottom: 0; } .doc .contact-block { margin: 24px 0; padding: 24px 28px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); font-size: 15px; line-height: 1.85; } .doc .contact-block .label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; } .doc .contact-block strong { display: block; font-size: 17px; margin-bottom: 4px; } /* acknowledgements credit lists */ .doc .credit-group { margin-bottom: 14px; } .doc .credit { padding: 14px 0; border-bottom: 1px solid var(--line); } .doc .credit .name { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 4px; } .doc .credit .license { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.55; } .doc .credit .source { display: block; font-size: 13px; margin-top: 4px; } .doc .credit .source a { color: var(--ink-soft); } .doc .credits { margin: 0 0 20px; padding-left: 0; list-style: none; columns: 2; column-gap: 40px; } .doc .credits li { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; break-inside: avoid; } .doc .count { color: var(--ink-faint); font-size: 13px; } .doc .note { color: var(--ink-soft); font-size: 14px; } .doc .generated { color: var(--ink-faint); font-size: 13px; margin-top: 10px; } /* VQ legal cross-links */ .vq-legal { max-width: 720px; margin: 0 auto; padding-bottom: clamp(48px,7vw,90px); } .vq-legal .label { margin-bottom: 14px; } .vq-legal-nav { display: flex; flex-wrap: wrap; gap: 16px 28px; } .vq-legal-nav a { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; } .vq-legal-nav a:hover, .vq-legal-nav a.current { color: var(--ink); border-bottom-color: var(--ink); } @media (max-width: 640px) { .doc .credits { columns: 1; } } /* ---------- Video reel (placeholder) ---------- */ .reel { padding: clamp(8px, 2vw, 28px) 0 clamp(56px, 8vw, 120px); } .reel-frame { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: #ECEAE5; } .reel-frame video, .reel-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* placeholder fill - soft mesh (JS-animated .reel-blob); remove the .reel-blob div when a real