JustFolderSupport/styles.css at main · fabassP/JustFolderSupport · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
/* Minimal, classy single-page styles */
:root{
  --bg: #0b0c10;
  --card: #111319;
  --text: #e9ecf1;
  --muted: #9aa3b2;
  --accent: #7aa2ff;
  --accent-2: #9d8cff;
  --border: #1b1e27;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background: linear-gradient(180deg, #0b0c10 0%, #0e1118 100%);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:28px;height:28px}
.brand-name{font-weight:700;letter-spacing:.2px}

.header nav{display:flex;gap:16px;align-items:center}
.header a{color:var(--muted);text-decoration:none;font-weight:500}
.header a:hover{color:var(--text)}

.btn{padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid var(--border)}
.btn-outline{background:transparent;color:var(--text)}
.btn-primary{background:var(--accent);color:#0b0c10;border-color:transparent}
.btn-primary:hover{filter:brightness(1.05)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:40px;padding-bottom:32px}
.hero h1{font-size:54px;line-height:1.1;margin:0 0 12px}
.lead{font-size:18px;color:var(--muted);max-width:52ch}
.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.cta{margin-top:22px;display:flex;gap:12px;align-items:center}
.appstore-badge{
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 14px;border-radius:12px;
  background:#000;color:#fff;text-decoration:none;
  font-weight:700;letter-spacing:.2px;border:1px solid #222;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.apple-logo{font-family: 'SF Pro', system-ui, -apple-system; font-size:18px; line-height:1}
.subtext{margin-top:10px;color:var(--muted);font-size:14px}

.hero-media{display:flex;justify-content:center}
.mock{width:100%;max-width:400px;filter:drop-shadow(0 20px 60px rgba(0,0,0,.6))}

.features{padding:48px 0}
.features h2{font-size:28px;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);padding:20px;border-radius:16px}
.card .icon{font-size:22px}

.quote{padding:28px 0;text-align:center}
blockquote{font-size:24px;margin:0}
.cite{color:var(--muted);margin-top:8px}

.faq{padding:48px 0}
.faq details{background:var(--card);border:1px solid var(--border);padding:16px 18px;border-radius:12px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700}

.final-cta{padding:32px 0;text-align:center}
.final-cta h2{margin:0 0 16px}

.footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:24px;margin-top:24px}
.footer .links{display:flex;gap:12px}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:40px}
  .grid{grid-template-columns:1fr}
}