/* ===================================================================== DomainTier — shared site stylesheet --------------------------------------------------------------------- Theme tokens, header, footer and common UI shared by every page EXCEPT valuate.html (which keeps its own self-contained styles). Pair with site.js for the theme toggle + mobile menu. The theme is set pre-paint by a tiny inline script on each page. ===================================================================== */ /* ---- theme tokens ---------------------------------------------------- */ :root, :root[data-theme="dark"] { --bg:#0e0f12; --bg-soft:#15171b; --border:#1c1e22; --border-strong:#2a2d33; --fg:#fafafa; --fg-body:#e8eaed; --fg-mid:#cfd3da; --fg-dim:#9aa0a8; --fg-muted:#7d8088; --fg-faint:#5f6166; --fg-fainter:#4a4d54; --accent:#5a9cc8; --accent-rgb:90,156,200; --pos:#7dc99a; --warn:#d68a7b; --neg:#e08a8a; --up:#5a9cc8; --down:#c0c4cc; --hair-rgb:255,255,255; } :root[data-theme="light"] { --bg:#ffffff; --bg-soft:#f4f5f7; --border:#e4e6ea; --border-strong:#d0d3d8; --fg:#0e0f12; --fg-body:#1a1c20; --fg-mid:#3a3d44; --fg-dim:#5a5d64; --fg-muted:#6a6d74; --fg-faint:#8a8d94; --fg-fainter:#c0c3c8; --accent:#2d7aa6; --accent-rgb:45,122,166; --pos:#3f9663; --warn:#b3624f; --neg:#bf5a5a; --up:#2d7aa6; --down:#8a8d94; --hair-rgb:0,0,0; } /* ---- reset + base ---------------------------------------------------- */ * { margin:0; padding:0; box-sizing:border-box; } html, body { background:var(--bg); color:var(--fg-body); font-family:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif; line-height:1.5; font-variant-numeric:tabular-nums; transition:background 0.2s ease, color 0.2s ease; } body { min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; opacity:1; transition:background 0.2s ease, color 0.2s ease, opacity 0.15s ease; } /* Anti-FOUC: pages that rely on this external stylesheet hide the body inline (body{opacity:0}) until this file applies; this rule (loaded later, so it wins) reveals it. */ a { color:inherit; text-decoration:none; } svg { display:block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* ---- layout helpers -------------------------------------------------- */ .wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 32px; } .wrap-narrow { width:100%; max-width:820px; margin:0 auto; padding:0 32px; } .rule { height:1px; background:var(--border); } .spacer { flex:1; } /* ---- text helpers ---------------------------------------------------- */ .label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); } .eyebrow { font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); font-weight:500; } .muted { color:var(--fg-muted); } .dim { color:var(--fg-dim); } .accent { color:var(--accent); } .strong { color:var(--fg); font-weight:500; } /* ---- header ---------------------------------------------------------- */ header.site { border-bottom:1px solid var(--border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; position:sticky; top:0; z-index:100; background:var(--bg); } header.site .hdr-left { display:flex; align-items:center; gap:36px; } header.site .hdr-right { display:flex; align-items:center; gap:18px; font-size:12px; } header.site nav { display:flex; gap:24px; font-size:13px; } header.site nav a { color:var(--fg-muted); transition:color 0.18s ease; } header.site nav a:hover { color:var(--fg-mid); } header.site nav a.active { color:var(--fg); } /* Auth FOUC guard: a returning signed-in visitor is flagged html.auth-in by an inline snippet (from a localStorage hint), so the signed-out links are hidden from first paint instead of flashing before /api/auth/me resolves. site.js fills the username link and reconciles. */ html.auth-in .nav-auth-link { display:none; } .brand-mark { display:flex; align-items:center; gap:10px; cursor:pointer; } .brand-mark span { font-size:14px; font-weight:600; letter-spacing:0.01em; color:var(--fg); } .brand-mark svg path { fill:var(--accent); } .signin-link { color:var(--fg-muted); transition:color 0.18s ease; } .signin-link:hover { color:var(--fg); } .cta-button { background:var(--fg); color:var(--bg); padding:8px 16px; border-radius:5px; font-weight:500; font-size:12px; transition:opacity 0.18s ease; } .cta-button:hover { opacity:0.85; } .theme-toggle { width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--fg-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:color 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { color:var(--fg); border-color:var(--border-strong); } .theme-toggle svg { width:14px; height:14px; } .theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; } :root[data-theme="light"] .theme-toggle .sun { display:block; } :root[data-theme="light"] .theme-toggle .moon { display:none; } /* hamburger + mobile menu — hidden on desktop */ .m-burger { display:none; } .m-menu { display:none; } /* ---- footer ---------------------------------------------------------- */ footer.site { border-top:1px solid var(--border); padding:24px 32px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--fg-muted); flex-shrink:0; /* body is a flex column (min-height:100vh) — margin-top:auto pushes the footer to the bottom of the viewport on short pages instead of leaving it mid-page. */ margin-top:auto; } footer.site .footer-links { display:flex; gap:18px; } footer.site .footer-links a { transition:color 0.18s ease; } footer.site .footer-links a:hover { color:var(--fg); } /* ---- page hero ------------------------------------------------------- */ .page-hero { padding:72px 0 8px; } .page-hero h1 { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:46px; font-weight:300; letter-spacing:-0.025em; line-height:1.08; color:var(--fg); margin:14px 0 0; } .page-hero .lead { font-size:16px; color:var(--fg-dim); line-height:1.6; max-width:620px; margin:18px 0 0; } /* ---- content section ------------------------------------------------- */ .section { padding:54px 0 0; position:relative; } .section + .section { margin-top:0; } .section-head { font-size:20px; font-weight:500; letter-spacing:-0.01em; color:var(--fg); margin:0 0 6px; } .section-sub { font-size:13px; color:var(--fg-muted); margin:0 0 28px; } .divider { height:1px; background:linear-gradient(90deg, transparent, rgba(var(--hair-rgb),0.16) 12%, rgba(var(--hair-rgb),0.16) 88%, transparent); margin:64px 0 0; } /* ---- prose ----------------------------------------------------------- */ .prose { font-size:14.5px; line-height:1.72; color:var(--fg-body); } .prose p { margin:0 0 16px; } .prose h3 { font-size:15px; font-weight:600; color:var(--fg); margin:30px 0 10px; letter-spacing:-0.005em; } .prose ul { margin:0 0 16px; padding-left:20px; } .prose li { margin:0 0 7px; } .prose strong { color:var(--fg); font-weight:600; } .prose code { font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; font-size:0.86em; background:var(--bg-soft); border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--fg-mid); } /* ---- stat tiles ------------------------------------------------------ */ .stat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; } .stat { background:var(--bg); padding:22px 20px; } .stat .stat-label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); } .stat .stat-value { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:30px; font-weight:300; letter-spacing:-0.02em; color:var(--fg); margin-top:8px; line-height:1; } .stat .stat-note { font-size:11px; color:var(--fg-dim); margin-top:7px; } /* ---- cards ----------------------------------------------------------- */ .card { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:24px; } .card-grid { display:grid; gap:18px; } .card-grid.cols-2 { grid-template-columns:1fr 1fr; } .card-grid.cols-3 { grid-template-columns:repeat(3, 1fr); } /* ---- buttons --------------------------------------------------------- */ .btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid var(--border-strong); background:transparent; color:var(--fg); transition:border-color 0.18s ease, background 0.18s ease; } .btn:hover { border-color:var(--fg-muted); } .btn-primary { background:var(--fg); color:var(--bg); border-color:var(--fg); } .btn-primary:hover { opacity:0.88; border-color:var(--fg); } .btn-accent { background:var(--accent); color:#fff; border-color:var(--accent); } .btn-accent:hover { opacity:0.9; } /* ---- simple table ---------------------------------------------------- */ .dt-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; } /* fixed column widths so every table on the page lines up identically */ .dt-table th:nth-child(1), .dt-table td:nth-child(1) { width:38%; overflow-wrap:break-word; } .dt-table th:nth-child(2), .dt-table td:nth-child(2) { width:20%; } .dt-table th:nth-child(3), .dt-table td:nth-child(3) { width:22%; } .dt-table th:nth-child(4), .dt-table td:nth-child(4) { width:20%; } .dt-table thead th { text-align:left; padding:11px 14px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-muted); border-bottom:1px solid var(--border-strong); } .dt-table tbody td { padding:13px 14px; border-bottom:1px solid var(--border); } .dt-table tbody tr:hover { background:rgba(var(--accent-rgb),0.05); } .dt-table .num { text-align:right; font-variant-numeric:tabular-nums; } /* ---- footer-of-page CTA band ---------------------------------------- */ .cta-band { margin-top:72px; border-top:1px solid var(--border); padding:56px 0 64px; text-align:center; } .cta-band h2 { font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:30px; font-weight:300; letter-spacing:-0.02em; color:var(--fg); margin:0 0 10px; } .cta-band p { font-size:14px; color:var(--fg-dim); margin:0 0 24px; } /* ===================================================================== MOBILE · ≤760px ===================================================================== */ @media (max-width: 760px) { header.site { padding:12px 15px; } header.site nav, header.site .signin-link { display:none; } header.site .hdr-left { gap:0; } header.site .hdr-right { gap:12px; } .cta-button { padding:7px 12px; font-size:11px; } /* bottom padding: content must not sit flush against the footer hairline */ .wrap, .wrap-narrow { padding:0 16px 56px; } /* hamburger button */ .m-burger { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border-radius:7px; background:transparent; border:1px solid var(--border); color:var(--fg); cursor:pointer; -webkit-tap-highlight-color:transparent; } .m-burger svg { width:17px; height:17px; } /* slide-down menu */ .m-menu { position:absolute; top:100%; left:0; right:0; flex-direction:column; padding:4px 15px 12px; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:0 10px 22px rgba(0,0,0,0.28); z-index:99; } header.site.m-menu-open .m-menu { display:flex; } .m-menu a { padding:13px 2px; font-size:15px; color:var(--fg-muted); border-bottom:1px solid var(--border); } .m-menu a:last-child { border-bottom:none; } .m-menu a.active { color:var(--fg); } /* Links first (wrapping on clean gaps), © line beneath — the links row has 7 items and must wrap deliberately, not overflow raggedly. */ /* the page must NEVER pan sideways. overflow-x:hidden alone is NOT enough on iOS Safari (it ignores it for touch panning when content overflows — the drag-and-snap-back the owner reported). touch-action:pan-y blocks the horizontal page gesture at the source; pinch-zoom stays allowed. Inner scrollers (.m-tablescroll, .dt-table-scroll, katex) are their own scroll containers, so their horizontal swipes are unaffected. */ html, body { overflow-x:hidden; touch-action:pan-y pinch-zoom; overscroll-behavior-x:none; } /* page-end shouldn't stack hairlines: the CTA band's border + the footer's border read as 2-3 lines in quick succession — the footer's is enough */ .cta-band { border-top:0; margin-top:40px; padding:24px 0 40px; } /* same as desktop: copyright left, links right, one row */ footer.site { padding:22px 16px; gap:14px; } footer.site .footer-links { gap:14px; } .page-hero { padding:40px 0 4px; } .page-hero h1 { font-size:32px; } .page-hero .lead { font-size:15px; } .section { padding:40px 0 0; } .section-head { font-size:18px; } .divider { margin:44px 0 0; } .stat-grid { grid-template-columns:1fr 1fr; } .stat .stat-value { font-size:25px; } .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns:1fr; } .cta-band h2 { font-size:24px; } /* tables scroll sideways rather than jamming */ .dt-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .dt-table-scroll .dt-table { min-width:560px; } } /* ===================================================================== Inline auth modal — injected by site.js when .nav-auth-link buttons exist on the page. Centered overlay with the same eyebrow/underline- input style as valuate.html's inline auth form. ===================================================================== */ .auth-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:40px 20px; } .auth-overlay.auth-open { display:flex; } /* Keep the sticky header crisp when the auth modal opens — the overlay z-index is 200, so lifting the header to 201 keeps it above the backdrop blur. */ body.auth-modal-open header.site { position:sticky; top:0; z-index:201; } .auth-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; animation:authFadeIn 0.32s ease forwards; } /* Card wrapper sizes to the main valuate search bar (580px) so it feels like the same piece of UI, just centered. The conic-gradient animated border is the brand "glint" — borrowed from .form-wrap-outer so the modal echoes the hero form rather than reading as a generic dialog. */ @property --auth-angle { syntax:''; initial-value:0deg; inherits:false; } .auth-card-wrap { position:relative; width:100%; max-width:580px; padding:1px; border-radius:10px; background: linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box, conic-gradient(from var(--auth-angle, 0deg), rgba(90,156,200,0.0) 0deg, rgba(90,156,200,0.0) 200deg, rgba(90,156,200,0.85) 290deg, rgba(120,180,220,1) 330deg, rgba(90,156,200,0.85) 360deg ) border-box; border:1px solid transparent; animation:authGlint 5.5s linear infinite, authCardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; opacity:0; transform:translateY(-8px) scale(0.97); } @keyframes authFadeIn { to { opacity:1; } } @keyframes authCardIn { to { opacity:1; transform:translateY(0) scale(1); } } @keyframes authGlint { to { --auth-angle:360deg; } } .auth-card { background:var(--bg-soft); border:0; border-radius:9px; padding:22px 26px 18px; position:relative; } .auth-card .auth-close { position:absolute; top:10px; right:10px; width:28px; height:28px; background:transparent; border:0; color:var(--fg-muted); cursor:pointer; border-radius:6px; font-size:18px; line-height:1; padding:0; font-family:inherit; display:flex; align-items:center; justify-content:center; transition:color 0.15s ease, background 0.15s ease; } .auth-card .auth-close:hover { color:var(--fg); background:var(--bg); } /* Eyebrow renders as a small color-tinted tag — accent for sign up (inviting CTA), neutral hairline outline for sign in (more reserved). Caption follows inline, italic dim. Distinct at a glance. */ .auth-card .auth-eyebrow { display:inline-block; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; margin:0 10px 0 0; padding:3px 8px; border-radius:3px; vertical-align:1px; line-height:1; } .auth-card.is-signup .auth-eyebrow { background:rgba(var(--accent-rgb),0.14); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.28); } .auth-card.is-signin .auth-eyebrow { background:transparent; color:var(--fg-dim); border:1px solid var(--border-strong); } /* Success state ("Check your email") — drop the tag styling and let the message read as a proper heading. */ .auth-card.is-success .auth-eyebrow { display:block; padding:0; background:transparent; border:0; font-size:14px; font-weight:500; color:var(--fg); letter-spacing:-0.005em; text-transform:none; margin:0 0 8px; } .auth-card .auth-caption { display:inline; font-size:12px; color:var(--fg-dim); font-style:italic; line-height:1.5; margin:0; } .auth-card .auth-form { margin-top:14px; } .auth-card .auth-form { display:flex; flex-direction:column; gap:0; width:100%; } .auth-card .auth-form input { background:transparent; border:0; border-bottom:1px solid var(--border-strong); border-radius:0; padding:11px 2px; color:var(--fg); font-size:14px; font-family:inherit; outline:none; width:100%; box-sizing:border-box; transition:border-bottom-color 0.2s ease; } .auth-card .auth-form input::placeholder { color:var(--fg-faint); } .auth-card .auth-form input:focus { border-bottom-color:var(--accent); } .auth-card .auth-sub-link { align-self:flex-end; margin-top:6px; font-size:11px; color:var(--fg-dim); text-decoration:none; line-height:1.2; height:14px; transition:color 0.15s ease; } .auth-card .auth-sub-link:hover { color:var(--accent); } .auth-card .auth-sub-spacer { visibility:hidden; pointer-events:none; } .auth-card .auth-submit { margin-top:14px; padding:11px 18px; border-radius:6px; font-weight:500; font-size:13px; cursor:pointer; font-family:inherit; transition:opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } /* Sign-up: filled dark→light pill (primary action for new users). */ .auth-card.is-signup .auth-submit { background:var(--fg); color:var(--bg); border:0; } .auth-card.is-signup .auth-submit:hover { opacity:0.9; } /* Sign-in: hairline outline (more reserved, "you know what you're doing"). */ .auth-card.is-signin .auth-submit { background:transparent; color:var(--fg-body); border:1px solid var(--border-strong); } .auth-card.is-signin .auth-submit:hover { border-color:var(--accent); color:var(--accent); } /* Reset request + reset-confirm: primary filled action (same weight as sign-up). Without this the reset submit had only the base rule = an unstyled, borderless button that read as bare text. */ .auth-card.is-reset .auth-submit { background:var(--fg); color:var(--bg); border:0; } .auth-card.is-reset .auth-submit:hover { opacity:0.9; } .auth-card .auth-err { color:var(--fg-body); font-size:12px; line-height:1.5; margin-top:10px; /* Empty error has zero height — no afterthought gap. */ min-height:0; } .auth-card .auth-err:not(:empty) { padding:9px 11px 9px 13px; background:color-mix(in srgb, var(--warn) 9%, transparent); border-left:2px solid var(--warn); border-radius:0 4px 4px 0; animation:auth-err-in .22s cubic-bezier(0.22,0.61,0.36,1); } .auth-card .auth-err a { color:var(--warn); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .auth-card .auth-err a:hover { color:var(--accent); } @keyframes auth-err-in { from { opacity:0; transform:translateY(-2px); } to { opacity:1; transform:translateY(0); } } .auth-card .auth-back { background:transparent; border:0; color:var(--fg-muted); cursor:pointer; font-family:inherit; font-size:11px; padding:6px 0 0; text-align:center; margin-top:2px; text-decoration:none; transition:color 0.15s ease; } .auth-card .auth-back:hover { color:var(--accent); } .auth-card .auth-sent { font-size:12.5px; color:var(--fg-dim); line-height:1.55; margin:0; } /* Inner content morph (signup ↔ signin) — quick opacity fade. */ .auth-card.auth-morphing > .auth-eyebrow, .auth-card.auth-morphing > .auth-caption, .auth-card.auth-morphing > .auth-form { opacity:0; transform:translateY(-4px) scale(0.985); transition:opacity .26s cubic-bezier(0.4, 0, 0.2, 1), transform .26s cubic-bezier(0.4, 0, 0.2, 1); } .auth-card > .auth-eyebrow, .auth-card > .auth-caption, .auth-card > .auth-form { transition:opacity .38s cubic-bezier(0.22, 0.61, 0.36, 1), transform .38s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Shared page-load reveal — the staggered rise about/support pioneered, now sitewide. Content pages tag hero children r1-r3 and sections r4+. Gated so reduced-motion users see everything instantly. (valuate.html has its own.) */ @media (prefers-reduced-motion:no-preference) { @keyframes dtRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .reveal { opacity:0; animation:dtRise .6s cubic-bezier(.22,.61,.36,1) forwards; } .r1{animation-delay:.04s} .r2{animation-delay:.12s} .r3{animation-delay:.22s} .r4{animation-delay:.34s} .r5{animation-delay:.46s} .r6{animation-delay:.58s} .r7{animation-delay:.70s} .r8{animation-delay:.82s} } /* Brand-mark sheen — a soft light band sweeps the logo glyph every ~8s, masked to the letterform so only the mark catches the light. Deliberately subtle (low-opacity, brief pass); disabled for reduced-motion users. */ .brand-mark { position:relative; } @media (prefers-reduced-motion:no-preference) { .brand-mark::after { content:''; position:absolute; left:0; top:50%; width:22px; height:20px; transform:translateY(-50%); pointer-events:none; background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 62%); background-size:300% 100%; background-repeat:no-repeat; background-position:150% 0; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 437.86 394.09'%3E%3Cpath d='M.02.05c83.01.1,166.03-.25,249.04.15,62.05.89,121.59,33.46,157.22,84.1-19.68-12.4-42.27-18.16-65.15-20.57-31.59-20.37-68.4-33.46-106.49-31.2-66.58.15-133.16,0-199.74.05,0,109.59-.05,219.22.05,328.86,35.09-.3,70.27.49,105.4-.44,50.83-2.41,97.43-45.12,100.58-96.6,1.18-39.56.05-79.18.49-118.74,33.76.44,67.61-.89,101.37.59,16.04,1.48,23.37,17.86,26.28,31.69-30.9.25-61.81.05-92.71.1-2.12,41.43,6.1,84.64-8.66,124.5-19.98,53.54-75.09,90.94-131.98,91.23-45.27.25-90.49,0-135.72.1C.02,262.57-.03,131.33.02.05Z'/%3E%3Cpath d='M69.41,178.08c0-32.38-.05-64.76.05-97.09,91.08.1,182.22-.2,273.35.15,35.53.3,70.12,21.9,84.59,54.62,13.19,29.72,11.27,63.43,8.32,95.02-8.56,71.5-64.07,132.22-132.12,152.94-32.08,11.37-66.43,10.43-99.94,10.28,17.71-8.02,31.94-21.6,47.63-32.43,34.69-4.13,68.99-16.09,96.05-38.73,33.66-27.06,53.93-69.24,55.21-112.29.49-22.05,1.72-45.67-9.15-65.69-10.53-19.88-32.92-32.08-55.21-31.44-77.9-.05-155.79.1-233.64-.05-.05,10.78-.05,21.55-.05,32.33,34.1-.1,68.25,0,102.35-.05.3,54.38-.1,108.75.2,163.13-9.94,11.47-21.75,21.11-34.99,28.59-.3-53.1-.05-106.24-.1-159.34-34.2,0-68.4,0-102.55.05Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 437.86 394.09'%3E%3Cpath d='M.02.05c83.01.1,166.03-.25,249.04.15,62.05.89,121.59,33.46,157.22,84.1-19.68-12.4-42.27-18.16-65.15-20.57-31.59-20.37-68.4-33.46-106.49-31.2-66.58.15-133.16,0-199.74.05,0,109.59-.05,219.22.05,328.86,35.09-.3,70.27.49,105.4-.44,50.83-2.41,97.43-45.12,100.58-96.6,1.18-39.56.05-79.18.49-118.74,33.76.44,67.61-.89,101.37.59,16.04,1.48,23.37,17.86,26.28,31.69-30.9.25-61.81.05-92.71.1-2.12,41.43,6.1,84.64-8.66,124.5-19.98,53.54-75.09,90.94-131.98,91.23-45.27.25-90.49,0-135.72.1C.02,262.57-.03,131.33.02.05Z'/%3E%3Cpath d='M69.41,178.08c0-32.38-.05-64.76.05-97.09,91.08.1,182.22-.2,273.35.15,35.53.3,70.12,21.9,84.59,54.62,13.19,29.72,11.27,63.43,8.32,95.02-8.56,71.5-64.07,132.22-132.12,152.94-32.08,11.37-66.43,10.43-99.94,10.28,17.71-8.02,31.94-21.6,47.63-32.43,34.69-4.13,68.99-16.09,96.05-38.73,33.66-27.06,53.93-69.24,55.21-112.29.49-22.05,1.72-45.67-9.15-65.69-10.53-19.88-32.92-32.08-55.21-31.44-77.9-.05-155.79.1-233.64-.05-.05,10.78-.05,21.55-.05,32.33,34.1-.1,68.25,0,102.35-.05.3,54.38-.1,108.75.2,163.13-9.94,11.47-21.75,21.11-34.99,28.59-.3-53.1-.05-106.24-.1-159.34-34.2,0-68.4,0-102.55.05Z'/%3E%3C/svg%3E"); -webkit-mask-size:100% 100%; mask-size:100% 100%; animation:dtLogoSheen 10s linear infinite; } @keyframes dtLogoSheen { 0% { background-position:150% 0; } 80% { background-position:150% 0; } 100% { background-position:-150% 0; } } }