/* ========================================================= AMSTERCODE — LUXURY SKIN (OPT-IN, SCOPED) ✅ IMPORTANT: This skin applies ONLY inside .ac-skin How to enable on a page: - Wrap that page content in

...

OR add class="ac-skin" to for that page only. ========================================================= */ /* ✅ Premium fonts (safe; still global import) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800;900&display=swap'); :root{ --txt:#ECECF2; --muted:#C9CBD8; --muted2:#B6B8C8; --subtle:#8E91A4; --ink:#0b0b0f; --brand:#21468B; --lux:#C9A24D; --lux2:#A88A43; --shadowA: 0 18px 55px rgba(0,0,0,.78); --shadowB: 0 10px 25px rgba(0,0,0,.55); --inset: inset 0 1px 0 rgba(255,255,255,.05); } /* ✅ Hardening (global-safe) */ html, body { max-width: 100%; overflow-x: hidden; } * { box-sizing: border-box; } img, svg, video { max-width: 100%; height: auto; } /* ✅ Typography baseline (ONLY inside skin) */ .ac-skin p, .ac-skin .muted, .ac-skin .list, .ac-skin .note, .ac-skin .kicker, .ac-skin .section-label{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } .ac-skin h1, .ac-skin h2, .ac-skin h3{ font-family: "Playfair Display", serif; font-kerning: normal; letter-spacing:-.01em; } /* ========================================================= HERO (scoped) ========================================================= */ .ac-skin .hero{ position:relative; height: clamp(240px, 32vh, 360px); display:grid; place-items:center; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); background:#0b0b0f; isolation:isolate; } .ac-skin .hero img, .ac-skin .hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.02) brightness(.82); transform: scale(1.02); } /* Film-grade overlay + micro grain (subtle) */ .ac-skin .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(900px 320px at 50% 10%, rgba(201,162,77,.10), transparent 62%), radial-gradient(1100px 420px at 50% 100%, rgba(0,0,0,.72), transparent 55%), linear-gradient(180deg, rgba(11,11,15,.20), rgba(11,11,15,.86)); pointer-events:none; z-index:1; } .ac-skin .hero::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient( 90deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 2px, transparent 6px ); mix-blend-mode: overlay; opacity:.10; pointer-events:none; z-index:2; } .ac-skin .hero .inner{ position:relative; z-index:3; text-align:center; padding: 0 clamp(16px,4vw,28px); max-width: 980px; } .ac-skin .hero h1{ margin:0 0 10px 0; font-weight:900; font-size: clamp(26px, 3.9vw, 44px); line-height:1.06; color:var(--txt); text-shadow: 0 14px 60px rgba(0,0,0,.75); } .ac-skin .hero h1::after{ content:""; display:block; width: clamp(46px, 7vw, 82px); height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, rgba(201,162,77,.65), transparent); opacity:.95; } .ac-skin .hero p{ margin:0 auto; color: rgba(236,236,242,.76); font-size: clamp(13.8px, 1.65vw, 16px); line-height:1.78; letter-spacing:.003em; text-shadow: 0 8px 40px rgba(0,0,0,.65); max-width: 78ch; font-weight:480; } /* ========================================================= LAYOUT (scoped) ========================================================= */ .ac-skin .wrap{ max-width:1200px; margin:0 auto; padding: clamp(18px, 4.5vw, 34px); } .ac-skin .grid{ display:grid; gap:14px; } .ac-skin .grid.cols-2{ grid-template-columns:repeat(2,1fr); } .ac-skin .grid.cols-3{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .ac-skin .grid.cols-2, .ac-skin .grid.cols-3{ grid-template-columns:1fr; } } .ac-skin .section-label{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(236,236,242,.44); margin-bottom:8px; font-weight:900; } .ac-skin .kicker{ color:rgba(236,236,242,.58); font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:850; } .ac-skin .center{ text-align:center; } .ac-skin .muted{ color:rgba(236,236,242,.74); font-size: clamp(14px, 1.35vw, 15.6px); line-height:1.82; letter-spacing:.003em; font-weight:460; } .ac-skin .note{ margin-top:8px; color:rgba(236,236,242,.60); font-size:12.5px; line-height:1.78; letter-spacing:.003em; max-width: 90ch; font-weight:460; } .ac-skin .list{ margin:10px 0 0 0; padding:0 0 0 18px; color:rgba(236,236,242,.68); line-height:1.86; font-size: clamp(13.6px, 1.25vw, 15px); letter-spacing:.002em; } /* ========================================================= CARDS (scoped) ========================================================= */ .ac-skin .card{ position:relative; background: radial-gradient(circle at 10% 0%, rgba(255,255,255,.06), transparent 52%), linear-gradient(180deg, rgba(16,16,22,.98), rgba(8,8,12,.99)); border-radius:18px; padding:20px 18px 18px; border:1px solid rgba(255,255,255,.10); box-shadow: var(--shadowA), var(--inset); overflow:hidden; transform:translateY(0); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease; color:var(--txt); isolation:isolate; } .ac-skin .card::before{ content:""; position:absolute; inset:10px; border-radius:14px; border:1px solid rgba(201,162,77,.08); pointer-events:none; opacity:.75; z-index:0; } .ac-skin .card::after{ content:""; position:absolute; inset:-2px; background: radial-gradient(circle at 20% 10%, rgba(201,162,77,.10), transparent 56%); opacity:0; transition: opacity .22s ease; pointer-events:none; z-index:0; } .ac-skin .card > *{ position:relative; z-index:1; } .ac-skin .card:hover{ border-color: rgba(201,162,77,.18); box-shadow: 0 22px 70px rgba(0,0,0,.85), var(--inset); transform: translateY(-2px); filter: brightness(1.02); } .ac-skin .card:hover::after{ opacity:.85; } .ac-skin .card h3{ font-weight:800; font-size: clamp(16px, 2vw, 20px); color: rgba(240,240,248,.98); line-height:1.12; } .ac-skin .hi{ border-left:3px solid rgba(201,162,77,.38); padding-left:12px; } /* ========================================================= BUTTONS (scoped) ========================================================= */ .ac-skin .btn-row, .ac-skin .cta-row{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important; justify-content:center; } .ac-skin .pulse-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; padding:11px 18px; border-radius:999px; border:1px solid rgba(201,162,77,.35); color:#F3F1EA; text-decoration:none; font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; background: radial-gradient(circle at 0 0, rgba(201,162,77,.16), transparent 58%), linear-gradient(135deg, rgba(14,14,18,1), rgba(8,8,10,1)); box-shadow: var(--shadowB), 0 0 0 1px rgba(255,255,255,.06) inset; transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease; white-space:nowrap; -webkit-tap-highlight-color: transparent; user-select:none; max-width: 100%; overflow:hidden; } .ac-skin .pulse-btn::after{ content:""; position:absolute; top:-60%; left:-40%; width:60%; height:220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: rotate(22deg); opacity:0; transition: opacity .18s ease, transform .50s ease; pointer-events:none; } .ac-skin .pulse-btn:hover{ border-color: rgba(201,162,77,.62); box-shadow: 0 18px 55px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.08) inset; transform: translateY(-1px); filter: brightness(1.03); } .ac-skin .pulse-btn:hover::after{ opacity:.65; transform: translateX(130%) rotate(22deg); } .ac-skin .pulse-btn:active{ transform: translateY(1px) scale(.99); } .ac-skin .wa-pill{ border-style:dashed; border-color:rgba(236,236,242,.55); opacity:.95; } .ac-skin .wa-pill span.icon{ display:inline-flex; width:16px; height:16px; border-radius:999px; border:1px solid rgba(236,236,242,.70); align-items:center; justify-content:center; font-size:10px; font-weight:900; } .ac-skin .ghost{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; border-radius:999px; font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#F3F1EA; background: rgba(8,8,10,.48); border: 1px solid rgba(201,162,77,.22); box-shadow: 0 18px 40px rgba(0,0,0,.68); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease; white-space:nowrap; text-decoration:none; max-width: 100%; } .ac-skin .ghost:hover{ transform: translateY(-1px); filter: brightness(1.03); border-color: rgba(201,162,77,.45); box-shadow: 0 22px 52px rgba(0,0,0,.88), 0 0 26px rgba(201,162,77,.10); } /* Canonical .btn (scoped so it cannot break other pages) */ .ac-skin .btn{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; line-height:1; border-radius:12px; border:1px solid rgba(255,255,255,.24); color:#f1f1f7; background:linear-gradient(135deg, rgba(40,40,48,1), rgba(8,8,14,1)); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 18px rgba(0,0,0,.75); text-decoration:none; white-space:nowrap; vertical-align:middle; transition: background .2s ease, box-shadow .2s ease, transform .16s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; user-select:none; } .ac-skin .btn:hover{ background:linear-gradient(135deg, rgba(60,60,70,1), rgba(5,5,10,1)); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 12px 32px rgba(0,0,0,.95); transform:translateY(-1px); border-color: rgba(255,255,255,.32); } .ac-skin .btn.primary{ border-color: rgba(255,255,255,.38); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 22px rgba(0,0,0,.85); } /* ========================================================= TABLE (scoped) ========================================================= */ .ac-skin .table{ display:grid; gap:8px; } .ac-skin .row{ display:grid; grid-template-columns:1.2fr .8fr; gap:10px; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background: linear-gradient(180deg, rgba(20,20,27,.45), rgba(12,12,16,.92)); } .ac-skin .row .name{ font-weight:750; letter-spacing:-.005em; } .ac-skin .row .val{ text-align:right; font-weight:900; letter-spacing:-.01em; } /* ========================================================= OPTIONAL COMPONENTS (scoped) ========================================================= */ .ac-skin .badge-hosting{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid rgba(201,162,77,.26); background: rgba(10,10,14,.78); font-size:10.5px; font-weight:900; letter-spacing:.22em; text-transform:uppercase; color:#F6F3EA; } .ac-skin .badge-hosting span.dot{ width:7px; height:7px; border-radius:999px; background: rgba(201,162,77,.90); box-shadow: 0 0 10px rgba(201,162,77,.42); } .ac-skin .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; max-width: 100%; } .ac-skin .chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; font-size:10px; letter-spacing:.20em; text-transform:uppercase; border:1px solid rgba(201,162,77,.18); background: rgba(8,8,10,.45); color:#E2E0D8; white-space:nowrap; font-weight:900; max-width: 100%; } .ac-skin .chip strong{ font-weight:950; letter-spacing:.18em; } .ac-skin .proof{ margin-top:14px; border-radius:18px; padding:18px; border:1px solid rgba(201,162,77,.22); background: radial-gradient(circle at 18% 10%, rgba(201,162,77,.14), transparent 55%), radial-gradient(circle at 0 0, rgba(33,70,139,.18), transparent 58%), linear-gradient(180deg, rgba(18,18,26,.82), rgba(10,10,14,.98)); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 22px 50px rgba(0,0,0,.90), 0 0 36px rgba(201,162,77,.10); position:relative; overflow:hidden; isolation:isolate; } .ac-skin .proof::after{ content:""; position:absolute; inset:10px; border-radius:14px; border:1px solid rgba(201,162,77,.10); pointer-events:none; opacity:.70; } .ac-skin .proof > *{ position:relative; z-index:1; } .ac-skin .proof-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; } .ac-skin .proof-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(201,162,77,.26); background: rgba(10,10,14,.60); color:#F3F1EA; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; font-weight:950; } .ac-skin .proof-pill .p-dot{ width:8px;height:8px;border-radius:999px; background: radial-gradient(circle at 30% 20%, rgba(201,162,77,1), rgba(120,95,38,1)); box-shadow: 0 0 10px rgba(201,162,77,.45); } .ac-skin .proof-url{ font-weight:900; letter-spacing:-.01em; font-size: clamp(18px, 1.7vw, 20px); color:#F7F5EE; margin-top:8px; line-height:1.1; word-break: break-word; } /* ========================================================= MOBILE refinements (scoped) ========================================================= */ @media (max-width: 520px){ .ac-skin .wrap{ padding: 16px 14px; } .ac-skin .card, .ac-skin .proof{ padding: 16px 14px; border-radius: 16px; } .ac-skin .btn-row{ flex-direction: column; align-items: stretch; justify-content: flex-start; } .ac-skin .pulse-btn, .ac-skin .ghost{ width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding: 12px 14px; } .ac-skin .chip{ white-space: normal; letter-spacing: .14em; line-height: 1.25; } .ac-skin .row{ grid-template-columns: 1fr; gap: 6px; } .ac-skin .row .val{ text-align: left; opacity: .92; } } @media (max-width: 380px){ .ac-skin .kicker, .ac-skin .section-label{ letter-spacing: .20em; } .ac-skin .chip{ font-size: 10px; letter-spacing: .12em; } .ac-skin .pulse-btn, .ac-skin .ghost{ font-size: 12px; letter-spacing: .12em; } }