51 lines
3.5 KiB
CSS
Executable File
51 lines
3.5 KiB
CSS
Executable File
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:#FAF8F5;color:#2D2A26;line-height:1.6}
|
|
a{color:inherit;text-decoration:none}
|
|
.container{max-width:720px;margin:0 auto;padding:100px 40px}
|
|
.container.narrow{max-width:400px;padding-top:160px}
|
|
.logo{font-size:1rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8B7355;display:block;margin-bottom:80px}
|
|
h1{font-size:3rem;font-weight:300;line-height:1.2;margin-bottom:32px}
|
|
h2{font-size:1.5rem;font-weight:400;margin-bottom:8px}
|
|
.intro{font-size:1.2rem;color:#5C5549;margin-bottom:60px;max-width:540px}
|
|
.subtitle{font-size:.95rem;color:#8B7355;margin-bottom:24px}
|
|
.section{margin-bottom:60px}
|
|
.label{font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#8B7355;margin-bottom:16px}
|
|
.section p{font-size:1.05rem;color:#5C5549}
|
|
.cta{margin-bottom:80px}
|
|
.btn{display:inline-block;padding:14px 32px;font-size:.9rem;font-weight:400;border-radius:100px;border:none;cursor:pointer;transition:opacity .2s}
|
|
.btn.primary{background:#2D2A26;color:#FAF8F5}
|
|
.btn.secondary{background:transparent;color:#2D2A26;border:1px solid #D4CEC4;margin-left:12px}
|
|
.btn.full{width:100%;text-align:center}
|
|
.btn:hover{opacity:.8}
|
|
.trust{border-top:1px solid #E8E4DE;padding-top:48px}
|
|
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
|
|
.item{font-size:.9rem;color:#5C5549}
|
|
.item strong{display:block;font-weight:500;color:#2D2A26;margin-bottom:4px}
|
|
.footer{margin-top:100px;padding-top:32px;border-top:1px solid #E8E4DE;font-size:.8rem;color:#A09A90}
|
|
.card{background:#fff;border:1px solid #E8E4DE;border-radius:12px;padding:32px}
|
|
.field{margin-bottom:20px}
|
|
.field label{display:block;font-size:.85rem;font-weight:500;color:#5C5549;margin-bottom:6px}
|
|
.field input,.field select{width:100%;padding:12px 14px;font-size:1rem;font-family:inherit;border:1px solid #D4CEC4;border-radius:8px;background:#FAF8F5}
|
|
.field input:focus,.field select:focus{outline:none;border-color:#8B7355;background:#fff}
|
|
.header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-bottom:1px solid #E8E4DE}
|
|
.header .logo{margin:0}
|
|
.header nav{display:flex;gap:28px;align-items:center}
|
|
.header nav a{font-size:.9rem;color:#5C5549}
|
|
.header nav a:hover,.header nav a.active{color:#2D2A26}
|
|
.account{font-size:.85rem;color:#8B7355;padding-left:28px;border-left:1px solid #E8E4DE}
|
|
main{max-width:1000px;margin:0 auto;padding:48px 40px}
|
|
main h1{font-size:1.8rem;margin-bottom:4px}
|
|
main .subtitle{margin-bottom:40px}
|
|
.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
|
|
.card.add{border:2px dashed #D4CEC4;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;cursor:pointer}
|
|
.card.add:hover{border-color:#8B7355;background:#fff}
|
|
.card.add .plus{font-size:2rem;color:#8B7355;margin-bottom:8px}
|
|
.card.add span{color:#8B7355;font-size:.9rem}
|
|
.overlay{position:fixed;inset:0;background:rgba(45,42,38,.4);display:none;align-items:center;justify-content:center}
|
|
.overlay.active{display:flex}
|
|
.modal{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:420px}
|
|
.actions{display:flex;gap:12px;margin-top:28px}
|
|
.actions .btn{flex:1;text-align:center}
|
|
.toast{position:fixed;bottom:24px;right:24px;background:#2D2A26;color:#FAF8F5;padding:14px 24px;border-radius:8px;font-size:.9rem;opacity:0;transform:translateY(10px);transition:all .3s}
|
|
.toast.show{opacity:1;transform:translateY(0)}
|