feat: apply Funktechnik Schubert branding
This commit is contained in:
Schubert Ferenc
parent
9a648e2ec8
commit
99e8201745
17 changed files with 335 additions and 104 deletions
246
app/globals.css
246
app/globals.css
|
|
@ -1,15 +1,16 @@
|
|||
:root {
|
||||
--bg: #f6f8fb;
|
||||
--bg: #f4f6f8;
|
||||
--surface: #ffffff;
|
||||
--ink: #101827;
|
||||
--muted: #5b677a;
|
||||
--line: #d9e1ec;
|
||||
--navy: #0b1728;
|
||||
--navy-2: #13243a;
|
||||
--cyan: #16b6d9;
|
||||
--ink: #101722;
|
||||
--muted: #566270;
|
||||
--line: #d9dee6;
|
||||
--navy: #082a60;
|
||||
--navy-2: #0e3a78;
|
||||
--steel: #666d76;
|
||||
--cyan: #1e9fb8;
|
||||
--orange: #f28c28;
|
||||
--radius: 8px;
|
||||
--shadow: 0 20px 50px rgba(10, 23, 40, 0.12);
|
||||
--shadow: 0 18px 44px rgba(8, 42, 96, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -49,77 +50,102 @@ textarea {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(11, 23, 40, 0.96);
|
||||
color: #fff;
|
||||
backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(8, 42, 96, 0.12);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--ink);
|
||||
box-shadow: 0 8px 24px rgba(8, 42, 96, 0.06);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
display: flex;
|
||||
min-height: 72px;
|
||||
min-height: 78px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-weight: 800;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border: 1px solid rgba(22, 182, 217, 0.45);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(22, 182, 217, 0.22), rgba(242, 140, 40, 0.18));
|
||||
}
|
||||
|
||||
.brand-mark::before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid var(--cyan);
|
||||
border-left-color: transparent;
|
||||
border-radius: 999px;
|
||||
content: "";
|
||||
.brand-logo {
|
||||
width: 286px;
|
||||
height: 68px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
border-radius: 8px;
|
||||
padding: 9px 11px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(8, 42, 96, 0.07);
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.nav a[aria-current="page"] {
|
||||
background: rgba(8, 42, 96, 0.1);
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.header-cta {
|
||||
display: inline-flex;
|
||||
min-height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
padding: 0 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-cta:hover {
|
||||
background: var(--navy-2);
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
min-height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: var(--navy);
|
||||
font-weight: 800;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 72px);
|
||||
min-height: calc(100vh - 78px);
|
||||
display: grid;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(8, 18, 32, 0.94), rgba(8, 18, 32, 0.72), rgba(8, 18, 32, 0.58)),
|
||||
linear-gradient(90deg, rgba(6, 24, 52, 0.96), rgba(8, 42, 96, 0.78), rgba(8, 42, 96, 0.58)),
|
||||
url("/workbench-signal.svg"),
|
||||
linear-gradient(135deg, #0b1728, #17324e);
|
||||
linear-gradient(135deg, #07172d, #0b3778);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -174,6 +200,30 @@ h3 {
|
|||
font-size: 21px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 720px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 17px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero-badges span {
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.hero-actions,
|
||||
.actions {
|
||||
display: flex;
|
||||
|
|
@ -190,21 +240,29 @@ h3 {
|
|||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0 18px;
|
||||
background: var(--cyan);
|
||||
color: #06111d;
|
||||
background: var(--navy);
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: var(--navy-2);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.36);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.light {
|
||||
border-color: var(--line);
|
||||
border-color: var(--navy);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
color: var(--navy);
|
||||
}
|
||||
|
||||
.button.light:hover {
|
||||
background: #eef3f8;
|
||||
}
|
||||
|
||||
.section {
|
||||
|
|
@ -244,12 +302,26 @@ h3 {
|
|||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
padding: 24px;
|
||||
box-shadow: 0 8px 26px rgba(12, 28, 48, 0.05);
|
||||
box-shadow: 0 10px 26px rgba(8, 42, 96, 0.06);
|
||||
}
|
||||
|
||||
.card h3::before {
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 3px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--orange);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.dark .card {
|
||||
|
|
@ -366,6 +438,20 @@ h3 {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: block;
|
||||
width: 220px;
|
||||
height: 52px;
|
||||
margin-bottom: 14px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legal {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
|
@ -375,16 +461,71 @@ h3 {
|
|||
font-size: 26px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.header-inner,
|
||||
.nav {
|
||||
justify-content: flex-start;
|
||||
@media (max-width: 1080px) and (min-width: 861px) {
|
||||
.brand-logo {
|
||||
width: 236px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-cta {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.header-inner {
|
||||
min-height: 68px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 194px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-cta {
|
||||
min-height: 38px;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: none;
|
||||
order: 4;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 14px 0;
|
||||
align-items: stretch;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.nav.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
|
|
@ -397,6 +538,7 @@ h3 {
|
|||
|
||||
.grid.three,
|
||||
.grid.two,
|
||||
.service-grid,
|
||||
.split,
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue