-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
3 lines (2 loc) · 5.25 KB
/
Copy pathstyles.css
File metadata and controls
3 lines (2 loc) · 5.25 KB
1
2
3
:root{color-scheme:dark;--bg:#29211c;--surface:#382c24;--surface-soft:#44352a;--text:#f3eee7;--muted:#c9bbae;--line:rgba(245,234,218,.16);--accent:#c99363;--accent-ink:#29211c;--radius:16px;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 "Segoe UI",system-ui,sans-serif}a{color:inherit;text-decoration:none}.site-header{width:min(100% - 40px,var(--max));height:72px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.025em}.brand-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:.9rem}nav{display:flex;gap:24px;color:var(--muted);font-size:.9rem}nav a:hover{color:var(--text)}.hero{width:min(100% - 40px,var(--max));min-height:calc(100dvh - 72px);margin:auto;display:grid;grid-template-columns:.84fr 1.16fr;align-items:center;gap:56px;padding:42px 0 72px}.eyebrow{margin:0 0 16px;color:var(--accent);font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.hero h1,.section h2,.final h2{margin:0;letter-spacing:-.055em;line-height:1.04}.hero h1{max-width:10ch;font-size:clamp(3rem,6.3vw,5.7rem)}.hero-copy>p:not(.eyebrow),.section-copy>p:not(.eyebrow),.workflow p{max-width:49ch;margin:22px 0 0;color:var(--muted)}.download-pair{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:30px}.download-pair span{color:var(--muted);font-size:.85rem}.download-pair code{padding:3px 7px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.06);color:var(--text)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:47px;padding:0 18px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-weight:750;transition:transform .2s ease,filter .2s ease}.button:hover{filter:brightness(1.07);transform:translateY(-2px)}.button:active{transform:translateY(1px)}.hero-media{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:0 26px 64px rgba(18,10,5,.34)}.hero-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:linear-gradient(135deg,#44352a,#29211c)}figcaption{padding:13px 16px;color:var(--muted);font-size:.86rem}.intro{padding:25px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.intro p{max-width:var(--max);margin:0 auto;text-align:center;font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.02em}.section{width:min(100% - 40px,var(--max));margin:auto;padding:110px 0}.section-copy{max-width:660px}.section h2{font-size:clamp(2.35rem,4.9vw,4.45rem)}.feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:44px}.feature-grid article{min-height:180px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.feature-grid article:first-child{grid-row:span 2;min-height:374px;background:linear-gradient(145deg,#5a3e29,#382c24)}.feature-grid article:nth-child(4){background:linear-gradient(145deg,#5a3e29,#382c24)}.feature-grid h3{margin:0 0 8px;letter-spacing:-.03em;font-size:1.35rem}.feature-grid p{max-width:31ch;margin:0;color:var(--muted)}.workflow{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;border-top:1px solid var(--line)}.workflow h2{font-size:clamp(2.2rem,4vw,3.8rem)}ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}li{position:relative;padding:19px 0 19px 55px;border-bottom:1px solid var(--line)}li:before{content:counter(list-item,decimal-leading-zero);position:absolute;left:0;color:var(--accent);font-weight:750}li strong,li span{display:block}li span{margin-top:3px;color:var(--muted)}.final{min-height:470px;padding:92px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 5%,#5a3e29 0%,#382c24 35%,#29211c 74%)}.final h2{max-width:11ch;font-size:clamp(3rem,6vw,5.8rem)}.final .download-pair{justify-content:center}footer{width:min(100% - 40px,var(--max));min-height:84px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.88rem}@media(prefers-reduced-motion:no-preference){.reveal{animation:rise .65s cubic-bezier(.16,1,.3,1) both}.delay{animation-delay:.12s}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:0s!important;transition-duration:0s!important}}@media(max-width:800px){.site-header,.hero,.section,footer{width:min(100% - 28px,var(--max))}nav{display:none}.hero{grid-template-columns:1fr;gap:34px;padding:42px 0 64px}.hero h1{font-size:clamp(3rem,14vw,4.5rem)}.section{padding:76px 0}.feature-grid,.workflow{grid-template-columns:1fr}.feature-grid article:first-child{grid-row:auto;min-height:260px}.workflow{gap:32px}.final{min-height:420px}.download-pair{align-items:flex-start;flex-direction:column}.final .download-pair{align-items:center}}
.project-notice { width: min(1180px, calc(100% - 40px)); margin: 14px auto 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .84rem; text-align: center; }