/* styles.css — Deeper Than Skin Relaunch Polished for production: - Stronger accessibility + focus handling - Better mobile/touch behavior - Fixes honeypot positioning edge case - Keeps your original tokens, glass, gradients, and reveal motion */ :root{ --bg:#070b10; --panel: rgba(255,255,255,.06); --panel2: rgba(255,255,255,.08); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.70); --faint: rgba(255,255,255,.50); --line: rgba(255,255,255,.14); --glow: 0 0 40px rgba(120, 220, 180, .12); --accent: #7de0c0; --accent2:#c7b7ff; --shadow: 0 18px 55px rgba(0,0,0,.55); --radius: 22px; --radius2: 16px; --serif: "Fraunces", ui-serif, Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } /* Contrast mode toggled by JS on */ :root[data-contrast="high"]{ --panel: rgba(255,255,255,.09); --panel2: rgba(255,255,255,.12); --line: rgba(255,255,255,.22); --muted: rgba(255,255,255,.78); } *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; color:var(--text); background: radial-gradient(1200px 600px at 20% 0%, rgba(125,224,192,.18), transparent 60%), radial-gradient(1000px 700px at 90% 10%, rgba(199,183,255,.12), transparent 55%), radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,.05), transparent 60%), var(--bg); font-family: var(--sans); letter-spacing: -0.01em; overflow-x:hidden; } a{ color: inherit; text-decoration:none; } a:focus-visible, button:focus-visible, input:focus-visible{ outline: 3px solid rgba(125,224,192,.45); outline-offset: 3px; border-radius: 10px; } /* Improve tap behavior on touch devices */ button, a, input{ -webkit-tap-highlight-color: transparent; } /* ========================= BACKGROUND LAYERS ========================= */ .bg{ position:fixed; inset:0; z-index:-1; } .noise{ position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity:.20; pointer-events:none; } .waitlist-meta{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:10px; font-size:.9rem; opacity:.85; } .waitlist-dot{ opacity:.5; } .waitlist-count strong{ font-variant-numeric: tabular-nums; } .grid{ position:absolute; inset:-2px; background: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 40% 25%, rgba(0,0,0,1), rgba(0,0,0,.1) 55%, transparent 75%); opacity:.18; } .orb{ position:absolute; width:520px; height:520px; border-radius: 999px; filter: blur(22px); opacity:.25; transform: translate3d(0,0,0); } .orb1{ left:-160px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(125,224,192,.75), transparent 60%); animation: float1 12s ease-in-out infinite; } .orb2{ right:-220px; top:40px; background: radial-gradient(circle at 40% 35%, rgba(199,183,255,.7), transparent 60%); animation: float2 14s ease-in-out infinite; } @keyframes float1{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } } @keyframes float2{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } } /* ========================= LAYOUT WRAP ========================= */ .wrap{ width:min(1120px, 92vw); margin: 0 auto; padding: 92px 0 48px; } /* ========================= NAV ========================= */ .nav{ position: sticky; top: 0; backdrop-filter: blur(12px); background: linear-gradient(to bottom, rgba(7,11,16,.78), rgba(7,11,16,.18)); border-bottom: 1px solid rgba(255,255,255,.08); z-index: 50; } .nav-inner{ width:min(1120px, 92vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding: 14px 0; } .brand{ display:flex; align-items:center; gap:12px; font-weight: 700; letter-spacing: -0.02em; } .brand-logo{ width: 26px; height: 26px; border-radius: 8px; object-fit: cover; box-shadow: var(--glow); } .brand-text{ opacity:.95; } .nav-actions{ display:flex; gap:10px; align-items:center; } .chip{ padding: 10px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13px; color: var(--muted); } .icon-btn{ border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); border-radius: 12px; width: 40px; height: 40px; cursor:pointer; } /* ========================= HERO ========================= */ .hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 22px; padding-top: 22px; } @media (max-width: 980px){ .hero{ grid-template-columns: 1fr; } .wrap{ padding-top: 70px; } } .kicker{ display:inline-flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; width: fit-content; } .kicker::before{ content:""; width:8px; height:8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 18px rgba(125,224,192,.45); } .headline{ font-family: var(--serif); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; font-size: clamp(40px, 5.3vw, 62px); margin: 16px 0 14px; } .headline-quiet{ background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.68)); -webkit-background-clip: text; background-clip: text; color: transparent; } .subhead{ color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 62ch; margin: 0 0 18px; } .subhead strong{ color: rgba(255,255,255,.88); font-weight: 650; } .cta-row{ display:flex; gap: 10px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-weight: 650; cursor:pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease; user-select:none; } .btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); } .btn.primary{ background: linear-gradient(135deg, rgba(125,224,192,.95), rgba(199,183,255,.95)); color: rgba(7,11,16,.92); border-color: rgba(255,255,255,.22); box-shadow: var(--shadow); } .btn.ghost{ background: rgba(255,255,255,.02); color: var(--muted); } .w100{ width:100%; } .trust{ display:flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; } .trust-item{ display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; } .dot{ width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); } /* ========================= CARDS ========================= */ .glass{ background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .card{ padding: 18px; } .card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .card-title{ margin:0; font-weight: 750; letter-spacing: -0.02em; } .card-subtitle{ margin:6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .badge{ padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--muted); font-size: 12px; white-space:nowrap; } .countdown{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } @media (max-width: 420px){ .countdown{ grid-template-columns: repeat(2, 1fr); } } .timebox{ border-radius: var(--radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 12px 10px; text-align:center; } .num{ font-size: 26px; font-weight: 850; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .lbl{ margin-top: 4px; font-size: 12px; color: var(--muted); } .divider{ height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; } .mini{ display:grid; gap:8px; } .mini-row{ display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-size: 13px; } .mini-val{ color: rgba(255,255,255,.82); } .card-actions{ display:grid; gap:10px; margin-top: 14px; } .skill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; } .pill{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; } /* ========================= SECTIONS ========================= */ .section{ padding: 54px 0 0; } .section-head h2{ font-family: var(--serif); margin: 0 0 8px; font-size: 34px; letter-spacing: -0.02em; } .section-head p{ margin: 0; color: var(--muted); line-height:1.6; } .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } } .tile{ border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 18px; transition: transform .14s ease, border-color .2s ease; } .tile:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); } .tile h3{ margin: 0 0 8px; letter-spacing:-0.02em; } .tile p{ margin: 0; color: var(--muted); line-height: 1.6; } /* ========================= SPLIT (EARLY ACCESS) ========================= */ .split{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; } @media (max-width: 980px){ .split{ grid-template-columns: 1fr; } } .split-left h2{ font-family: var(--serif); font-size: 34px; margin: 0 0 10px; } .split-left p{ color: var(--muted); line-height:1.6; margin: 0 0 14px; } .bullets{ margin:0; padding:0; list-style:none; display:grid; gap:10px; } .bullets li{ display:flex; gap:10px; color: var(--muted); } .check{ width: 22px; height: 22px; border-radius: 8px; display:inline-flex; align-items:center; justify-content:center; background: rgba(125,224,192,.14); border: 1px solid rgba(125,224,192,.25); color: rgba(125,224,192,.95); flex: 0 0 auto; } .form{ padding: 18px; position: relative; /* ensures the honeypot absolute positioning never escapes */ } .label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .input-row{ display:flex; gap:10px; } @media (max-width: 520px){ .input-row{ flex-direction:column; } } input[type="email"]{ width: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: var(--text); padding: 12px 12px; font-size: 15px; } input[type="email"]::placeholder{ color: rgba(255,255,255,.50); } input[type="email"]:focus-visible{ border-color: rgba(125,224,192,.35); box-shadow: 0 0 0 4px rgba(125,224,192,.12); } .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .fineprint{ margin: 10px 0 0; color: var(--faint); font-size: 12px; line-height:1.5; } .form-actions{ margin-top: 12px; } .hint{ color: var(--faint); font-size: 12px; margin: 0; } .toast{ margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: var(--muted); display:none; } /* ========================= CONTACT ========================= */ .contact-row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 980px){ .contact-row{ grid-template-columns: 1fr; } } .contact-card{ border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); padding: 16px; display:flex; gap:12px; align-items:center; transition: transform .14s ease, border-color .2s ease; } .contact-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); } .contact-ico{ width: 42px; height: 42px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.82); } .social-ico{ width: 20px; height: 20px; display: block; filter: invert(1); opacity: .92; } .contact-card:hover .social-ico{ opacity: 1; } .contact-title{ font-weight: 750; letter-spacing:-0.02em; } .contact-sub{ color: var(--muted); font-size: 13px; margin-top: 2px; } /* ========================= FOOTER ========================= */ .footer{ padding: 46px 0 10px; color: var(--muted); } .footer-inner{ display:flex; justify-content:space-between; gap: 18px; align-items:flex-start; border-top: 1px solid rgba(255,255,255,.10); padding-top: 16px; } @media (max-width: 720px){ .footer-inner{ flex-direction:column; } .foot-right{ justify-content:flex-start; } } .foot-left{ max-width: 60ch; } .foot-brand{ display:flex; align-items:center; gap:10px; font-weight: 800; color: rgba(255,255,255,.86); letter-spacing: -0.02em; } .brand-dot{ width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(125,224,192,1), rgba(199,183,255,1)); box-shadow: var(--glow); } .foot-note{ margin: 10px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; } .foot-right{ display:flex; gap: 10px; flex-wrap:wrap; } .foot-link{ padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); color: var(--muted); font-size: 13px; transition: border-color .2s ease, transform .12s ease, background .2s ease; } .foot-link:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.03); } /* ========================= SMASHPRO CREDIT ========================= */ .credit{ margin: 10px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; } .credit[data-credit="off"]{ display:none; } .credit-link{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: rgba(255,255,255,.82); transition: transform .12s ease, border-color .2s ease, background .2s ease; } .credit-link:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: rgba(255,255,255,.92); } .credit-logo{ width: 18px; height: 18px; border-radius: 6px; display: block; object-fit: contain; filter: invert(1); opacity: .92; } .credit-link:hover .credit-logo{ opacity: 1; } /* ========================= REVEAL ANIMATION ========================= */ .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; } .reveal.in{ opacity: 1; transform: translateY(0); } /* ========================= REDUCED MOTION ========================= */ @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .orb1, .orb2{ animation:none; } .btn:hover, .tile:hover, .contact-card:hover, .foot-link:hover, .credit-link:hover{ transform:none; } } /* Disable hover lift effects on touch devices to avoid “sticky hover” */ @media (hover: none){ .btn:hover, .tile:hover, .contact-card:hover, .foot-link:hover, .credit-link:hover{ transform:none; } }