/* ============================================================================ * Kurado · themes/minimal/style.css * Design system portado desde la landing Kurado v2 (Tailwind 4 → CSS plano). * Radius 0, monocromo, oklch, tipografía display. * ========================================================================== */ /* Light (default) -------------------------------------------------------- */ :root{ --radius: 0px; --background: oklch(0.985 0.003 90); --foreground: oklch(0.13 0 0); --card: oklch(0.985 0.003 90); --card-foreground: oklch(0.13 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0 0); --primary: oklch(0.13 0 0); --primary-foreground: oklch(0.985 0.003 90); --secondary: oklch(0.94 0.005 90); --secondary-foreground:oklch(0.13 0 0); --muted: oklch(0.94 0.005 90); --muted-foreground: oklch(0.45 0.005 90); --accent: oklch(0.92 0.006 90); --accent-foreground: oklch(0.13 0 0); --destructive: oklch(0.55 0.22 27); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.13 0 0 / 0.12); --input: oklch(0.13 0 0 / 0.15); --ring: oklch(0.13 0 0 / 0.4); --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif; /* El cliente puede sobreescribir --kurado-primary desde el dashboard */ --kurado-primary: var(--primary); } /* Dark (toggle .dark en ) ----------------------------------------- */ html.dark{ --background: oklch(0.13 0.003 90); --foreground: oklch(0.97 0.003 90); --card: oklch(0.13 0.003 90); --card-foreground: oklch(0.97 0.003 90); --popover: oklch(0.17 0.003 90); --popover-foreground: oklch(0.97 0.003 90); --primary: oklch(0.97 0.003 90); --primary-foreground: oklch(0.13 0.003 90); --secondary: oklch(0.20 0.004 90); --secondary-foreground:oklch(0.97 0.003 90); --muted: oklch(0.20 0.004 90); --muted-foreground: oklch(0.65 0.005 90); --accent: oklch(0.22 0.004 90); --accent-foreground: oklch(0.97 0.003 90); --border: oklch(0.97 0 0 / 0.14); --input: oklch(0.97 0 0 / 0.18); --ring: oklch(0.97 0 0 / 0.4); } /* Base ------------------------------------------------------------------ */ *{ border-color: var(--border); box-sizing: border-box; } html{ font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } body{ margin: 0; background-color: var(--background); color: var(--foreground); transition: background-color .3s ease, color .3s ease; } ::selection{ background-color: var(--foreground); color: var(--background); } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } /* Utilidades editoriales ------------------------------------------------ */ .font-display{ font-family: var(--font-display); font-feature-settings: "ss01","ss02"; } .display-xl{ font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 11vw, 10.5rem); line-height: 0.88; letter-spacing: -0.045em; } .display-lg{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 7vw, 6rem); line-height: 0.92; letter-spacing: -0.04em; } .display-md{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 0.95; letter-spacing: -0.03em; } .eyebrow{ font-family: var(--font-sans); font-size: .7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } .hairline{ border: 0; border-top: 1px solid var(--foreground); opacity: 0.18; margin: 0; } .italic{ font-style: italic; } /* Animación fade-up ----------------------------------------------------- */ .fade-up{ opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(0.2,0.7,0.2,1), transform .9s cubic-bezier(0.2,0.7,0.2,1); will-change: opacity, transform; } .fade-up.is-visible{ opacity: 1; transform: translateY(0); } /* Marquee --------------------------------------------------------------- */ @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } @keyframes marquee-reverse { from{transform:translateX(-50%)} to{transform:translateX(0)} } .animate-marquee { animation: marquee 60s linear infinite; } .animate-marquee-reverse { animation: marquee-reverse 75s linear infinite; } .marquee-pause:hover .animate-marquee, .marquee-pause:hover .animate-marquee-reverse { animation-play-state: paused; } /* Header / Nav ---------------------------------------------------------- */ .site-header{ position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 18px; } .nav{ display: flex; align-items: center; gap: 8px; } .nav a{ font-size: .72rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 14px; border: 1px solid transparent; } .nav a:hover{ border-color: var(--border); } .nav a.is-active{ background: var(--foreground); color: var(--background); } .lang{ display: inline-flex; border: 1px solid var(--border); } .lang button{ background: transparent; color: inherit; border: 0; font: inherit; padding: 8px 12px; cursor: pointer; font-size: .72rem; letter-spacing: 0.18em; text-transform: uppercase; } .lang button.is-active{ background: var(--foreground); color: var(--background); } .theme-toggle{ width: 38px; height: 38px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; display: inline-grid; place-items: center; } .theme-toggle:hover{ background: var(--muted); } /* Container ------------------------------------------------------------- */ .container{ max-width: 1400px; margin: 0 auto; padding: 0 28px; } /* Hero ------------------------------------------------------------------ */ .hero{ padding: 80px 0 60px; } .hero .meta-row{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; } .hero h1{ margin: 8px 0 0; } /* Manifiesto block ------------------------------------------------------ */ .manifiesto{ display: grid; grid-template-columns: 200px 1fr 240px; gap: 32px; padding: 32px 0 80px; align-items: start; } @media (max-width: 900px){ .manifiesto{ grid-template-columns: 1fr; } } .manifiesto p{ font-size: 1rem; line-height: 1.55; max-width: 620px; } .cta-block{ background: var(--foreground); color: var(--background); padding: 32px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-display); letter-spacing: -0.01em; cursor: pointer; } .cta-block .arrow{ font-size: 1.4em; } /* Section header (genérico) -------------------------------------------- */ .section{ padding: 64px 0; border-top: 1px solid var(--border); } .section-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; } .section-head h2{ margin: 0; } /* Grid de places -------------------------------------------------------- */ .places-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .place-card{ border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: background .25s ease; } .place-card:hover{ background: var(--muted); } .place-card .thumb{ aspect-ratio: 4/3; background: var(--muted); overflow: hidden; } .place-card .thumb img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); transition: filter .3s ease, transform .6s ease; } .place-card:hover .thumb img{ filter: grayscale(0%); transform: scale(1.03); } .place-card h3{ margin: 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.05; } .place-card p{ margin: 0; color: var(--muted-foreground); font-size: .92rem; } .place-card .num{ font-size: .7rem; letter-spacing: .18em; color: var(--muted-foreground); } /* Events list (filas horizontales editoriales) ------------------------- */ .events-list{ display: flex; flex-direction: column; border-top: 1px solid var(--border); } .event-card{ display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .25s ease; } .event-card:hover{ background: var(--muted); } .event-card .thumb{ aspect-ratio: 4/3; background: var(--muted); overflow: hidden; margin-left: 24px; } .event-card .thumb img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); transition: filter .3s ease, transform .6s ease; } .event-card:hover .thumb img{ filter: grayscale(0%); transform: scale(1.03); } .event-card .event-meta{ padding-right: 24px; display:flex; flex-direction:column; gap:6px; } .event-card h3{ margin: 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.05; } .event-card .event-place{ margin: 0; color: var(--foreground); font-size: .9rem; } .event-card .event-short{ margin: 0; color: var(--muted-foreground); font-size: .92rem; } @media (max-width: 720px){ .event-card{ grid-template-columns: 1fr; } .event-card .thumb{ margin: 0 24px; } .event-card .event-meta{ padding: 0 24px; } } /* Stories grid (similar a places, más texto) --------------------------- */ .stories-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .story-card{ border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: background .25s ease; } .story-card:hover{ background: var(--muted); } .story-card .thumb{ aspect-ratio: 16/9; background: var(--muted); overflow: hidden; } .story-card .thumb img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); transition: filter .3s ease, transform .6s ease; } .story-card:hover .thumb img{ filter: grayscale(0%); transform: scale(1.03); } .story-card .num{ font-size: .7rem; letter-spacing: .18em; color: var(--muted-foreground); } .story-card h3{ margin: 0; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.1; } .story-card .story-meta{ margin: 0; color: var(--muted-foreground); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .story-card .story-excerpt{ margin: 0; color: var(--muted-foreground); font-size: .95rem; } /* Detalle (overlay full-screen) ---------------------------------------- */ .detail-overlay{ position: fixed; inset: 0; z-index: 60; background: var(--background); overflow-y: auto; display: none; } .detail-overlay.is-open{ display: block; } .detail-overlay .close-btn{ position: fixed; top: 18px; right: 28px; background: var(--foreground); color: var(--background); border: 0; width: 44px; height: 44px; font: inherit; cursor: pointer; } .detail-hero{ height: 70vh; min-height: 420px; background: var(--muted); position: relative; display: grid; place-items: end start; } .detail-hero img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .detail-hero .title-stack{ position: relative; z-index: 2; padding: 28px; background: linear-gradient(to top, color-mix(in oklab, var(--background) 70%, transparent), transparent 70%); width: 100%; } .detail-body{ padding: 48px 28px; max-width: 800px; margin: 0 auto; } .detail-body p{ font-size: 1.05rem; line-height: 1.65; } /* Custom pages section ------------------------------------------------- */ .cp-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .cp-card{ border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px; cursor: pointer; transition: background .25s ease; display: flex; flex-direction: column; gap: 6px; min-height: 180px; } .cp-card:hover{ background: var(--muted); } .cp-card .arrow{ margin-top: auto; font-size: 1.2em; } .cp-card h3{ margin: 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; } /* Custom page (overlay) ----------------------------------------------- */ .cp-overlay{ position: fixed; inset: 0; z-index: 60; background: var(--background); overflow-y: auto; display: none; } .cp-overlay.is-open{ display: block; } .cp-overlay .close-btn{ position: fixed; top: 18px; right: 28px; background: var(--foreground); color: var(--background); border: 0; width: 44px; height: 44px; font: inherit; cursor: pointer; z-index: 1; } .cp-content{ padding: 80px 28px 64px; max-width: 760px; margin: 0 auto; } .cp-content h1{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 32px; } .cp-content h2{ font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; margin: 36px 0 12px; } .cp-content p{ font-size: 1.05rem; line-height: 1.65; margin: 0 0 18px; } .cp-content img{ margin: 24px 0; } /* Footer --------------------------------------------------------------- */ .site-footer{ border-top: 1px solid var(--border); padding: 48px 28px 36px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; } .site-footer .brand-foot{ font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 6vw, 5rem); letter-spacing: -0.04em; line-height: 0.9; } .site-footer small{ color: var(--muted-foreground); font-size: .8rem; } /* Empty state ---------------------------------------------------------- */ .empty{ padding: 80px 28px; text-align: center; color: var(--muted-foreground); }