/* ============ TOKENS ============ */ :root { --cream: oklch(0.96 0.012 90); --paper: oklch(0.93 0.018 85); --paper-2: oklch(0.89 0.022 82); --ink: oklch(0.22 0.015 80); --ink-soft: oklch(0.36 0.018 78); --sage: oklch(0.62 0.035 140); --sage-dk: oklch(0.46 0.04 135); --earth: oklch(0.48 0.055 55); --moss: oklch(0.32 0.025 130); --hair: oklch(0.82 0.02 80); --font-display: "Instrument Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-italic: "Cormorant Garamond", "Instrument Serif", Georgia, serif; --font-ui: "Inconsolata", ui-monospace, Menlo, monospace; /* will be overridden for body */ --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; --max: 1240px; --gutter: clamp(20px, 5vw, 64px); } /* Aesthetic presets (applied via data-aesthetic on ) */ body[data-aesthetic="terrosa"] { --bg: var(--cream); --fg: var(--ink); --accent: var(--sage-dk); --accent-2: var(--earth); --panel: var(--paper); --panel-2: var(--paper-2); } body[data-aesthetic="salvia"] { --bg: oklch(0.92 0.02 135); --fg: oklch(0.2 0.02 130); --accent: oklch(0.38 0.035 135); --accent-2: oklch(0.5 0.05 55); --panel: oklch(0.88 0.025 132); --panel-2: oklch(0.82 0.03 130); } body[data-aesthetic="tinta"] { --bg: oklch(0.16 0.01 130); --fg: oklch(0.94 0.015 90); --accent: oklch(0.72 0.04 140); --accent-2: oklch(0.7 0.06 55); --panel: oklch(0.22 0.015 130); --panel-2: oklch(0.28 0.018 130); --hair: oklch(0.32 0.02 130); --ink: oklch(0.94 0.015 90); --ink-soft: oklch(0.74 0.015 90); } /* ============ BASE ============ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .serif-italic { font-family: var(--font-italic); font-style: italic; font-weight: 400; } .ornament { width: 120px; height: 8px; stroke: currentColor; fill: currentColor; opacity: 0.5; } .ornament line { stroke-width: 0.5; } /* ============ NAV ============ */ .nav-top, .nav-inline, .nav-dots__top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); } .nav-top__brand, .nav-inline__brand, .nav-dots__brand { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; display: flex; align-items: center; } .brand-mark { height: 40px; width: auto; display: block; } .brand-mark--sm { height: 32px; } .brand-mark--md { height: 56px; } body[data-aesthetic="tinta"] .brand-mark { filter: invert(0.9) sepia(0.25) saturate(1.3) hue-rotate(60deg); } .nav-top__burger { width: 36px; height: 36px; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .nav-top__burger span { display: block; width: 22px; height: 1px; background: currentColor; margin: 0 auto; } .nav-top__right { display: flex; gap: 8px; } .chip { border: 1px solid var(--hair); border-radius: 999px; padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; } .chip:hover { background: var(--panel); } .chip--ghost { padding: 6px 10px; } .chip--music { gap: 6px; } .chip__note { font-family: var(--font-mono); font-size: 12px; line-height: 1; color: var(--accent); } .chip__music-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* Music toggle hint bubble */ .music-btn-wrap { position: relative; display: inline-flex; } .music-hint { position: absolute; top: calc(100% + 9px); right: 0; white-space: nowrap; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s; box-shadow: 0 8px 22px color-mix(in oklch, var(--accent) 32%, transparent); z-index: 60; } .music-hint::before { content: ''; position: absolute; bottom: 100%; right: 16px; border: 5px solid transparent; border-bottom-color: var(--accent); } .music-btn-wrap:hover .music-hint { opacity: 1; transform: translateY(0); } .music-hint--auto { animation: musicHintPop 5.5s ease 1.2s both; } @keyframes musicHintPop { 0%, 100% { opacity: 0; transform: translateY(-4px); } 10%, 78% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .music-hint--auto { animation: none; } } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); transition: background 0.3s; } .dot.on { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } /* Drawer */ .drawer { position: fixed; inset: 0; z-index: 50; background: color-mix(in oklch, var(--ink) 40%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.4s; } .drawer--open { opacity: 1; pointer-events: auto; } .drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(420px, 88vw); height: 100%; background: var(--bg); padding: 24px; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); border-right: 1px solid var(--hair); overflow-y: auto; -webkit-overflow-scrolling: touch; } .drawer--open .drawer__panel { transform: translateX(0); } .drawer__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--hair); flex-shrink: 0; } .drawer__head button { font-size: 18px; } .drawer__list { list-style: none; padding: 24px 0; margin: 0; flex: 1 0 auto; } .drawer__list li { border-bottom: 1px dashed var(--hair); } .drawer__list button { width: 100%; display: flex; align-items: baseline; gap: 16px; padding: 14px 0; text-align: left; } .drawer__list .mono { color: var(--ink-soft); min-width: 24px; } .drawer__lbl { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.01em; } .drawer__foot { padding-top: 16px; border-top: 1px solid var(--hair); color: var(--ink-soft); flex-shrink: 0; } /* Inline nav (desktop) */ .nav-inline__links { display: none; gap: 24px; } .nav-inline__links button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .nav-inline__links button:hover { color: var(--fg); } .nav-inline__right { display: flex; gap: 8px; } @media (min-width: 900px) { .nav-inline__links { display: flex; } } /* Dots nav (side) */ .nav-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 30; display: none; flex-direction: column; gap: 6px; } .nav-dots__item { display: flex; align-items: center; gap: 10px; padding: 4px 0; color: var(--ink-soft); } .nav-dots__num { font-family: var(--font-mono); font-size: 10px; opacity: 0; transition: opacity 0.2s; } .nav-dots__bullet { width: 16px; height: 1px; background: currentColor; transition: width 0.2s, background 0.2s; } .nav-dots__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.2s; white-space: nowrap; } .nav-dots__item:hover { color: var(--fg); } .nav-dots__item:hover .nav-dots__bullet { width: 28px; background: var(--accent); } .nav-dots__item:hover .nav-dots__num, .nav-dots__item:hover .nav-dots__lbl { opacity: 1; } @media (min-width: 900px) { .nav-dots { display: flex; } } /* ============ HERO — editorial ============ */ .hero { min-height: 100svh; padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; position: relative; } .hero--editorial { justify-content: space-between; gap: 40px; } .hero-ed__logo { display: flex; justify-content: center; padding: 8px 0; } .hero-ed__logo img { height: clamp(80px, 14vw, 140px); width: auto; } body[data-aesthetic="tinta"] .hero-ed__logo img { filter: invert(0.9) sepia(0.25) saturate(1.3) hue-rotate(60deg); } .hero-ed__hero-img { margin: clamp(16px, 3vw, 28px) calc(var(--gutter) * -1) 0; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel); } .hero-ed__hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; transform: scale(1.08); filter: sepia(0.3) contrast(1.18) saturate(0.7) brightness(1.08); mix-blend-mode: multiply; } body[data-aesthetic="tinta"] .hero-ed__hero-img { background: var(--panel-2); } body[data-aesthetic="tinta"] .hero-ed__hero-img img { filter: invert(0.92) sepia(0.3) contrast(1.15) brightness(1.1); mix-blend-mode: screen; } .hero-ed__hero-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, color-mix(in oklch, var(--bg) 45%, transparent) 100%), linear-gradient(180deg, transparent 60%, color-mix(in oklch, var(--bg) 55%, transparent) 100%); pointer-events: none; } .hero-ed__hero-img-logo { position: absolute; top: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); width: auto; height: clamp(80px, 16vw, 180px); z-index: 3; object-fit: contain !important; transform: none !important; filter: none !important; mix-blend-mode: normal !important; pointer-events: none; } .hero-ed__hero-img-logo--cream { filter: drop-shadow(0 2px 12px rgba(0,0,0,0.25)) !important; } .hero-ed__hero-img-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 14px; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); padding: 6px 10px; background: color-mix(in oklch, var(--bg) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2; } .hero-ed__top { display: flex; justify-content: space-between; color: var(--ink-soft); } .hero-ed__mid { display: flex; flex-direction: column; gap: 32px; } .hero-ed__names { font-family: var(--font-display); font-weight: 400; line-height: 0.88; letter-spacing: -0.02em; font-size: clamp(72px, 18vw, 220px); margin: 0; display: flex; flex-direction: column; } .hero-ed__names > span:nth-child(1) { align-self: flex-start; } .hero-ed__names > span:nth-child(3) { align-self: flex-end; } .hero-ed__names .amp { align-self: center; font-family: var(--font-italic); font-style: italic; font-size: 0.8em; color: var(--accent); margin: -0.2em 0; } .hero-ed__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--hair); padding-top: 20px; } .hero-ed__meta > div { display: flex; flex-direction: column; gap: 4px; } .hero-ed__meta > div:nth-child(2) { align-items: center; text-align: center; } .hero-ed__meta > div:nth-child(3) { align-items: flex-end; text-align: right; } .hero-ed__meta .lbl { color: var(--ink-soft); } .hero-ed__meta .val { font-family: var(--font-display); font-size: clamp(22px, 4vw, 32px); } .hero-ed__cd { display: flex; gap: 14px; align-items: baseline; color: var(--ink-soft); padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); flex-wrap: wrap; } .hero-ed__cd-num { font-family: var(--font-display); font-size: clamp(40px, 8vw, 72px); color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; } .hero-ed__cd-rest { margin-left: auto; font-variant-numeric: tabular-nums; } .hero-ed__foot { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); } /* ---- Editorial hero — mobile fit ---- */ @media (max-width: 640px) { .hero--editorial { justify-content: flex-start; gap: 28px; padding-top: 16px; } .hero-ed__hero-img { aspect-ratio: 3 / 4; margin-top: 4px; } .hero-ed__hero-img-logo { top: 50% !important; left: 50% !important; height: auto !important; width: 58% !important; transform: translate(-50%, -50%) !important; } .hero-ed__hero-img-cap { font-size: 10px; bottom: 10px; padding: 5px 8px; } .hero-ed__mid { gap: 24px; } .hero-ed__meta { padding-top: 16px; gap: 10px; } .hero-ed__meta .val { font-size: clamp(20px, 6vw, 26px); } .hero-ed__cd { padding-top: 8px; } } /* ============ HERO — poster ============ */ .hero--poster { padding: 24px var(--gutter); } .hero-po__frame { flex: 1; border: 1px solid var(--hair); padding: clamp(20px, 5vw, 60px); position: relative; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(ellipse at 20% 10%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 60%), radial-gradient(ellipse at 80% 90%, color-mix(in oklch, var(--accent-2) 10%, transparent), transparent 60%), var(--bg); } .hero-po__logo { position: absolute; top: 50%; right: clamp(30px, 6vw, 80px); transform: translateY(-50%); height: clamp(120px, 22vw, 280px); width: auto; opacity: 0.92; pointer-events: none; z-index: 0; } .hero-po__stack { position: relative; z-index: 1; } .hero-po__corner { position: absolute; color: var(--ink-soft); z-index: 2; } .hero-po__corner.tl { top: 16px; left: 20px; } .hero-po__corner.tr { top: 16px; right: 20px; } .hero-po__corner.bl { bottom: 16px; left: 20px; } .hero-po__corner.br { bottom: 16px; right: 20px; } .hero-po__stack { display: flex; flex-direction: column; gap: 0; } .hero-po__row { display: flex; align-items: center; } .hero-po__row--amp { justify-content: center; gap: 20px; padding: 8px 0; color: var(--accent); } .hero-po__row--right { justify-content: flex-end; } .hero-po__name { font-family: var(--font-display); font-size: clamp(64px, 16vw, 180px); line-height: 0.9; letter-spacing: -0.02em; } .hero-po__amp { font-family: var(--font-italic); font-style: italic; font-size: clamp(40px, 8vw, 88px); } .hero-po__amp-lbl { color: var(--ink-soft); } .hero-po__cd { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 40px; } .hero-po__cd-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-top: 1px solid var(--hair); } .hero-po__cd-item b { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 6vw, 48px); font-variant-numeric: tabular-nums; line-height: 1; } .hero-po__cd-item i { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* ============ HERO — image ============ */ .hero--image { padding: 0; min-height: 100svh; } .hero-im__photo { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; } .hero-im__photo > div:first-child { width: 100%; height: 100%; flex: 1; aspect-ratio: unset !important; } .hero-im__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--gutter); color: var(--cream); background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.5) 100%); } .hero-im__ov-top, .hero-im__ov-bot { display: flex; justify-content: space-between; gap: 12px; } .hero-im__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(72px, 18vw, 220px); line-height: 0.88; margin: 0; letter-spacing: -0.02em; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-im__title em { font-family: var(--font-italic); font-style: italic; font-size: 0.6em; margin: -0.1em 0; font-weight: 400; } .hero-im__cd { background: var(--bg); color: var(--fg); padding: 16px var(--gutter); display: flex; justify-content: space-between; border-top: 1px solid var(--hair); font-variant-numeric: tabular-nums; } /* ============ SECTIONS SHARED ============ */ .sect { padding: clamp(80px, 14vw, 180px) var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--hair); } .sect__kicker { color: var(--ink-soft); margin-bottom: 24px; } .sect__title { font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 32px; font-size: clamp(48px, 9vw, 120px); } .sect__title--serif { } .sect__lead { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.35; max-width: 42ch; margin: 0 0 48px; color: var(--ink-soft); } /* STORY */ .story__grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 760px) { .story__grid { grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } } .story__text p { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; margin: 0 0 20px; } .story__text p:first-child::first-letter { font-family: var(--font-italic); font-style: italic; color: var(--accent); font-size: 1.4em; } .story__sign { margin-top: 32px !important; color: var(--accent); font-size: clamp(24px, 3vw, 36px) !important; } .story__img { position: sticky; top: 80px; } .story__img.story__figure--bw img { filter: grayscale(1) contrast(1.05); } .story__photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 30% center; display: block; filter: contrast(1.05) brightness(1.02); } .story__img-cap { margin-top: 12px; color: var(--ink-soft); } .story__text-photo { margin: 32px 0 0; width: 100%; max-width: 420px; } .story__text-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.02); } .story__text-photo figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .story__text-photo.story__figure--bw img, .story__text-photo--bw img { filter: grayscale(1) contrast(1.05); } /* SECTION ALTERNATING BACKGROUNDS — odd=cream, even=sage */ .sect--story { background: var(--bg); } .sect--prewedding { background: oklch(0.44 0.042 138); color: oklch(0.96 0.012 90); --fg: oklch(0.96 0.012 90); --ink-soft: oklch(0.80 0.015 90); --hair: oklch(0.56 0.03 138); --accent: oklch(0.88 0.06 90); max-width: 100%; padding: clamp(80px, 14vw, 180px) var(--gutter); border-top: none; } body[data-aesthetic="tinta"] .sect--prewedding { background: oklch(0.28 0.03 138); --hair: oklch(0.38 0.03 138); } .sect--prewedding .prog, .sect--prewedding .sect__title, .sect--prewedding .sect__kicker, .sect--prewedding .sect__lead { max-width: var(--max); margin-left: auto; margin-right: auto; } .sect--prewedding .sect__title { margin-bottom: 32px; } .sect--program { background: var(--bg); } .sect--place { background: oklch(0.44 0.042 138); color: oklch(0.96 0.012 90); --fg: oklch(0.96 0.012 90); --ink-soft: oklch(0.80 0.015 90); --hair: oklch(0.56 0.03 138); --accent: oklch(0.88 0.06 90); max-width: 100%; padding: clamp(80px, 14vw, 180px) var(--gutter); } .sect--place > * { max-width: var(--max); margin-left: auto; margin-right: auto; } body[data-aesthetic="tinta"] .sect--place { background: oklch(0.28 0.03 138); --hair: oklch(0.38 0.03 138); } .sect--stay { background: var(--bg); } .sect--playlist { background: oklch(0.44 0.042 138); color: oklch(0.96 0.012 90); --fg: oklch(0.96 0.012 90); --ink-soft: oklch(0.80 0.015 90); --hair: oklch(0.56 0.03 138); --accent: oklch(0.88 0.06 90); --panel: oklch(0.38 0.04 138); max-width: 100%; padding: clamp(80px, 14vw, 180px) var(--gutter); } .sect--playlist > * { max-width: var(--max); margin-left: auto; margin-right: auto; } body[data-aesthetic="tinta"] .sect--playlist { background: oklch(0.28 0.03 138); --hair: oklch(0.38 0.03 138); } .sect--gifts { background: var(--bg); } .sect--rsvp { background: oklch(0.44 0.042 138); color: oklch(0.96 0.012 90); --fg: oklch(0.96 0.012 90); --ink-soft: oklch(0.80 0.015 90); --hair: oklch(0.56 0.03 138); --accent: oklch(0.88 0.06 90); max-width: 100%; padding: clamp(80px, 14vw, 180px) var(--gutter); } .sect--rsvp > * { max-width: var(--max); margin-left: auto; margin-right: auto; } body[data-aesthetic="tinta"] .sect--rsvp { background: oklch(0.28 0.03 138); --hair: oklch(0.38 0.03 138); } /* RSVP — collapsible embedded Google Form */ .rsvp__actions { display: flex; flex-wrap: wrap; gap: 14px; } .rsvp__toggle { align-self: flex-start; } .rsvp__toggle .rsvp__chevron { transition: transform 0.3s ease; display: inline-block; } .rsvp__toggle[aria-expanded="true"] .rsvp__chevron { transform: rotate(180deg); } .rsvp__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease; margin-top: 0; } .rsvp__panel.rsvp__panel--open { max-height: 3000px; opacity: 1; margin-top: 28px; } .rsvp__card { border: 1px solid var(--hair); border-radius: 4px; background: oklch(0.97 0.01 90); max-width: 720px; width: 100%; overflow: hidden; } .rsvp__frame { width: 100%; min-height: 2658px; border: 0; display: block; background: transparent; } @media (prefers-reduced-motion: reduce) { .rsvp__panel { transition: none; } } .prewed__tag { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 5px 12px; border-radius: 3px; align-self: flex-start; margin: 0; } .prewed__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); margin-top: 24px; align-items: start; max-width: var(--max); margin-left: auto; margin-right: auto; } @media (min-width: 880px) { .prewed__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; } } .prewed__copy { display: flex; flex-direction: column; gap: 18px; } .prewed__copy .sect__lead { margin: 0; max-width: 42ch; } .prewed__img { margin: 0; } .prewed__img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; filter: contrast(1.08) saturate(1.05) brightness(1.06); } .prewed__img figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .prewed__media { display: flex; flex-direction: column; gap: 14px; } .prewed__media .prewed__img img { aspect-ratio: 4/3; } .prewed__img--brasas { margin-top: 12px; } .prewed__img--brasas img { aspect-ratio: 5/4; } /* PROGRAM */ .prog { list-style: none; padding: 0; margin: 0; } .prog__item { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } @media (min-width: 760px) { .prog__item { grid-template-columns: 120px 1fr auto; padding: 32px 0; } } .prog__time { color: var(--accent); font-size: 13px; } .prog__ttl { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 1.1; } .prog__where { margin-top: 8px; font-size: 16px; color: var(--ink-soft); } .prog__note { margin-top: 8px; color: var(--ink-soft); } .prog__num { color: var(--ink-soft); align-self: flex-start; } /* PLACE */ .place__title { line-height: 0.9; } .place__title span { display: block; } .place__title span:nth-child(2) { font-family: var(--font-italic); font-style: italic; color: var(--accent); padding-left: 1em; } .place__cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 40px 0 24px; } @media (min-width: 760px) { .place__cards { grid-template-columns: 1fr 1fr; gap: 32px; } } .place__card { display: flex; flex-direction: column; gap: 16px; } /* COWBOY MAP */ .cowboy-map { margin-top: clamp(40px, 6vw, 64px); } .cowboy-map__row { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; } @media (min-width: 760px) { .cowboy-map__row { grid-template-columns: 1fr 1.2fr 1fr; gap: clamp(12px, 2vw, 28px); align-items: stretch; } } .cowboy-map__stop { display: flex; flex-direction: column; align-items: center; gap: 18px; text-decoration: none; color: inherit; padding: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 28px); border: 1px solid var(--hair); background: color-mix(in oklch, var(--bg) 6%, transparent); transition: background .2s ease, border-color .2s ease; } .cowboy-map__stop:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); border-color: var(--accent); } .cowboy-map__stop-icon { width: clamp(110px, 14vw, 170px); height: clamp(110px, 14vw, 170px); display: flex; align-items: center; justify-content: center; } .cowboy-map__stop-icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .cowboy-map__stop-icon img[src*="finca"] { transform: scale(1.25); transform-origin: center; } .cowboy-map__stop-info { display: flex; flex-direction: column; gap: 8px; text-align: center; } .cowboy-map__stop-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .cowboy-map__stop-name { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.15; } .cowboy-map__stop-cta { color: var(--accent); font-size: 12px; margin-top: 6px; } .cowboy-map__line { display: none; align-self: center; width: 100%; height: clamp(110px, 14vw, 170px); /* match top alignment with the icon row inside .cowboy-map__stop */ margin-top: clamp(20px, 3vw, 32px); } .cowboy-map__line svg { width: 100%; height: 100%; display: block; } @media (min-width: 760px) { .cowboy-map__line { display: block; } } .place__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.02); } .place__card-map { position: relative; background: var(--panel); } .place__card-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: contrast(1.02) saturate(0.92); } body[data-aesthetic="tinta"] .place__card-map iframe { filter: invert(0.92) hue-rotate(180deg) contrast(0.95) saturate(0.9); } .place__card-body { display: flex; flex-direction: column; gap: 6px; } .place__card-body .lbl { color: var(--accent); } .place__card-name { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 32px); line-height: 1.15; } .underline-link { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; margin-top: 6px; color: var(--ink-soft); transition: color 0.2s; } .underline-link:hover { color: var(--fg); } .place__meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-soft); padding-top: 24px; border-top: 1px solid var(--hair); } /* STAY */ .stay__list { list-style: none; padding: 0; margin: 0; } .stay__row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--hair); align-items: start; } .stay__num { color: var(--ink-soft); padding-top: 8px; } .stay__body { display: flex; flex-direction: column; gap: 6px; } .stay__row-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .stay__name { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; } .stay__tag { padding: 3px 8px; border: 1px solid var(--hair); border-radius: 3px; color: var(--accent); } .stay__detail { color: var(--ink-soft); max-width: 50ch; } .stay__km { color: var(--ink-soft); } .stay__note { margin-top: 24px; color: var(--ink-soft); } /* GIFTS */ .gifts__card { border: 1px solid var(--hair); padding: clamp(24px, 5vw, 48px); display: flex; flex-direction: column; gap: 20px; background: var(--panel); max-width: 640px; } .gifts__card-head { display: flex; gap: 12px; color: var(--ink-soft); } .gifts__iban { font-family: var(--font-mono); font-size: clamp(15px, 3vw, 26px); letter-spacing: 0.02em; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow-wrap: normal; word-break: keep-all; white-space: normal; } .gifts__concept { color: var(--ink-soft); } .gifts__owner { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; } .gifts__owner-lbl { color: var(--ink-soft); } .gifts__owner-name { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; } .btn { align-self: flex-start; padding: 14px 22px; border: 1px solid var(--fg); background: transparent; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s, color 0.2s; } .btn:hover { background: var(--fg); color: var(--bg); } .btn--dark { background: var(--fg); color: var(--bg); } .btn--dark:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); } /* On green sections (--bg stays cream-ish) make sure the dark button reads — force the contrast color to the green section background */ .sect--playlist .btn--dark, .sect--place .btn--dark, .sect--rsvp .btn--dark { background: var(--fg); color: oklch(0.44 0.042 138); } .sect--playlist .btn--dark:hover, .sect--place .btn--dark:hover, .sect--rsvp .btn--dark:hover { background: var(--accent); border-color: var(--accent); color: oklch(0.30 0.04 138); } /* PLAYLIST */ .playlist__title { line-height: 0.9; } .playlist__title span { display: block; } .playlist__title span:nth-child(2) { font-family: var(--font-italic); font-style: italic; color: var(--accent); } .playlist__card { margin-top: 40px; border: 1px solid var(--hair); padding: clamp(24px, 5vw, 48px); display: flex; flex-direction: column; gap: 32px; background: var(--panel); position: relative; overflow: hidden; } .playlist__bars { display: flex; gap: 3px; align-items: flex-end; height: 80px; } .playlist__bars span { flex: 1; background: var(--accent); border-radius: 1px; animation: bars 1.4s ease-in-out infinite; height: 30%; opacity: 0.6; } @keyframes bars { 0%, 100% { height: 20%; } 50% { height: 100%; } } .playlist__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .playlist__sub { color: var(--ink-soft); } /* FOOTER */ .foot { padding: 100px var(--gutter) 60px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .foot__logo { height: clamp(100px, 14vw, 160px); width: auto; margin-bottom: 8px; } body[data-aesthetic="tinta"] .foot__logo { filter: invert(0.9) sepia(0.25) saturate(1.3) hue-rotate(60deg); } .foot__big { font-family: var(--font-italic); font-style: italic; font-size: clamp(40px, 8vw, 88px); color: var(--accent); line-height: 1; } .foot__names { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); line-height: 1; } .foot__meta { color: var(--ink-soft); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ============ PLACEHOLDERS ============ */ .ph-img { width: 100%; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px; } .ph-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; background: color-mix(in oklch, var(--bg) 30%, transparent); backdrop-filter: blur(4px); border: 1px solid color-mix(in oklch, currentColor 30%, transparent); } /* ============ TWEAKS PANEL ============ */ .tweaks { position: fixed; bottom: 16px; right: 16px; z-index: 100; background: var(--bg); border: 1px solid var(--hair); padding: 14px; width: 260px; font-family: var(--font-mono); font-size: 11px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.15); transform: translateY(calc(100% - 44px)); transition: transform 0.3s; } .tweaks--open { transform: translateY(0); } .tweaks__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--hair); letter-spacing: 0.08em; text-transform: uppercase; } .tweaks__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .tweaks__row label { color: var(--ink-soft); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .tweaks__opts { display: flex; gap: 4px; flex-wrap: wrap; } .tweaks__opt { padding: 6px 10px; border: 1px solid var(--hair); background: transparent; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } .tweaks__opt--active { background: var(--fg); color: var(--bg); border-color: var(--fg); }