/* =================================================================== We Will Recover There — shared design system Palette: ash charcoal ground, ember amber + healing rose accents, muted olive for grounding. Built for a memoir site, not a template. Fonts are loaded via in each page's — see fonts. =================================================================== */ :root{ --bg: #0F0D0C; --panel: #1A1613; --panel-2: #221C18; --line: rgba(237,230,220,0.12); --text: #EDE6DC; --text-dim: #A79C8E; --ember: #C08A4E; --ember-bright: #E0A868; --rose: #A8677B; --olive: #6B7A5E; --radius: 2px; --maxw: 1120px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Karla', sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:500; line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; } h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:400; } h2{ font-size:clamp(1.6rem, 3vw, 2.4rem); } h3{ font-size:1.3rem; } p{ margin:0 0 1.2em; color:var(--text); } .dim{ color:var(--text-dim); } a{ color:var(--ember-bright); text-decoration:none; } a:hover{ text-decoration:underline; } img{ max-width:100%; display:block; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; } /* ---------- Nav ---------- */ .site-nav{ position:sticky; top:0; z-index:50; background:rgba(15,13,12,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; } .brand{ font-family:'Fraunces', serif; font-size:1.15rem; color:var(--text); letter-spacing:.01em; } .brand span{ color:var(--ember-bright); } .nav-links{ display:flex; gap:32px; list-style:none; margin:0; padding:0; } .nav-links a{ color:var(--text-dim); font-size:.92rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; transition:color .2s ease; } .nav-links a:hover{ color:var(--ember-bright); text-decoration:none; } .nav-links a.active{ color:var(--text); } .nav-toggle{ display:none; } .lang-switch{ display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; letter-spacing:.03em; margin-left:8px; } .lang-switch a, .lang-switch span{ padding:3px 7px; border-radius:2px; color:var(--text-dim); } .lang-switch a:hover{ color:var(--ember-bright); text-decoration:none; } .lang-switch span.current{ color:var(--bg); background:var(--ember-bright); } .lang-switch .sep{ color:var(--line); padding:0; } @media (max-width:760px){ .nav-links{ position:fixed; inset:72px 0 0 0; height:calc(100vh - 72px); background:var(--bg); flex-direction:column; gap:0; transform:translateX(100%); transition:transform .3s ease; padding:24px 28px; overflow-y:auto; } .nav-links.open{ transform:translateX(0); } .nav-links a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; } .nav-toggle{ display:block; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; line-height:1; } } /* ---------- Signature: ember thread divider ---------- */ .ember-thread{ height:1px; margin:64px 0; background:linear-gradient(90deg, transparent, var(--ember) 35%, var(--rose) 65%, transparent); opacity:.55; position:relative; } .ember-thread::after{ content:''; position:absolute; top:-2px; left:50%; width:5px; height:5px; background:var(--ember-bright); border-radius:50%; box-shadow:0 0 8px 2px rgba(224,168,104,.7); animation:ember-pulse 3.5s ease-in-out infinite; } @keyframes ember-pulse{ 0%,100%{ opacity:.4; transform:translateX(-40px) scale(.8); } 50%{ opacity:1; transform:translateX(40px) scale(1.1); } } @media (prefers-reduced-motion:reduce){ .ember-thread::after{ animation:none; opacity:.8; } html{ scroll-behavior:auto; } } /* ---------- Hero ---------- */ .hero{ padding:96px 0 72px; border-bottom:1px solid var(--line); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ember-bright); margin-bottom:18px; } .eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ember-bright); box-shadow:0 0 6px 1px rgba(224,168,104,.8); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 28px; font-family:'Karla', sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.02em; text-transform:uppercase; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:all .2s ease; text-decoration:none; } .btn:hover{ text-decoration:none; } .btn-primary{ background:var(--ember); color:#0F0D0C; } .btn-primary:hover{ background:var(--ember-bright); } .btn-outline{ background:transparent; color:var(--text); border-color:var(--line); } .btn-outline:hover{ border-color:var(--ember); color:var(--ember-bright); } .btn-rose{ background:var(--rose); color:#0F0D0C; } .btn-rose:hover{ filter:brightness(1.1); } .btn[disabled]{ opacity:.4; cursor:not-allowed; } .btn-block{ width:100%; } /* ---------- Cards / panels ---------- */ .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px; } /* ---------- Forms ---------- */ label{ display:block; font-size:.85rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; } input, textarea, select{ width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:13px 14px; font-family:'Karla', sans-serif; font-size:1rem; border-radius:var(--radius); margin-bottom:20px; } input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--ember); } textarea{ resize:vertical; min-height:100px; } :focus-visible{ outline:2px solid var(--ember-bright); outline-offset:2px; } /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--line); padding:48px 0; color:var(--text-dim); font-size:.9rem; } .site-footer a{ color:var(--text-dim); } .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; } /* ---------- Utility ---------- */ .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; } .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:760px){ .grid-2, .grid-3{ grid-template-columns:1fr; } } .section{ padding:80px 0; } .center{ text-align:center; } .placeholder-img{ background:linear-gradient(135deg, var(--panel-2), var(--panel)); border:1px dashed var(--line); color:var(--text-dim); display:flex; align-items:center; justify-content:center; text-align:center; font-size:.85rem; padding:24px; min-height:220px; border-radius:var(--radius); } /* ---------- Selectable option cards (language / format / payment pickers) ---------- */ .option-card{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px 18px; background:var(--panel-2); border:1.5px solid var(--line); border-radius:4px; cursor:pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .option-card:hover{ border-color:rgba(224,168,104,.45); } .option-card input[type="radio"]{ -webkit-appearance:none !important; appearance:none !important; position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; pointer-events:none; } .option-card-radio{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:50%; border:1.5px solid var(--line-bright, var(--line)); display:flex; align-items:center; justify-content:center; transition: border-color .18s ease; } .option-card-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ember-bright); transform:scale(0); transition: transform .16s cubic-bezier(.34,1.56,.64,1); } .option-card-icon{ flex:none; width:38px; height:38px; margin-top:-2px; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition: background .18s ease, color .18s ease; } .option-card:has(input:checked) .option-card-icon{ background:rgba(224,168,104,.18); color:var(--ember-bright); } .option-card-body{ display:flex; flex-direction:column; gap:3px; } .option-card-title{ font-weight:600; color:var(--text); font-size:.98rem; } .option-card-sub{ font-size:.82rem; color:var(--text-dim); line-height:1.4; } .option-card:has(input:checked){ border-color:var(--ember-bright); background:rgba(224,168,104,.09); box-shadow:0 0 0 1px rgba(224,168,104,.25); } .option-card:has(input:checked) .option-card-radio{ border-color:var(--ember-bright); } .option-card:has(input:checked) .option-card-radio::after{ transform:scale(1); } .option-card:has(input:focus-visible){ outline:2px solid var(--ember-bright); outline-offset:2px; } .option-row{ display:flex; gap:14px; } .option-col{ display:flex; flex-direction:column; gap:12px; } @media (max-width:520px){ .option-row{ flex-direction:column; } } .security-bar{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:rgba(143,191,143,.08); border:1px solid rgba(143,191,143,.3); border-radius:4px; margin-bottom:20px; } .security-bar-icon{ flex:none; width:34px; height:34px; border-radius:50%; background:rgba(143,191,143,.15); display:flex; align-items:center; justify-content:center; color:#8FBF8F; } .security-bar-text{ font-size:.84rem; color:var(--text-dim); line-height:1.45; } .security-bar-text strong{ color:var(--text); display:block; font-size:.9rem; margin-bottom:1px; } .card-network-row{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; } .card-network-badge{ display:flex; align-items:center; justify-content:center; width:44px; height:28px; border-radius:4px; background:#FFFFFF; padding:5px 6px; } .card-network-badge svg{ width:100%; height:100%; display:block; } .card-network-badge.visa svg{ fill:#1A1F71; } .card-network-badge.mastercard svg{ fill:#EB001B; } .card-network-badge.amex svg{ fill:#2E77BC; } .card-network-badge.paypal{ background:#00457C; } .card-network-badge.paypal svg{ fill:#FFFFFF; } /* Footer trust badge — always its own centered row */ .footer-security-badge{ flex-basis:100%; justify-content:center; }