/* ============================================================ bycarla · Design Foundations "Diseño con sensibilidad para comunicar con claridad." Warm, human minimalism — nude, beige & powder pink. ------------------------------------------------------------ Fonts loaded from Google Fonts (substitution — see README). Primary sans: Hanken Grotesk · Editorial serif: Cormorant Garamond ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Outfit:wght@300;400&family=Satisfy&family=Nothing+You+Could+Do&display=swap'); :root { /* ---------- Brand palette ---------------------------------- */ /* Neutrals — warm paper & leather */ --paper: #FBF7F2; /* base background · warm cream */ --paper-2: #FBF7F1; /* lifted surface · near-white warm */ --beige: #ECDDCB; /* nude leather light · cover ground */ --sand: #DCC8B0; /* deeper beige */ --taupe: #BBA68E; /* mid neutral */ /* Powder pink — rosa empolvado (the single emotional accent) */ --blush: #EBD0C8; /* soft powder pink · tints, washes */ --rose: #D5A99D; /* dusty rose · primary accent */ --clay: #B07A6C; /* deep clay · emphasis, used sparingly */ /* Scrapbook accents (from reference palette: rosé · Dusty Rose) */ --rose-ref: #E9C2B5; /* "rosé" · reference swatch */ --dusty-rose: #A6555F; /* "Dusty Rose" · deeper mauve */ --garnet: #8B2E3C; /* handwritten script ink */ --cream: #EDE6D6; /* "Clotted Cream" · paper/polaroid */ --leather: #5C4231; /* notebook cover brown */ --leather-2: #6E4F3A; /* lifted leather highlight */ --cover-ground: #4A3526; /* portada (cubierta) — tono fijado como base */ /* Ink — warm espresso, never pure black */ --ink: #322A22; /* primary text */ --graphite: #5E5346; /* secondary text */ --stone: #8E8273; /* muted text, captions */ --line: #E4D8C8; /* hairline borders on paper */ --line-soft: #EFE7DA; /* faintest divider */ --white: #FFFFFF; /* ---------- Semantic surface / text ----------------------- */ --bg: var(--paper); --surface: var(--paper-2); --surface-cover: var(--beige); --text: var(--ink); --text-soft: var(--graphite); --text-muted: var(--stone); --border: var(--line); --accent: var(--rose); --accent-strong: var(--clay); --accent-wash: var(--blush); /* ---------- Type families --------------------------------- */ --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-script: 'Kaushan Script', 'Segoe Script', cursive; /* ---------- Type scale (1.250 · major third) -------------- */ --text-xs: 0.75rem; /* 12px · micro labels */ --text-sm: 0.875rem; /* 14px · captions */ --text-base: 1rem; /* 16px · body */ --text-md: 1.125rem; /* 18px · lead body */ --text-lg: 1.5rem; /* 24px · h4 / large */ --text-xl: 2rem; /* 32px · h3 */ --text-2xl: 2.75rem; /* 44px · h2 */ --text-3xl: 3.75rem; /* 60px · h1 */ --text-4xl: 5.5rem; /* 88px · display */ /* ---------- Weights --------------------------------------- */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600; /* ---------- Letterspacing --------------------------------- */ --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.08em; /* eyebrows, labels */ --track-stamp: 0.32em; /* the "stamped on the cover" label look */ /* ---------- Line heights ---------------------------------- */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.6; /* ---------- Spacing (8px base, generous whitespace) ------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ---------- Radii (soft, never sharp) --------------------- */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ---------- Shadows (low, warm, diffuse) ------------------ */ --shadow-sm: 0 1px 2px rgba(50, 42, 34, 0.04), 0 1px 3px rgba(50, 42, 34, 0.05); --shadow-md: 0 6px 18px rgba(50, 42, 34, 0.06), 0 2px 6px rgba(50, 42, 34, 0.05); --shadow-lg: 0 24px 60px rgba(50, 42, 34, 0.10), 0 8px 20px rgba(50, 42, 34, 0.06); /* ---------- Motion ---------------------------------------- */ --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* calm, settling */ --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; } /* ============================================================ Base semantic styles ============================================================ */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--w-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-sans); font-size: var(--text-3xl); font-weight: var(--w-light); line-height: var(--leading-tight); letter-spacing: var(--track-tight); color: var(--text); } h2, .h2 { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: var(--w-light); line-height: var(--leading-snug); letter-spacing: var(--track-tight); color: var(--text); } h3, .h3 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--w-regular); line-height: var(--leading-snug); letter-spacing: var(--track-tight); color: var(--text); } h4, .h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--w-medium); line-height: var(--leading-snug); color: var(--text); } p, .body { font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-soft); text-wrap: pretty; } .lead { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-soft); font-weight: var(--w-light); } /* Editorial serif display — used sparingly for emotional moments */ .display-serif { font-family: var(--font-serif); font-weight: var(--w-light); font-size: var(--text-4xl); line-height: 1.04; letter-spacing: -0.01em; color: var(--text); } .serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: var(--w-regular); } /* Eyebrow / label — the "stamped" look */ .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-muted); } .stamp { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-regular); letter-spacing: var(--track-stamp); text-transform: uppercase; color: var(--text-soft); } .caption { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); } /* Wordmark */ .wordmark { font-family: var(--font-sans); font-weight: var(--w-light); letter-spacing: 0.02em; color: var(--text); } .wordmark b { font-weight: var(--w-semi); } /* ============================================================ Logotipo oficial · "bycarla" (dirección 3A · sans + punto) Uso: ============================================================ */ .bycarla-logo { font-family: var(--font-sans); font-weight: var(--w-light); color: var(--ink); letter-spacing: -0.005em; line-height: 1; display: inline-flex; align-items: center; white-space: nowrap; } .bycarla-logo b { font-weight: var(--w-semi); } .bycarla-logo .b1 { letter-spacing: -0.03em; margin-right: 0.015em; } .bycarla-logo .dot { width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--rose); margin-left: 0.14em; align-self: flex-end; margin-bottom: 0.14em; } .bycarla-logo.on-ink { color: var(--paper); } .bycarla-logo.on-ink .dot { background: var(--rose-ref); }