/* Salar layout (negro y marfil). Extracted unchanged from the published design file: theme variables, * shared base rules, the countdown rules the design reuses (.cd) and the Salar block. * Fonts come from /static/layouts/_fonts/fonts.css (self-hosted); no remote URL appears here. */ [data-theme="salar"]{ --bg:#F3F1EE;--outer:#1A1A1A;--surface:#FBF9F5;--ink:#1F1F1F;--muted:#5C5A57; --accent:#1F1F1F;--accent2:#CFC7B8;--line:#D9D2C5;--on-accent:#F3F1EE; --f-display:'Cormorant Garamond',Georgia,serif;--f-body:'Cormorant Garamond',Georgia,serif;--f-script:'Pinyon Script','Snell Roundhand',cursive; --radius:999px;--base:1rem; color-scheme:light; } /* ===== Base ===== */ *{box-sizing:border-box;margin:0;padding:0} :root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} html{scroll-behavior:smooth} body{background:var(--outer);color:var(--ink);font-family:var(--f-body);font-size:var(--base);line-height:1.6;transition:background .4s;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .inv{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;overflow:hidden;padding-bottom:120px;box-shadow:0 0 60px rgba(0,0,0,.25)} .sec{padding:60px 28px;text-align:center;position:relative} .sec h2{font-family:var(--f-display);font-weight:400;font-size:2.1rem;line-height:1.15;color:var(--accent);margin-bottom:28px} .sec p{max-width:34ch;margin-left:auto;margin-right:auto} .muted{color:var(--muted)} .photo{position:relative;overflow:hidden;background:var(--line)} .photo img{width:100%;height:100%;object-fit:cover} .photo .mono{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--f-script);font-size:3rem;color:var(--accent)} .photo.nophoto img{display:none} .photo.nophoto .mono{display:flex} .verse-text{font-family:var(--f-display);font-style:italic;font-size:1.55rem;line-height:1.4} .verse-ref{margin-top:12px;color:var(--muted);font-size:.95rem} .cal{max-width:320px;margin:0 auto 36px} .cal-title{font-family:var(--f-display);font-size:1.3rem;margin-bottom:14px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 0;font-size:.95rem} .cal-grid .dow{font-size:.75rem;color:var(--muted);padding-bottom:6px} .cal-grid .d{height:36px;display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate} .cal-grid .d.on{color:var(--on-accent);font-weight:600} .cal-grid .d.on::before{content:"";position:absolute;width:36px;height:36px;border-radius:50%;background:var(--accent);z-index:-1} .count{display:flex;justify-content:center;gap:10px} .count div{min-width:66px;padding:12px 4px;border:1px solid var(--line);border-radius:min(var(--radius),12px);background:var(--surface)} .count b{display:block;font-family:var(--f-display);font-weight:400;font-size:2rem;line-height:1;color:var(--accent)} .count span{font-size:.75rem;color:var(--muted)} .count-done{font-family:var(--f-display);font-size:1.4rem;color:var(--accent)} .events{display:grid;gap:22px} .event{padding:30px 22px;background:var(--surface);border:1px solid var(--line);border-radius:min(var(--radius),20px)} .event h3{font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--ink)} .event .time{font-family:var(--f-display);font-size:2.4rem;color:var(--accent);line-height:1.2;margin:6px 0} .event .place{font-weight:500} .event .addr{color:var(--muted);font-size:.95rem;margin-bottom:18px} .btn{display:inline-block;padding:12px 26px;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);text-decoration:none;font-family:var(--f-body);font-size:.95rem;letter-spacing:.03em;border:1px solid var(--accent);cursor:pointer} .btn.ghost{background:transparent;color:var(--accent)} .timeline{list-style:none;max-width:320px;margin:0 auto;text-align:left} .timeline li{display:grid;grid-template-columns:62px 1fr;gap:16px} .timeline .t{font-family:var(--f-display);color:var(--accent);text-align:right;padding-top:1px;font-size:1.05rem} .timeline .x{position:relative;padding:0 0 18px 18px;border-left:1px solid var(--line)} .timeline .x::before{content:"";position:absolute;left:-5px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--accent2)} .timeline li:last-child .x{border-left-color:transparent} .swatches{display:flex;justify-content:center;gap:12px;margin:22px 0} .swatches i{width:38px;height:38px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)} .swatches i.no{background:#000;position:relative} .swatches i.no::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--accent);transform:rotate(45deg)} .notice{margin-top:22px;padding:14px 18px;border:1px dashed var(--accent2);border-radius:min(var(--radius),12px);display:inline-block} .qr{width:180px;margin:22px auto 0;background:#fff;padding:10px;border-radius:min(var(--radius),12px)} .notes{list-style:none;margin-top:28px;display:grid;gap:8px;color:var(--muted)} .thanks{padding-bottom:30px} .thanks .big{font-family:var(--f-script);font-size:2.8rem;color:var(--accent);line-height:1.2} /* ============================================================ 2. SALAR — negro y marfil, sobres con sello de corazón y flores blancas ============================================================ */ [data-theme="salar"] .inv{background-color:#F2EFEA;background-image:var(--silk,none);background-size:100% auto;background-repeat:repeat-y;padding-bottom:0} .sl-crest{height:96px;padding-top:2px} .sl-mono{display:flex;align-items:center;justify-content:center;gap:18px;font-family:var(--f-script);font-size:2.7rem;line-height:1;color:#1F1F1F} .sl-mono i{display:block;width:1px;height:48px;background:#A8956F;transform:rotate(18deg)} .sl-cdate{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:#6E6B66;margin-top:10px} .sl-orn{display:block;width:150px;height:22px;margin:0 auto 18px;fill:none;stroke:#A8956F;stroke-width:.8} .sl-iv .sl-orn{margin-top:58px} .sl{font-family:var(--f-display);color:#1F1F1F;text-align:center} .sl p{margin-left:auto;margin-right:auto} .sl-script{font-family:var(--f-script);font-weight:400;line-height:1.2} .sl-hero{position:relative;padding:44px 0 34px} .benv{position:relative;width:80%;margin:0 auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3))} .benv svg{display:block;width:100%;height:auto} .benv .front{position:absolute;inset:0;pointer-events:none} .bcard{position:absolute;left:15%;right:15%;top:4%;height:62%;background:#FBF9F5;box-shadow:0 2px 6px rgba(0,0,0,.25)} .bcard.photo-card{padding:7px} .bcard .ph{width:100%;height:100%;overflow:hidden;background:#CFCAC2} .bcard .ph img{width:100%;height:100%;object-fit:cover} .bcard.text-card{padding:18px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start} .bcard.text-card::before{content:"";position:absolute;inset:5px;border:1px solid #DCD5C8;pointer-events:none} .bcard h3{font-family:var(--f-display);font-weight:500;font-size:1.15rem;line-height:1.1;letter-spacing:.05em;text-transform:uppercase;margin-top:6px} .bcard p{font-size:.78rem;line-height:1.3;margin:6px 0 4px} .sl-ramo{position:absolute;width:31%;height:auto;right:1%;top:120px;z-index:3;filter:drop-shadow(0 6px 6px rgba(0,0,0,.22))} .sl-pearls{position:absolute;width:18%;left:9%;top:122px;z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))} .scal{--c:#F3F0EA;--r:7px;position:relative;display:flex;padding:var(--r);background:radial-gradient(circle,var(--c) calc(var(--r) - .6px),transparent var(--r)) 0 0/calc(var(--r)*2) calc(var(--r)*2);filter:drop-shadow(0 8px 12px rgba(0,0,0,.2))} .scal-in{position:relative;background:var(--c);flex:1} .scal-in::before{content:"";position:absolute;inset:6px;border:1px dotted rgba(0,0,0,.25);pointer-events:none} .scal.dark{--c:#1C1C1C} .scal.dark .scal-in::before{border-color:rgba(255,255,255,.28)} .sl-intro{padding:16px 0 64px} .sl-intro .scal{width:74%;margin:0 auto} .sl-intro .scal-in{padding:44px 20px 44px} .sl-names{font-size:2.8rem} .sl-names span{display:block;font-size:1.4rem;line-height:1} .sl-date{font-size:1.6rem;letter-spacing:.12em;margin:14px 0} .sl-intro p.txt{font-size:.98rem;line-height:1.35;max-width:22ch} .sl-black{background-color:#1B1B1B;background-image:radial-gradient(90% 40% at 50% 0%,rgba(255,255,255,.06),transparent),radial-gradient(70% 30% at 50% 100%,rgba(0,0,0,.5),transparent),var(--damask,none);background-size:auto,auto,90px 120px;color:#ECE8E1;padding:54px 24px 70px;position:relative} .oval{position:relative;width:78%;aspect-ratio:3/4;margin:0 auto;border-radius:50%;padding:16px;background:#1A1A1A;box-shadow:0 0 0 2px #262626,0 12px 26px rgba(0,0,0,.75),inset 0 0 0 1px #2F2F2F,inset 0 3px 6px rgba(255,255,255,.05)} .oval::before{content:"";position:absolute;inset:6px;border-radius:50%;border:3px dotted #3B3B3B} .oval .ph{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#333;box-shadow:0 0 0 1px #000} .oval .ph img{width:100%;height:100%;object-fit:cover} .sl-black h2{font-size:2.5rem;margin-top:44px;color:#F3F0EA} .sl-flourish{display:block;width:170px;height:16px;margin:2px auto 20px} .sl-story p{font-size:.92rem;line-height:1.42;max-width:31ch} .sl-story p+p{margin-top:18px} .sl-ev{position:relative;width:76%;margin:50px auto 0;background:#F3F0EA;color:#1F1F1F;padding:26px 18px 24px;box-shadow:0 10px 24px rgba(0,0,0,.55)} .sl-ev::before{content:"";position:absolute;inset:6px;border:1px solid #D2CABB;pointer-events:none} .sl-ev h3{font-family:var(--f-script);font-weight:400;font-size:1.8rem;line-height:1.2} .sl-ev p{font-size:.88rem;line-height:1.35} .sl-pill{display:inline-block;border:1px solid #1F1F1F;border-radius:999px;padding:1px 24px;font-size:.82rem;margin-top:10px;color:#1F1F1F;text-decoration:none;background:transparent;position:relative;z-index:1} .sl-callas{position:absolute;width:112px;height:154px;right:-46px;bottom:-50px;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3))} .sl-iv{padding:56px 24px 40px;position:relative} .sl-small{font-size:.82rem;color:#6E6B66;font-style:italic} .sl-iv .txt{font-size:.92rem;line-height:1.35;max-width:30ch;margin-top:6px} .sl-dots{display:flex;justify-content:center;gap:6px;margin-top:12px} .sl-dots i{width:18px;height:18px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2)} .sl-itin{position:relative;margin-top:56px} .cenv{display:block;width:88%;height:auto;margin:0 auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))} .icard{position:relative;z-index:1;width:72%;margin:-21.9% auto 0;background:#F8F6F2;padding:44px 16px 26px;box-shadow:0 12px 24px rgba(0,0,0,.22)} .icard::before{content:"";position:absolute;inset:7px;border:1px solid #D8D1C4;pointer-events:none} .icard::after{content:"";position:absolute;inset:11px;border:.5px solid #E5DFD4;pointer-events:none} .icard .hseal{position:absolute;left:50%;top:0;width:56px;height:56px;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))} .icard h3{font-family:var(--f-script);font-weight:400;font-size:2rem;margin-bottom:12px} .icard ol{list-style:none;position:relative;text-align:left} .icard ol::before{content:"";position:absolute;left:44px;top:12px;bottom:12px;width:1px;background:#1F1F1F} .icard li{display:grid;grid-template-columns:30px 14px 1fr;column-gap:7px;align-items:center;min-height:42px} .icard .ic svg{width:26px;height:26px;display:block;fill:none;stroke:#77736D;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} .icard .dt{width:6px;height:6px;border-radius:50%;background:#1F1F1F;justify-self:center;position:relative;z-index:1} .icard .tx{font-size:.8rem;line-height:1.2} .icard .tx b{display:block;font-size:.66rem;font-weight:600} .sl-count{margin-top:56px} .sl-count h2,.sl-gift h2{font-size:2.1rem} .sl-count h2.done{font-size:1.8rem} .slcd{display:flex;justify-content:center;align-items:flex-start;gap:4px;margin-top:2px} .slcd div{min-width:54px} .slcd b{display:block;font-weight:500;font-size:2.3rem;line-height:1.1} .slcd i{font-style:normal;font-size:2.1rem;line-height:1.1} .slcd span{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase} .sl-gift{margin-top:50px} .sl-gift img{width:120px;margin:14px auto 0;background:#fff;padding:6px;box-shadow:0 2px 6px rgba(0,0,0,.12)} .sl-rsvp{position:relative;margin-top:60px;padding-bottom:20px} .sl-rsvp .benv{width:76%;margin-left:8%} .sl-rsvp .sl-ramo{top:60px;right:2%;width:28%} .sl-banner{position:relative;height:250px;background:#151515 center/cover no-repeat;color:#ECE8E1;display:flex;flex-direction:column;align-items:center;justify-content:center} .sl-banner::before{content:"";position:absolute;inset:0;background:rgba(10,10,10,.62)} .sl-banner::after{content:"";position:absolute;inset:14px;border:1px solid rgba(201,184,150,.45);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px rgba(201,184,150,.25);pointer-events:none} .sl-black::before{content:"";position:absolute;inset:14px;border:1px solid rgba(201,184,150,.22);pointer-events:none} .sl-black::after{content:"";position:absolute;inset:19px;border:.5px solid rgba(201,184,150,.12);pointer-events:none} .sl-banner>*{position:relative} .sl-banner .wl{font-family:var(--f-script);font-size:1rem} .sl-banner .nm{font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:6px} .sl-banner .nm span{font-family:var(--f-script);font-size:3rem;text-transform:none;line-height:1} .sl-end{padding:60px 24px 150px;position:relative} .sl-end .scal{width:74%;margin:0 auto} .sl-end .scal-in{padding:30px 18px;color:#ECE8E1;font-size:.88rem;line-height:1.5} .sl-end .sl-callas{right:2%;bottom:96px} /* Countdown rules that live further down in the original file (they belong to the autumn design but are unscoped). Order matters: they come after .slcd and win over it, exactly as in the original. */ .cd{display:flex;justify-content:center;align-items:flex-start;gap:2px;color:#4A3A2A} .cd div{min-width:60px} .cd b{display:block;font-family:var(--f-display);font-weight:500;font-size:2.6rem;line-height:1.1} .cd span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase} .cd i{font-style:normal;font-family:var(--f-display);font-size:2.3rem;line-height:1.1} /* Port additions (not in the original file): the RSVP action is a