/* ========================================================= oDuque — Design System Tokens Brand DNA: terracotta orange + espresso + paper cream, warmed by playful saturated accents. Lúdico yet grounded. ========================================================= */ /* Font imports moved to tags in each HTML for faster loading */ :root { /* ---------- Core brand ---------- */ --od-orange: #E94E1B; /* primary, from logo */ --od-orange-deep: #C23E11; /* hover/pressed */ --od-orange-soft: #F8A582; /* tints */ --od-orange-wash: #FDE4D6; /* backgrounds */ --od-ink: #1A1512; /* espresso, near-black warm */ --od-ink-2: #3C322C; --od-ink-3: #6B5D53; --od-ink-4: #A99C8C; /* muted footer/secondary text */ --od-ink-5: #BDB1A4; /* subdued labels */ --od-paper: #FAF4EC; /* cream canvas */ --od-paper-2: #F1E7D7; /* section/alt bg */ --od-paper-3: #EBE0CF; /* card surfaces */ --od-paper-4: #E3D4BC; /* dividers, chips */ /* ---------- Playful accents (from flyer DNA) ---------- */ --od-mustard: #E8B732; /* yellow stars/highlights */ --od-forest: #2E5D3A; /* deep green */ --od-sky: #2F6FB5; /* bookspine blue */ --od-plum: #5B2A48; /* flyer bg undertone */ --od-brick: #A83A22; /* muted red-orange */ /* ---------- Functional ---------- */ --od-success: #2E5D3A; --od-warning: #E8B732; --od-danger: #C23E11; --od-info: #2F6FB5; --od-wa: #25D366; /* WhatsApp brand green */ --od-wa-hover: #1DA851; /* ---------- Type ---------- */ --od-font-display: 'eroika-slab', Georgia, serif; --od-font-body: 'Familjen Grotesk', -apple-system, sans-serif; --od-font-mono: 'JetBrains Mono', monospace; --od-text-xs: 12px; --od-text-sm: 14px; --od-text-base: 16px; --od-text-md: 18px; --od-text-lg: 22px; --od-text-xl: 28px; --od-text-2xl: 36px; --od-text-3xl: 48px; --od-text-4xl: 64px; --od-text-5xl: 88px; --od-text-6xl: 120px; /* ---------- Spacing (4px base) ---------- */ --od-s-1: 4px; --od-s-2: 8px; --od-s-3: 12px; --od-s-4: 16px; --od-s-5: 20px; --od-s-6: 24px; --od-s-8: 32px; --od-s-10: 40px; --od-s-12: 48px; --od-s-16: 64px; --od-s-20: 80px; --od-s-24: 96px; --od-s-32: 128px; /* ---------- Radius ---------- */ --od-r-xs: 4px; --od-r-sm: 8px; --od-r-md: 14px; --od-r-lg: 22px; --od-r-xl: 32px; --od-r-pill: 999px; /* ---------- Shadows ---------- */ --od-shadow-sm: 0 1px 2px rgba(26, 21, 18, 0.06), 0 1px 1px rgba(26, 21, 18, 0.04); --od-shadow-md: 0 4px 12px rgba(26, 21, 18, 0.08), 0 2px 4px rgba(26, 21, 18, 0.04); --od-shadow-lg: 0 16px 40px rgba(26, 21, 18, 0.12), 0 4px 12px rgba(26, 21, 18, 0.06); --od-shadow-pop: 6px 6px 0 var(--od-ink); /* chunky brutalist pop */ --od-shadow-pop-sm: 3px 3px 0 var(--od-ink); /* ---------- Motion ---------- */ --od-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --od-fast: 150ms; --od-base: 220ms; --od-slow: 380ms; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--od-font-body); font-size: var(--od-text-base); color: var(--od-ink); background: var(--od-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--od-font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } img, svg { display: block; max-width: 100%; } /* ---------- Utility primitives ---------- */ .od-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--od-s-8); } .od-stack > * + * { margin-top: var(--od-s-4); } .od-row { display: flex; align-items: center; gap: var(--od-s-3); } /* ---------- Button primitives ---------- */ .od-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--od-s-2); padding: 14px 22px; font-family: var(--od-font-body); font-weight: 600; font-size: 15px; border-radius: var(--od-r-pill); border: 2px solid transparent; transition: transform var(--od-fast) var(--od-ease), background var(--od-fast) var(--od-ease), box-shadow var(--od-fast) var(--od-ease); white-space: nowrap; } .od-btn:active { transform: translate(2px, 2px); } .od-btn--primary { background: var(--od-orange); color: white; box-shadow: var(--od-shadow-pop-sm); border-color: var(--od-ink); } .od-btn--primary:hover { background: var(--od-orange-deep); } .od-btn--ghost { background: transparent; color: var(--od-ink); border-color: var(--od-ink); } .od-btn--ghost:hover { background: var(--od-ink); color: var(--od-paper); } .od-btn--secondary { background: var(--od-ink); color: var(--od-paper); border-color: var(--od-ink); } .od-btn--secondary:hover { background: var(--od-ink-2); } .od-btn--link { background: transparent; color: var(--od-orange); padding: 8px 0; border-radius: 0; border-bottom: 2px solid var(--od-orange); border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; } /* ---------- Chips ---------- */ .od-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: var(--od-r-pill); background: var(--od-paper-3); color: var(--od-ink); border: 1.5px solid var(--od-ink); } .od-chip--orange { background: var(--od-orange-wash); border-color: var(--od-orange); color: var(--od-orange-deep); } .od-chip--ink { background: var(--od-ink); color: var(--od-paper); border-color: var(--od-ink); } .od-chip--mustard { background: var(--od-mustard); color: var(--od-ink); } .od-chip--forest { background: var(--od-forest); color: var(--od-paper); border-color: var(--od-forest); } /* ---------- Card ---------- */ .od-card { background: var(--od-paper); border: 2px solid var(--od-ink); border-radius: var(--od-r-md); padding: var(--od-s-6); } .od-card--pop { box-shadow: var(--od-shadow-pop-sm); } .od-card--soft { border: 1px solid var(--od-paper-3); background: white; } /* ---------- Page load cover ---------- */ #page-cover { position: fixed; inset: 0; background: var(--od-paper-2); z-index: 9999; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #page-cover.is-gone { opacity: 0; pointer-events: none; } /* ---------- Scroll reveal — slide up ---------- */ .od-reveal { opacity: 0; transform: translateY(56px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .od-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Fade only ---------- */ .od-fade { opacity: 0; transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .od-fade.is-visible { opacity: 1; } /* ---------- Text colour reveal ---------- */ .od-reveal-color { color: var(--od-paper-3); transition: color 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .od-reveal-color.is-visible { color: var(--od-ink); } /* Combined fade-up + colour */ .od-reveal-full { opacity: 0; transform: translateY(40px); color: var(--od-paper-3); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), color 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .od-reveal-full.is-visible { opacity: 1; transform: translateY(0); color: var(--od-ink); } /* ---------- Card spin-in ---------- */ .od-spin { opacity: 0; transform: rotate(-5deg) translateY(52px) scale(0.94); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .od-spin.is-visible { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); } /* Alternate — rotate from right */ .od-spin-r { opacity: 0; transform: rotate(5deg) translateY(52px) scale(0.94); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; } .od-spin-r.is-visible { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); } /* ---------- Typewriter cursor ---------- */ .od-typewriter { display: inline-block; min-height: 1em; } .od-typewriter.is-typing::after { content: '|'; animation: od-blink 0.65s step-end infinite; color: var(--od-orange); margin-left: 2px; font-weight: 400; } @keyframes od-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .od-reveal, .od-fade, .od-reveal-color, .od-reveal-full, .od-spin, .od-spin-r { transition: none !important; opacity: 1 !important; transform: none !important; color: inherit !important; } .od-typewriter.is-typing::after { animation: none; } } /* ---------- Orçamento modal ---------- */ .orc-backdrop { position: fixed; inset: 0; background: rgba(26, 21, 18, 0.6); backdrop-filter: blur(4px); z-index: 500; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .orc-backdrop.is-open { opacity: 1; visibility: visible; } .orc-backdrop.is-open .orc-modal { transform: translateY(0); } .orc-modal { background: var(--od-paper); border: 2px solid var(--od-ink); border-bottom: none; border-radius: var(--od-r-xl) var(--od-r-xl) 0 0; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 36px 32px 40px; position: relative; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 -8px 40px rgba(26,21,18,0.15); } .orc-handle { width: 40px; height: 4px; background: var(--od-paper-3); border-radius: 2px; margin: 0 auto 28px; } .orc-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--od-paper-2); border: 1.5px solid var(--od-paper-3); font-size: 20px; line-height: 1; color: var(--od-ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--od-fast), border-color var(--od-fast); } .orc-close:hover { background: var(--od-ink); color: var(--od-paper); border-color: var(--od-ink); } .orc-eyebrow { font-family: var(--od-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--od-orange); display: block; margin-bottom: 10px; } .orc-modal h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.05; margin-bottom: 8px; } .orc-modal h2 em { font-style: italic; color: var(--od-orange); } .orc-modal > p { font-size: 14px; color: var(--od-ink-3); margin-bottom: 28px; } .orc-form { display: flex; flex-direction: column; gap: 18px; } .orc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .orc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .orc-chip { padding: 10px 14px; min-height: 44px; font-family: var(--od-font-body); font-size: 13px; font-weight: 600; border: 1.5px solid var(--od-paper-3); border-radius: var(--od-r-pill); background: var(--od-paper-2); color: var(--od-ink-2); cursor: pointer; transition: all 0.15s; } .orc-chip:hover { border-color: var(--od-ink); color: var(--od-ink); } .orc-chip.is-active { background: var(--od-ink); color: var(--od-paper); border-color: var(--od-ink); } .orc-textarea { display: block; width: 100%; padding: 12px 14px; font-family: var(--od-font-body); font-size: 16px; color: var(--od-ink); background: white; border: 2px solid var(--od-ink); border-radius: var(--od-r-sm); outline: none; resize: vertical; min-height: 90px; transition: box-shadow var(--od-fast) var(--od-ease); } .orc-textarea:focus { box-shadow: 0 0 0 3px var(--od-orange-soft); } .orc-textarea::placeholder { color: var(--od-ink-3); } .orc-submit { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; background: var(--od-wa); color: var(--od-paper); border: 2px solid var(--od-ink); border-radius: var(--od-r-pill); font-family: var(--od-font-body); font-size: 15px; font-weight: 700; box-shadow: 3px 3px 0 var(--od-ink); cursor: pointer; transition: background var(--od-fast), transform var(--od-fast), box-shadow var(--od-fast); width: 100%; } .orc-submit:hover { background: var(--od-wa-hover); } .orc-submit:active { transform: translate(2px,2px); box-shadow: none; } @media (max-width: 600px) { .orc-backdrop { padding-top: 50px; } .orc-modal { max-height: 86vh; max-height: 86dvh; padding: 24px 18px 28px; } .orc-row { grid-template-columns: 1fr; } } /* ---------- Input ---------- */ .od-input { display: block; width: 100%; padding: 12px 14px; font-family: var(--od-font-body); font-size: 16px; color: var(--od-ink); background: white; border: 2px solid var(--od-ink); border-radius: var(--od-r-sm); outline: none; transition: box-shadow var(--od-fast) var(--od-ease); } .od-input:focus { box-shadow: 0 0 0 3px var(--od-orange-soft); } .od-input::placeholder { color: var(--od-ink-3); } .od-label { display: block; font-size: 13px; font-weight: 600; color: var(--od-ink-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }