/* ============================================================================ CrawlBit — Technical Origami / Draft Paper design system Shared vanilla stylesheet. Every page reuses these tokens + components. Fonts (load in ): JetBrains Mono (mono/body), Architects Daughter (hand). ============================================================================ */ /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; cursor: pointer; } /* ---- design tokens ---- */ :root { --ink: #2c3e50; --paper: #f5f1e6; --paper2: #fffdf4; --mut: color-mix(in srgb, var(--ink) 62%, transparent); --deep: color-mix(in srgb, var(--ink) 86%, #6b4a22); --green: #00FF88; --cyan: #00D9FF; --purple: #A855F7; --red: #FF6B6B; --amber: #b5742a; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-hand: 'Architects Daughter', cursive; --maxw: 1200px; } body { font-family: var(--font-mono); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--green); color: #1a2b20; } .font-mono { font-family: var(--font-mono); } .cbp-hand { font-family: var(--font-hand); line-height: 1.1; } /* ---- blueprint grid backdrop (whole page) ---- */ .cbp-gridbg { background-image: linear-gradient(rgba(70,140,170,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(70,140,170,.10) 1px, transparent 1px); background-size: 26px 26px; background-color: var(--paper); } /* ---- layout ---- */ .cbp-container { max-width: var(--maxw); margin: 0 auto; padding: 80px 24px; } .cbp-container.tight { padding: 56px 24px; } .cbp-section-narrow { max-width: 760px; } .cbp-grid { display: grid; gap: 24px; } .cbp-grid-2 { display: grid; gap: 28px; grid-template-columns: 1fr; } .cbp-grid-3 { display: grid; gap: 24px 24px; grid-template-columns: 1fr; } .cbp-grid-4 { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; } .cbp-hero-grid { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 768px) { .cbp-grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; } .cbp-grid-3 { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .cbp-grid-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .cbp-grid-3 { grid-template-columns: 1fr 1fr 1fr; } .cbp-grid-4 { grid-template-columns: repeat(4, 1fr); } .cbp-hero-grid { grid-template-columns: 7fr 5fr; } } /* tiny micro-rotations — scattered files on a drafting table */ .cbp-tilt1 { transform: rotate(-.35deg); } .cbp-tilt2 { transform: rotate(.4deg); } .rot-a { transform: rotate(.1deg); } .rot-b { transform: rotate(-.08deg); } .rot-c { transform: rotate(.07deg); } .rot-d { transform: rotate(-.1deg); } .rot-e { transform: rotate(.06deg); } /* ---- paper cutout card — soft sepia-tinted layered-sheet shadow ---- */ .cbp-paper { background: var(--paper2); border: 1.5px solid var(--ink); box-shadow: 0 1px 1px rgba(44,62,80,.05), 0 6px 14px -6px rgba(44,62,80,.10), 0 16px 34px -14px rgba(44,62,80,.10); } /* nav sheet */ .cbp-navpaper { background: color-mix(in srgb, var(--paper2) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1.5px solid var(--ink); } /* blueprint canvas (denser grid) */ .cbp-blueprint { background-image: linear-gradient(rgba(70,140,170,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(70,140,170,.16) 1px, transparent 1px); background-size: 34px 34px; background-color: #f2f4e9; } /* torn-strip edge for tags */ .cbp-strip { clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%); } /* dark charcoal-paper band (footer / faq) */ .cbp-darkpaper { background: repeating-linear-gradient(2deg, rgba(255,252,240,.025) 0 2px, transparent 2px 5px), #38332a; } /* ---- die-cut sticker CTA ---- */ .cbp-sticker { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; background: var(--green); color: #14241a; border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 20px; box-shadow: inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 4px 5px 0 0 rgba(56,51,42,.34), inset 0 -9px 13px rgba(255,255,255,.32); transition: transform .12s ease, box-shadow .2s ease; } .cbp-sticker:hover:not(:disabled) { transform: translate(-1px,-2px) rotate(-.5deg); box-shadow: inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 7px 9px 0 0 rgba(56,51,42,.36), 0 0 16px rgba(0,255,136,.45), inset 0 -9px 13px rgba(255,255,255,.32); } .cbp-sticker:active:not(:disabled) { transform: translate(2px,3px); box-shadow: inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 1px 1px 0 0 rgba(56,51,42,.34); } .cbp-sticker:disabled { opacity: .7; cursor: default; } .cbp-sticker-cyan { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; background: var(--cyan); color: #11313a; border: 1.5px solid var(--ink); border-radius: 5px; padding: 0 18px; box-shadow: inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 4px 5px 0 0 rgba(56,51,42,.32), inset 0 -9px 13px rgba(255,255,255,.32); transition: transform .12s ease, box-shadow .2s ease; } .cbp-sticker-cyan:hover:not(:disabled) { transform: translate(-1px,-2px) rotate(.5deg); box-shadow: inset 0 0 0 2px #fffdf4, 0 0 0 1px var(--ink), 7px 9px 0 0 rgba(56,51,42,.34), 0 0 16px rgba(0,217,255,.45), inset 0 -9px 13px rgba(255,255,255,.32); } /* plain paper button (ghost) */ .cbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; border: 1.5px solid var(--ink); color: var(--ink); background: var(--paper2); border-radius: 3px; padding: 9px 14px; text-decoration: none; transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s ease; } .cbp-btn:hover { transform: translateY(-2px); } /* ---- realistic highlighter marker ---- */ .cbp-marker { background: linear-gradient(99deg, transparent 1.5%, var(--mc, rgba(0,255,136,.5)) 3.5%, var(--mc, rgba(0,255,136,.5)) 96%, transparent 99%); mix-blend-mode: multiply; padding: 0 .34em .04em; border-radius: .7em .35em .55em .45em / 1em .5em .85em .4em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transform: rotate(-.5deg); } /* ---- hand-pressed ink stamp ---- */ .cbp-stamp { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; font-size: 9px; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 5px 3px; color: var(--ink); border: 1.4px solid currentColor; border-radius: 3px 2px 3px 2px; opacity: .88; transform: rotate(-2.4deg); mix-blend-mode: multiply; -webkit-mask-image: repeating-linear-gradient(11deg, #000 0 4px, rgba(0,0,0,.74) 4px 5px); mask-image: repeating-linear-gradient(11deg, #000 0 4px, rgba(0,0,0,.74) 4px 5px); } .cbp-stamp.crit { color: #c0392b; transform: rotate(1.8deg); } .cbp-stamp.warn { color: var(--amber); transform: rotate(-1.4deg); } /* ---- paper tag (status pill with marker fill) ---- */ .cbp-tag { position: relative; display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; white-space: nowrap; color: var(--ink); background: var(--paper2); border: 1.5px solid var(--ink); opacity: .92; transform: rotate(-1deg); clip-path: polygon(0 6%, 100% 0, 99% 94%, 1% 100%); } .cbp-tag > .cbp-tag-mark { position: absolute; inset: 0; border-radius: 0; transform: rotate(0deg); background: linear-gradient(99deg, transparent 1.5%, var(--mc) 3.5%, var(--mc) 96%, transparent 99%); mix-blend-mode: multiply; } .cbp-tag > .cbp-tag-txt { position: relative; } /* ---- file-folder card lift (spring physics) ---- */ .cbp-filecard { transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .35s cubic-bezier(.34,1.56,.64,1); will-change: transform; } .cbp-filecard:hover { transform: translateY(-8px) rotate(-.5deg) scale(1.015); box-shadow: 0 2px 3px rgba(44,62,80,.05), 0 18px 30px -10px rgba(44,62,80,.16), 0 34px 60px -18px rgba(44,62,80,.18); z-index: 5; } /* ---- section head ---- */ .cbp-head { margin-bottom: 40px; } .cbp-head .kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 3px; margin-bottom: 8px; color: var(--deep); } .cbp-head .title { font-family: var(--font-hand); font-size: clamp(30px, 4vw, 42px); margin: 0; color: var(--ink); } .cbp-head.light .kicker { color: rgba(255,252,240,.7); } .cbp-head.light .title { color: #fffcf0; } /* ---- ink dot ---- */ .cbp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 1.5px solid var(--ink); box-shadow: 0 0 7px var(--green); display: inline-block; flex: none; vertical-align: middle; } /* ---- origami spider ---- */ .cbp-spider { display: inline-block; line-height: 0; } .cbp-spider svg { display: block; overflow: visible; filter: drop-shadow(1.5px 2.5px 1.5px rgba(70,55,30,.3)); } .cbp-spider .legs { transform-origin: 50px 50px; transition: transform .15s; } .cbp-spider:hover .legs { transform: scale(1.07); } /* ---- progress / data bits ---- */ .cbp-bar-track { height: 7px; border: 1px solid var(--ink); background: var(--paper2); } .cbp-bar-fill { height: 100%; transition: width 1.4s ease; } .cbp-ring-num { font-family: var(--font-mono); font-weight: 700; font-size: 24px; color: var(--ink); } /* dashed divider list rows */ .cbp-dashrow { border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); } .cbp-dashrow:last-child { border-bottom: none; } /* ---- paper physics animations ---- */ @media (prefers-reduced-motion: no-preference) { .cbp-breathe { animation: cbpBreathe 2.8s ease-in-out infinite; } .cb-cursor { animation: cbBlink 1.1s steps(2) infinite; } .cbp-lineIn { animation: cbpLineIn .4s ease both; } .cbp-unfold { animation: cbpUnfold .5s cubic-bezier(.34,1.56,.64,1) both; transform-origin: top center; } .cb-flashRed { animation: cbFlash 1.2s steps(2) infinite; } .cb-flow { animation: cbFlow 1.6s ease-in-out infinite; } .cbp-confetti{ animation: cbpConfetti 1s cubic-bezier(.2,.7,.4,1) both; } .cbp-flipanim{ animation: cbpFlip .6s cubic-bezier(.45,.05,.3,1) both; } } .cb-no-motion .cbp-breathe, .cb-no-motion .cb-cursor, .cb-no-motion .cbp-lineIn, .cb-no-motion .cbp-unfold, .cb-no-motion .cb-flashRed, .cb-no-motion .cb-flow, .cb-no-motion .cbp-confetti, .cb-no-motion .cbp-flipanim { animation: none !important; } .cbp-confetti { position: absolute; display: block; border: 1px solid rgba(70,55,30,.4); } @keyframes cbpBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes cbBlink { 50% { opacity: 0; } } @keyframes cbpLineIn { from { opacity: 0; transform: perspective(500px) rotateX(-35deg); } to { opacity: 1; transform: none; } } @keyframes cbpUnfold { 0% { opacity: 0; transform: perspective(500px) rotateX(-85deg); } 60% { opacity: 1; transform: perspective(500px) rotateX(12deg); } 100% { opacity: 1; transform: none; } } @keyframes cbFlash { 50% { opacity: .3; } } @keyframes cbFlow { 0%, 100% { transform: translateY(-3px); opacity: .6; } 50% { transform: translateY(3px); opacity: 1; } } @keyframes cbpConfetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } } @keyframes cbpFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* ---- small helpers ---- */ .cbp-mut { color: var(--mut); } .cbp-deep { color: var(--deep); } .u-relative { position: relative; } .u-center { text-align: center; } .u-nowrap { white-space: nowrap; } .u-ml-auto { margin-left: auto; } .u-flex { display: flex; } .u-flex-col { display: flex; flex-direction: column; } .u-items-center { align-items: center; } .u-justify-between { justify-content: space-between; } .u-gap-2 { gap: 8px; } .u-gap-3 { gap: 12px; } .u-gap-4 { gap: 16px; } .u-wrap { flex-wrap: wrap; } .u-hide-mobile { display: none; } @media (min-width: 768px) { .u-hide-mobile { display: inline-flex; } } /* ---- legal / content pages (privacy, terms, refund, about, contact) ---- */ .legal-body { font-family: var(--font-mono); color: var(--ink); font-size: 14px; line-height: 1.8; } .legal-body h2 { font-family: var(--font-mono); font-size: 15px; font-weight: 800; letter-spacing: .5px; margin: 36px 0 12px; color: var(--ink); } .legal-body p { margin: 0 0 16px; color: #3a4a5a; } .legal-body ul { margin: 0 0 16px; padding-left: 20px; } .legal-body li { margin: 0 0 10px; color: #3a4a5a; } .legal-body strong { color: var(--ink); } .legal-body a { color: var(--deep); text-decoration: underline; text-underline-offset: 2px; } .legal-body a:hover { color: var(--ink); }