:root { --ink:#17211f; --muted:#6d7774; --cream:#f8f6f0; --paper:#fffdfa; --accent:#ed6a4a; --accent-dark:#d95536; --mint:#d9efe8; --line:#e9e8e1; }
* { box-sizing:border-box; } body { background:var(--cream); color:var(--ink); font-family:Manrope,Arial,sans-serif; } .site-nav { background:rgba(255,253,250,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:0; z-index:10; } .brand { color:var(--ink); display:inline-flex; align-items:center; gap:9px; font-size:21px; font-weight:800; letter-spacing:-.8px; text-decoration:none; } .brand-mark { align-items:center; background:var(--accent); border-radius:12px; color:white; display:inline-flex; height:30px; justify-content:center; width:30px; font-size:15px; } .nav-actions { align-items:center; display:flex; gap:20px; } .nav-link-custom { color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; } .btn-nav,.btn-nav-outline { border-radius:12px; font-size:14px; font-weight:700; padding:10px 16px; } .btn-nav { background:var(--ink); color:#fff; } .btn-nav:hover { background:#2d3b37; color:#fff; } .btn-nav-outline { background:transparent; border:1px solid var(--line); color:var(--ink); } .hero { background:var(--paper); overflow:hidden; padding:78px 0 70px; } .eyebrow { color:var(--accent); display:block; font-size:12px; font-weight:800; letter-spacing:1.4px; margin-bottom:16px; text-transform:uppercase; } h1,h2,h3 { letter-spacing:-1.4px; } .hero h1 { font-family:'Playfair Display',serif; font-size:clamp(48px,6vw,77px); line-height:1.03; margin:0; } .hero h1 em { color:var(--accent); font-style:normal; } .hero-copy { color:var(--muted); font-size:18px; line-height:1.7; margin:24px 0 30px; max-width:560px; } .btn-primary-soft { background:var(--accent); border:0; border-radius:14px; box-shadow:0 10px 24px rgba(237,106,74,.24); color:white; font-weight:800; padding:13px 20px; } .btn-primary-soft:hover { background:var(--accent-dark); color:white; transform:translateY(-1px); } .btn-link-soft { color:var(--ink); font-weight:800; text-decoration:none; } .hero-stats { display:flex; gap:34px; margin-top:45px; } .hero-stats div { display:flex; flex-direction:column; } .hero-stats strong { font-size:21px; } .hero-stats span { color:var(--muted); font-size:12px; } .hero-art { background:linear-gradient(145deg,#cfece1,#b9dfd4); border-radius:40px; height:360px; overflow:hidden; position:relative; } .heart-big { align-items:center; background:var(--accent); border-radius:50%; box-shadow:0 22px 38px rgba(117,76,63,.25); color:#fff; display:flex; font-size:105px; height:190px; justify-content:center; left:50%; position:absolute; top:48%; transform:translate(-50%,-50%) rotate(-8deg); width:190px; } .hero-circle { border:1px solid rgba(255,255,255,.6); border-radius:50%; position:absolute; } .circle-one { height:310px; right:-70px; top:-100px; width:310px; } .circle-two { bottom:-115px; height:270px; left:-100px; width:270px; } .floating-tag { background:white; border-radius:14px; box-shadow:0 10px 28px rgba(40,83,72,.13); font-size:13px; padding:12px 16px; position:absolute; z-index:1; } .tag-one { left:22px; top:30px; } .tag-two { bottom:28px; right:22px; } .content-section { padding:78px 0; } .section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:30px; } .section-heading h2 { font-size:34px; margin:0; } .text-action { color:var(--accent); font-size:14px; font-weight:800; text-decoration:none; } .collect-card { background:var(--paper); border:1px solid var(--line); border-radius:22px; height:100%; overflow:hidden; transition:.22s ease; } .collect-card:hover { box-shadow:0 18px 38px rgba(38,51,46,.09); transform:translateY(-4px); } .collect-cover { height:180px; object-fit:cover; width:100%; } .collect-cover-placeholder { align-items:center; background:linear-gradient(135deg,#f6d7bf,#f5b5a5); color:white; display:flex; font-family:'Playfair Display'; font-size:68px; justify-content:center; } .collect-card-body { padding:22px; } .pill { background:#fff0eb; border-radius:20px; color:var(--accent-dark); display:inline-block; font-size:11px; font-weight:800; padding:6px 10px; } .collect-card h3 { font-size:21px; margin:14px 0 8px; } .collect-card p { color:var(--muted); font-size:13px; line-height:1.55; min-height:42px; } .progress-track { background:#eeeae2; border-radius:10px; height:7px; overflow:hidden; margin-top:19px; } .progress-value { background:var(--accent); border-radius:10px; height:100%; min-width:4px; } .collect-meta { align-items:baseline; display:flex; gap:7px; margin:12px 0 18px; } .collect-meta strong { font-size:17px; } .collect-meta span { color:var(--muted); font-size:11px; } .collect-meta .people { margin-left:auto; } .card-link { color:var(--ink); font-size:13px; font-weight:800; text-decoration:none; } .card-link span { color:var(--accent); font-size:17px; margin-left:4px; } .empty-state { background:var(--paper); border:1px dashed #d8d4ca; border-radius:24px; padding:64px 20px; text-align:center; width:100%; } .empty-icon { color:var(--accent); font-size:42px; } .site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:12px; padding:26px 0; } .brand-footer { font-size:15px; } .brand-footer .brand-mark { border-radius:8px; height:23px; width:23px; }
.page-shell { padding:54px 0 82px; } .surface-card { background:var(--paper); border:1px solid var(--line); border-radius:24px; box-shadow:0 14px 40px rgba(28,40,36,.05); } .detail-title { font-family:'Playfair Display'; font-size:48px; } .form-label,form p label { display:block; font-size:13px; font-weight:800; margin-bottom:7px; } form p input,form p select,form p textarea { background:#fff; border:1px solid #dedbd3; border-radius:12px; padding:11px 13px; width:100%; } form p textarea { min-height:105px; } form p { margin-bottom:16px; } .auth-card { max-width:470px; margin:20px auto; padding:34px; } .auth-card h1 { font-family:'Playfair Display'; font-size:40px; } .dashboard-title { font-family:'Playfair Display'; font-size:48px; } .dashboard-hero { background:linear-gradient(125deg,#19342d,#285144); border-radius:26px; color:white; padding:34px; } .dashboard-hero p { color:#c6ddd6; } .dashboard-stat { background:rgba(255,255,255,.1); border-radius:14px; padding:14px; } .dashboard-stat strong { display:block; font-size:22px; } .dashboard-list { border:1px solid var(--line); border-radius:18px; overflow:hidden; } .dashboard-list a { border:0; border-bottom:1px solid var(--line); padding:17px 18px; } .dashboard-list a:last-child { border:0; } .feed-row { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px; } @media(max-width:767px){.hero{padding:52px 0}.hero-art{height:270px}.heart-big{font-size:76px;height:145px;width:145px}.section-heading{align-items:start;flex-direction:column;gap:14px}.detail-title,.dashboard-title{font-size:38px}.nav-actions{gap:12px}.nav-link-custom{font-size:12px}.site-nav{padding:13px 0} }
.collect-status { background:#e5ebe8; border-radius:20px; color:#456057; display:inline-block; font-size:11px; font-weight:800; padding:6px 10px; } .btn-primary-soft:disabled { background:#aab5b1; box-shadow:none; cursor:not-allowed; opacity:1; }
.share-list { display:flex; flex-wrap:wrap; gap:8px; } .share-button { background:#fff0eb; border:0; border-radius:10px; color:var(--accent-dark); font-size:12px; font-weight:800; padding:9px 11px; text-decoration:none; } .share-button:hover { background:#ffe0d6; color:var(--accent-dark); } .about-feature { background:var(--cream); border-radius:18px; height:100%; padding:22px; } .about-feature span { color:var(--accent); font-size:12px; font-weight:800; } .about-feature h2 { font-size:22px; margin:10px 0 8px; } .about-feature p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.collect-card { cursor:pointer; position:relative; }
.collect-pagination { align-items:center; display:flex; flex-direction:column; gap:13px; margin-top:46px; } .collect-pagination-controls { align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 24px rgba(28,40,36,.05); display:flex; gap:10px; padding:8px; } .pagination-numbers { align-items:center; display:flex; gap:4px; } .pagination-step,.pagination-number { align-items:center; border-radius:10px; color:var(--ink); display:inline-flex; font-size:13px; font-weight:800; height:38px; justify-content:center; text-decoration:none; transition:.18s ease; } .pagination-step { padding:0 12px; } .pagination-label { margin-left:5px; } .pagination-step .pagination-label:first-child { margin-left:0; margin-right:5px; } .pagination-number { min-width:38px; } .pagination-step:hover,.pagination-number:hover { background:#fff0eb; color:var(--accent-dark); } .pagination-number.is-current { background:var(--accent); box-shadow:0 6px 14px rgba(237,106,74,.25); color:white; } .pagination-ellipsis { color:var(--muted); font-weight:800; padding:0 4px; } .pagination-step.is-disabled { color:#b6b2aa; cursor:not-allowed; } .collect-pagination p { color:var(--muted); font-size:12px; margin:0; } @media(max-width:575px){.collect-pagination-controls{gap:3px;padding:6px}.pagination-step{min-width:38px;padding:0}.pagination-label{display:none}.pagination-number{min-width:34px}.pagination-numbers{gap:1px}}