Assemble le logo et passe le site en fond noir
This commit is contained in:
70
styles.css
70
styles.css
@@ -38,11 +38,7 @@ body {
|
||||
min-height: 100vh;
|
||||
font-family: "Segoe UI", "Trebuchet MS", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 16% 18%, rgba(255, 122, 0, 0.28), transparent 22%),
|
||||
radial-gradient(circle at 78% 18%, rgba(23, 98, 255, 0.24), transparent 22%),
|
||||
radial-gradient(circle at bottom center, rgba(255, 122, 0, 0.1), transparent 26%),
|
||||
linear-gradient(180deg, #020202 0%, #090b12 48%, #0c1018 100%);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
body::before {
|
||||
@@ -50,11 +46,7 @@ body::before {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
||||
background-size: 42px 42px;
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
|
||||
background: none;
|
||||
}
|
||||
|
||||
body::after {
|
||||
@@ -62,20 +54,11 @@ body::after {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at 50% 110%, rgba(255, 122, 0, 0.16), transparent 24%),
|
||||
linear-gradient(180deg, transparent 0 58%, rgba(23, 98, 255, 0.07) 72%, transparent 100%);
|
||||
mix-blend-mode: screen;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ambient {
|
||||
position: fixed;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
border-radius: 50%;
|
||||
filter: blur(90px);
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ambient-left {
|
||||
@@ -255,23 +238,31 @@ p {
|
||||
|
||||
.logo-lockup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.55rem 0.8rem;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(0, 0, 0, 0.72);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.02),
|
||||
0 0 22px rgba(23, 98, 255, 0.08);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.logo-lockup:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hero-logo-icon {
|
||||
display: block;
|
||||
width: clamp(72px, 9vw, 112px);
|
||||
height: auto;
|
||||
filter:
|
||||
drop-shadow(0 0 10px rgba(255, 122, 0, 0.1))
|
||||
drop-shadow(0 0 14px rgba(23, 98, 255, 0.14));
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
display: block;
|
||||
width: clamp(220px, 29vw, 360px);
|
||||
width: clamp(300px, 42vw, 620px);
|
||||
height: auto;
|
||||
filter:
|
||||
drop-shadow(0 0 12px rgba(255, 122, 0, 0.08))
|
||||
@@ -555,14 +546,27 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.brand-link-logo {
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.78);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-link-icon {
|
||||
display: block;
|
||||
width: 2.7rem;
|
||||
height: auto;
|
||||
filter:
|
||||
drop-shadow(0 0 8px rgba(255, 122, 0, 0.1))
|
||||
drop-shadow(0 0 10px rgba(23, 98, 255, 0.14));
|
||||
}
|
||||
|
||||
.brand-link-mark {
|
||||
display: block;
|
||||
width: 7.6rem;
|
||||
width: 10.4rem;
|
||||
height: auto;
|
||||
filter:
|
||||
drop-shadow(0 0 8px rgba(255, 122, 0, 0.08))
|
||||
|
||||
Reference in New Issue
Block a user