/* Wilde Wealth Capital Markets — internal portal Ported verbatim from the client's static HTML (landing-page.html, fact-sheets.html, and the convert_factsheets.py page template). Page type is selected by the class: .landing | .page (menu/section) | .sheet-page */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&family=Manrope:wght@400;500;600&display=swap'); :root { --bg:#0f1419; --bg-accent:#161d26; --ink:#f4f1ea; --muted:#9aa5b1; --gold:#c8a45c; --gold-soft:rgba(200,164,92,0.15); --line:rgba(244,241,234,0.08); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Manrope',sans-serif; background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(200,164,92,0.08), transparent 60%), var(--bg); color:var(--ink); min-height:100vh; position:relative; } body::before { content:""; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events:none; z-index:1; } /* Page wrappers ----------------------------------------------------------- */ body.landing { display:flex; align-items:center; justify-content:center; overflow-x:hidden; } body.page, body.sheet-page { padding:52px 24px 80px; } .wrap { position:relative; z-index:2; max-width:920px; margin:0 auto; } .sheet-page .wrap { max-width:880px; } /* Top bar (menu / sheet / section) ---------------------------------------- */ .topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; } .sheet-page .topbar { margin-bottom:30px; } .logo-link { display:inline-block; transition:transform .35s cubic-bezier(0.2,0.8,0.2,1), filter .35s ease; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5)); } .logo-link:hover { transform:translateY(-3px); filter:drop-shadow(0 14px 38px rgba(200,164,92,0.28)); } .logo-link img { width:132px; height:auto; display:block; border-radius:12px; } .sheet-page .logo-link img { width:120px; } .back-link { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:color .3s ease; white-space:nowrap; } .back-link:hover { color:var(--gold); } .back-link svg { width:16px; height:16px; stroke:currentColor; } /* Shared headings / dividers --------------------------------------------- */ .eyebrow { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; } .page-head { margin:36px 0 8px; animation:rise .7s cubic-bezier(0.2,0.8,0.2,1) both; } .page-title { font-family:'Fraunces',serif; font-size:42px; font-weight:600; line-height:1.1; } .page-sub { color:var(--muted); font-size:15px; margin-top:12px; max-width:560px; line-height:1.55; } .divider { height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:32px 0; opacity:.5; } .footnote { margin-top:40px; font-size:12px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); padding-top:20px; } /* ===== Landing page ===== */ .stage { position:relative; z-index:2; text-align:center; padding:40px 24px; width:100%; max-width:1180px; } .logo-btn { background:none; border:none; cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; gap:18px; padding:24px; border-radius:20px; transition:transform .4s cubic-bezier(0.2,0.8,0.2,1); animation:rise .9s cubic-bezier(0.2,0.8,0.2,1) both; } .logo-btn:hover { transform:translateY(-5px); } .logo-btn:hover .logo-img { filter:drop-shadow(0 18px 50px rgba(200,164,92,0.30)); } .logo-img { width:300px; max-width:72vw; height:auto; display:block; border-radius:14px; filter:drop-shadow(0 14px 40px rgba(0,0,0,0.55)); transition:filter .4s ease; } .hint { margin-top:28px; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); animation:pulse 2.4s ease-in-out infinite; } .hint.hide { display:none; } .options { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; max-height:0; opacity:0; overflow:hidden; transition:max-height .6s ease, opacity .5s ease, margin-top .5s ease; } .options.open { max-height:900px; opacity:1; } .card { display:block; text-decoration:none; color:var(--ink); background:var(--bg-accent); border:1px solid var(--line); border-radius:16px; padding:36px 28px; text-align:left; transition:transform .35s cubic-bezier(0.2,0.8,0.2,1), border-color .35s ease, background .35s ease; position:relative; overflow:hidden; } .card::after { content:"→"; position:absolute; top:28px; right:28px; color:var(--gold); font-size:20px; opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease; } .card:hover { transform:translateY(-6px); border-color:var(--gold); background:#1a222d; } .card:hover::after { opacity:1; transform:translateX(0); } .card-icon { width:44px; height:44px; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center; margin-bottom:22px; } .card-icon svg { width:22px; height:22px; stroke:var(--gold); } .card-title { font-family:'Fraunces',serif; font-size:22px; font-weight:600; margin-bottom:8px; } .card-desc { font-size:14px; color:var(--muted); line-height:1.5; } .card.disabled { opacity:.55; cursor:default; pointer-events:none; } .card .soon { display:inline-block; margin-top:10px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); } /* ===== Fact-sheet menu ===== */ .sheets { display:grid; gap:14px; } .group-label { font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin:28px 0 4px; display:flex; align-items:center; gap:14px; } .group-label::after { content:""; flex:1; height:1px; background:var(--line); } .group-label:first-child { margin-top:0; } .sheet { display:flex; align-items:center; gap:20px; text-decoration:none; color:var(--ink); background:var(--bg-accent); border:1px solid var(--line); border-radius:14px; padding:22px 24px; transition:transform .3s cubic-bezier(0.2,0.8,0.2,1), border-color .3s ease, background .3s ease; animation:rise .6s cubic-bezier(0.2,0.8,0.2,1) both; } .sheet:hover { transform:translateX(6px); border-color:var(--gold); background:#1a222d; } .sheet:nth-child(2){animation-delay:.04s} .sheet:nth-child(3){animation-delay:.07s} .sheet:nth-child(4){animation-delay:.10s} .sheet:nth-child(5){animation-delay:.13s} .sheet:nth-child(6){animation-delay:.16s} .sheet:nth-child(7){animation-delay:.19s} .sheet:nth-child(8){animation-delay:.22s} .sheet:nth-child(n+9){animation-delay:.25s} .sheet-icon { flex:none; width:46px; height:46px; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center; } .sheet-icon svg { width:22px; height:22px; stroke:var(--gold); } .sheet-body { flex:1; min-width:0; } .sheet-name { font-family:'Fraunces',serif; font-size:19px; font-weight:600; } .sheet-meta { font-size:13px; color:var(--muted); margin-top:3px; } .sheet-arrow { flex:none; color:var(--muted); font-size:20px; transition:color .3s ease, transform .3s ease; } .sheet:hover .sheet-arrow { color:var(--gold); transform:translateX(4px); } /* ===== Individual fact sheet ===== */ .title { font-family:'Fraunces',serif; font-size:38px; font-weight:600; line-height:1.1; } .asof { color:var(--muted); font-size:13px; margin-top:10px; } .meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:30px; } .meta-cell { background:var(--bg-accent); padding:16px 18px; } .meta-cell .k { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .meta-cell .v { font-family:'Fraunces',serif; font-size:17px; font-weight:600; } .section { margin-bottom:34px; } .section h2 { font-family:'Fraunces',serif; font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:flex; align-items:center; gap:14px; } .section h2::after { content:""; flex:1; height:1px; background:var(--line); } .overview { font-size:15px; line-height:1.7; color:#e7e2d6; } table { width:100%; border-collapse:collapse; font-size:14px; } th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); } th { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:600; } td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; } tbody tr:hover { background:rgba(200,164,92,0.04); } .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; } .monthly { overflow-x:auto; } .monthly table { min-width:760px; } .monthly th,.monthly td { padding:9px 8px; text-align:right; font-size:13px; } .monthly th:first-child,.monthly td:first-child { text-align:left; font-weight:600; font-family:'Fraunces',serif; } .monthly td.ytd { font-weight:600; color:var(--gold); border-left:1px solid var(--line); } .monthly th.ytd { border-left:1px solid var(--line); color:var(--gold); } .pos { color:#7fc8a0; } .neg { color:#d98a8a; } .stat { background:var(--bg-accent); border:1px solid var(--line); border-radius:12px; padding:18px; } .stat .k { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .stat .v { font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:var(--gold); } .alloc-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; margin-bottom:18px; border:1px solid var(--line); } .alloc-seg { height:100%; } .pdf-bar { margin-top:36px; display:flex; justify-content:center; } .pdf-btn { font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--bg); background:var(--gold); border:none; border-radius:10px; padding:14px 28px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; font-weight:600; transition:transform .25s, box-shadow .25s; box-shadow:0 8px 24px rgba(200,164,92,.25); text-decoration:none; } .pdf-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(200,164,92,.38); } .pdf-btn svg { width:18px; height:18px; stroke:var(--bg); } /* ===== Section pages (Research / IPS / Guidelines) ===== */ .doc-list { display:grid; gap:14px; margin-top:8px; } .doc { display:flex; align-items:center; gap:20px; text-decoration:none; color:var(--ink); background:var(--bg-accent); border:1px solid var(--line); border-radius:14px; padding:20px 24px; transition:transform .3s cubic-bezier(0.2,0.8,0.2,1), border-color .3s ease, background .3s ease; } .doc:hover { transform:translateX(6px); border-color:var(--gold); background:#1a222d; } .doc-icon { flex:none; width:46px; height:46px; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center; } .doc-icon svg { width:22px; height:22px; stroke:var(--gold); } .doc-body { flex:1; min-width:0; } .doc-name { font-family:'Fraunces',serif; font-size:18px; font-weight:600; } .doc-desc { font-size:13px; color:var(--muted); margin-top:3px; } .empty-state { color:var(--muted); font-size:15px; line-height:1.7; background:var(--bg-accent); border:1px solid var(--line); border-radius:14px; padding:28px 26px; } /* ===== Keyframes / responsive ===== */ @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes pulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } } @media (max-width:900px) { .options { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { .page-title,.title { font-size:32px; } .topbar { flex-direction:column-reverse; align-items:flex-start; gap:16px; } .sheet,.doc { padding:18px; gap:14px; } } @media (max-width:520px) { .options { grid-template-columns:1fr; } .logo-img { width:240px; } } /* ===== Print (Download PDF) ===== */ @media print { @page { margin:14mm; } body { background:#fff !important; color:#1a1a1a !important; padding:0 !important; } body::before { display:none !important; } .back-link,.pdf-bar { display:none !important; } .eyebrow,.section h2 { color:#9a7d33 !important; } .title,.page-title { color:#1a1a1a !important; } .asof,.meta-cell .k,.stat .k,th { color:#555 !important; } .meta-grid,.meta-cell,.stat { background:#f7f5f0 !important; border-color:#e0dccf !important; } .meta-cell .v,.section .overview,td { color:#1a1a1a !important; } .stat .v { color:#9a7d33 !important; } .divider,.section h2::after { background:#d9d2c0 !important; } th,td { border-color:#e0dccf !important; } .section,.meta-grid { page-break-inside:avoid; } .monthly table { min-width:0 !important; } .pos { color:#1f7a4d !important; } .neg { color:#b23b3b !important; } .logo-link img { filter:none !important; } }