/* ADAYield v2 — Premium Infrastructure (Static Preview + Production) Author: Generated package for ADAYield.io Notes: - No external CSS frameworks required. - Theme toggle uses data-theme on . */ :root{ --bg: #0b0d10; --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.06); --text: #eef2f7; --muted: rgba(238,242,247,0.72); --muted-2: rgba(238,242,247,0.56); --border: rgba(255,255,255,0.10); --border-2: rgba(255,255,255,0.14); --shadow: 0 18px 60px rgba(0,0,0,0.45); --accent: #f5c84b; --accent-2: #ffdd80; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 12px; --max: 1140px; --pad: 24px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } html[data-theme="light"]{ --bg: #fafbfc; --surface: rgba(0,0,0,0.03); --surface-2: rgba(0,0,0,0.05); --text: #0b0d10; --muted: rgba(11,13,16,0.70); --muted-2: rgba(11,13,16,0.55); --border: rgba(0,0,0,0.10); --border-2: rgba(0,0,0,0.16); --shadow: 0 18px 55px rgba(0,0,0,0.18); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background: radial-gradient(1200px 700px at 18% -10%, rgba(245,200,75,0.18), transparent 50%), radial-gradient(900px 560px at 105% 0%, rgba(245,200,75,0.10), transparent 45%), linear-gradient(180deg, var(--bg), var(--bg)); color:var(--text); font-family:var(--sans); line-height:1.55; letter-spacing: -0.01em; } a{color:inherit} a:hover{opacity:0.92} a:focus{outline: 3px solid rgba(245,200,75,0.45); outline-offset: 3px} p{margin:0 0 1rem 0} h1,h2,h3{margin:0 0 0.75rem 0; line-height:1.15} h1{font-size: clamp(2.2rem, 4.3vw, 3.5rem); letter-spacing:-0.03em} h2{font-size: clamp(1.55rem, 2.2vw, 2.1rem); letter-spacing:-0.02em} h3{font-size: 1.08rem; letter-spacing:-0.01em} small,.small{font-size:0.92rem; color:var(--muted)} .mono{font-family: var(--mono)} hr{border:none; border-top:1px solid var(--border); margin: 26px 0} .container{ width:100%; max-width: var(--max); margin:0 auto; padding: 0 var(--pad); } .skip{ position:absolute; top:-60px; left:16px; background: var(--accent); color:#14161a; padding: 10px 14px; border-radius: 999px; text-decoration:none; font-weight:700; z-index: 9999; } .skip:focus{top:14px} header.site-header{ position:sticky; top:0; z-index: 50; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(11,13,16,0.72), rgba(11,13,16,0.40)); border-bottom: 1px solid var(--border); } html[data-theme="light"] header.site-header{ background: linear-gradient(180deg, rgba(250,251,252,0.85), rgba(250,251,252,0.65)); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 14px 0; } .brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; } .brand img{ width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .brand .name{ display:flex; flex-direction:column; } .brand .name strong{ font-size: 0.98rem; letter-spacing: 0.01em; } .brand .name span{ font-size: 0.84rem; color: var(--muted); } nav.primary{ display:flex; align-items:center; gap: 18px; } nav.primary a{ text-decoration:none; font-size: 0.95rem; color: var(--muted); padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; } nav.primary a[aria-current="page"]{ color: var(--text); border-color: var(--border); background: var(--surface); } .actions{ display:flex; align-items:center; gap: 10px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; text-decoration:none; font-weight:700; font-size: 0.95rem; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor:pointer; } .btn:hover{transform: translateY(-1px)} .btn:active{transform: translateY(0px)} .btn.primary{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #14161a; border-color: rgba(0,0,0,0.14); } .btn.ghost{ background: transparent; } .icon-btn{ width: 42px; height: 42px; padding:0; border-radius: 999px; } .btn svg{width:18px; height:18px} .mobile-toggle{ display:none; } @media (max-width: 980px){ nav.primary{display:none} .mobile-toggle{display:inline-flex} .btn.primary{display:none} /* keep header clean; shown in mobile drawer */ } .drawer{ display:none; border-top: 1px solid var(--border); background: rgba(0,0,0,0.18); } html[data-theme="light"] .drawer{background: rgba(0,0,0,0.03)} .drawer.open{display:block} .drawer .inner{ padding: 12px 0 18px 0; display:flex; flex-direction:column; gap: 10px; } .drawer a{ text-decoration:none; color: var(--text); padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .drawer .cta{ display:flex; gap: 10px; flex-wrap: wrap; } main{padding: 48px 0 50px 0} .hero{ padding: 26px 0 22px 0; } .kicker{ display:inline-flex; gap: 10px; align-items:center; padding: 7px 12px; border-radius: 999px; border:1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 650; font-size: 0.92rem; } .kicker .dot{ width: 7px; height:7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(245,200,75,0.15); } .hero-grid{ display:grid; grid-template-columns: 1.25fr 0.75fr; gap: 22px; margin-top: 16px; } @media (max-width: 980px){ .hero-grid{grid-template-columns: 1fr; gap: 16px} } .card{ border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card.pad{ padding: 22px; } .card.soft{ box-shadow:none; background: var(--surface); } .card h3{margin-bottom: 10px} .lead{ font-size: 1.06rem; color: var(--muted); max-width: 62ch; } .hero-actions{ display:flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .note{ margin-top: 14px; color: var(--muted-2); font-size: 0.93rem; } .notice{ border-left: 3px solid rgba(245,200,75,0.75); padding: 12px 14px; border-radius: 12px; background: rgba(245,200,75,0.06); color: var(--muted); } html[data-theme="light"] .notice{background: rgba(245,200,75,0.12)} .grid{ display:grid; gap: 14px; } .grid.cols-3{grid-template-columns: repeat(3, minmax(0, 1fr))} .grid.cols-2{grid-template-columns: repeat(2, minmax(0, 1fr))} @media (max-width: 980px){ .grid.cols-3{grid-template-columns: 1fr} .grid.cols-2{grid-template-columns: 1fr} } .section{ margin-top: 34px; } .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 14px; } .section-head p{max-width: 70ch} .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.86rem; color: var(--muted); background: var(--surface); } .pill .dot{width:7px;height:7px;border-radius:50%} .pill.redev .dot{background: rgba(245,200,75,0.95)} .pill.dev .dot{background: rgba(110,231,183,0.95)} .pill.design .dot{background: rgba(147,197,253,0.95)} .pill.limited .dot{background: rgba(244,114,182,0.95)} .product-card{ padding: 16px 16px 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); } .product-card h3{display:flex; justify-content:space-between; gap: 10px; align-items:flex-start} .product-card p{color: var(--muted); margin-top: 8px} .product-card .meta{ margin-top: 12px; display:flex; justify-content:space-between; gap: 12px; align-items:center; flex-wrap: wrap; } .product-card .meta a{color: var(--text); text-decoration:none} .product-card .meta a:hover{text-decoration:underline} .product-card .host{color: var(--muted); font-size: 0.92rem} .list{ display:grid; gap: 10px; } .list li{ list-style:none; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; color: var(--muted); } .list li strong{color: var(--text)} .list li .sub{color: var(--muted-2); margin-top: 3px; display:block} .footer{ padding: 28px 0 38px 0; border-top: 1px solid var(--border); color: var(--muted); } .footer .row{ display:flex; justify-content:space-between; gap: 16px; flex-wrap: wrap; } .footer a{color: var(--muted); text-decoration:none} .footer a:hover{text-decoration:underline} .disclaimer{ margin-top: 12px; color: var(--muted-2); font-size: 0.92rem; max-width: 110ch; } .badge{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.86rem; } .table{ width:100%; border-collapse: separate; border-spacing: 0; overflow:hidden; border:1px solid var(--border); border-radius: 14px; background: var(--surface); } .table th,.table td{ padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .table th{color: var(--text); text-align:left; font-size: 0.92rem} .table td{color: var(--muted)} .table tr:last-child td{border-bottom:none} code.inline{ font-family: var(--mono); font-size: 0.92rem; padding: 2px 6px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; } /* Cookie banner */ .cookie-banner{ position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 999; display:none; } .cookie-banner.show{display:block} .cookie-banner .box{ max-width: var(--max); margin: 0 auto; border: 1px solid var(--border-2); border-radius: 16px; background: rgba(0,0,0,0.55); backdrop-filter: blur(14px); padding: 14px; box-shadow: var(--shadow); } html[data-theme="light"] .cookie-banner .box{ background: rgba(255,255,255,0.88); } .cookie-banner .top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap: wrap; } .cookie-banner p{color: var(--muted); margin: 0} .cookie-banner .btns{ display:flex; gap: 10px; flex-wrap: wrap; } .modal{ position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; padding: 18px; z-index: 1000; } .modal.show{display:flex} .modal .panel{ width: 100%; max-width: 720px; border-radius: 18px; border: 1px solid var(--border-2); background: rgba(0,0,0,0.72); backdrop-filter: blur(14px); padding: 18px; box-shadow: var(--shadow); } html[data-theme="light"] .modal .panel{background: rgba(255,255,255,0.96)} .modal .panel h3{margin-bottom: 6px} .toggle-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 12px 12px; border:1px solid var(--border); border-radius: 14px; background: var(--surface); margin-top: 10px; } .switch{ position: relative; width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.08); } .switch .knob{ position:absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); transition: transform 160ms ease; } .switch.on{background: rgba(245,200,75,0.22); border-color: rgba(245,200,75,0.45)} .switch.on .knob{transform: translateX(18px); background: var(--accent)} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important; transition:none !important; animation:none !important} .btn:hover{transform:none} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}