446 lines
11 KiB
CSS
446 lines
11 KiB
CSS
/* ============================================================
|
||
HeroSection — central content overlay on the hero stage
|
||
============================================================ */
|
||
|
||
/* ── Content wrapper ─────────────────────────────────────────── */
|
||
.heroContentWrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 5;
|
||
}
|
||
|
||
/* ── Top bar: theme toggle (left) + language (right) ─────────── */
|
||
.topBar {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
|
||
}
|
||
|
||
/* ── Icon buttons ───────────────────────────────────────────── */
|
||
.iconButton {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: var(--size-icon-button);
|
||
height: var(--size-icon-button);
|
||
padding: 0;
|
||
border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-pill);
|
||
background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
|
||
color: var(--color-blue-700);
|
||
cursor: pointer;
|
||
transition:
|
||
background-color var(--motion-duration-fast) ease,
|
||
border-color var(--motion-duration-fast) ease,
|
||
color var(--motion-duration-fast) ease,
|
||
transform var(--motion-duration-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.iconButton:focus-visible {
|
||
border-radius: var(--radius-sm);
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
[data-theme="dark"] .iconButton {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.controlIcon,
|
||
.themeIcon {
|
||
color: currentColor;
|
||
transition: transform var(--motion-duration-default) var(--motion-ease-out);
|
||
}
|
||
|
||
.themeIcon {
|
||
fill: currentColor;
|
||
}
|
||
|
||
/* ── Hero central content ────────────────────────────────────── */
|
||
.heroContent {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
max-width: 57.5rem;
|
||
margin: 0 auto;
|
||
height: auto;
|
||
min-height: 100%;
|
||
padding-top: clamp(4rem, 6vw, 5.5rem);
|
||
padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
|
||
padding-left: 1.25rem;
|
||
padding-right: 1.25rem;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ── Avatar ─────────────────────────────────────────────────── */
|
||
.avatarWrapper {
|
||
margin-bottom: clamp(0.875rem, 1.8vw, 1.375rem);
|
||
}
|
||
|
||
.avatarRingOuter {
|
||
display: inline-block;
|
||
padding: clamp(0.25rem, 0.5vw, 0.4375rem);
|
||
border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700);
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
box-shadow: 0 0.5rem 2rem var(--shadow-color);
|
||
}
|
||
|
||
[data-theme="dark"] .avatarRingOuter {
|
||
border-color: var(--color-blue-white);
|
||
}
|
||
|
||
.avatarContainer {
|
||
position: relative;
|
||
width: clamp(6.25rem, 13vw, 10.5rem);
|
||
height: clamp(6.25rem, 13vw, 10.5rem);
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatarImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* ── Display title ──────────────────────────────────────────── */
|
||
.heroTitle {
|
||
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: clamp(2rem, 4vw, 3.5rem);
|
||
line-height: 1.02;
|
||
text-shadow: none;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
.heroGreeting {
|
||
color: var(--text-secondary);
|
||
font-size: 0.42em;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.heroName {
|
||
display: block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ── Subtitle ───────────────────────────────────────────────── */
|
||
.heroSubtitle {
|
||
margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
|
||
color: var(--text-primary);
|
||
max-width: 34rem;
|
||
color: var(--text-secondary);
|
||
font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
|
||
font-weight: 480;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
/* ── Action buttons ─────────────────────────────────────────── */
|
||
.actionButtons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: clamp(0.625rem, 1.4vw, 1.25rem);
|
||
margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
|
||
}
|
||
|
||
.topBar,
|
||
.avatarWrapper,
|
||
.heroTitle,
|
||
.heroSubtitle,
|
||
.actionButtons {
|
||
animation: heroContentEnter var(--motion-duration-hero) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.avatarWrapper {
|
||
animation-delay: var(--motion-stagger);
|
||
}
|
||
|
||
.heroTitle {
|
||
animation-delay: 100ms;
|
||
}
|
||
|
||
.heroSubtitle {
|
||
animation-delay: 150ms;
|
||
}
|
||
|
||
.actionButtons {
|
||
animation-delay: 200ms;
|
||
}
|
||
|
||
:global(html[data-site-loading='true']) .topBar,
|
||
:global(html[data-site-loading='true']) .avatarWrapper,
|
||
:global(html[data-site-loading='true']) .heroTitle,
|
||
:global(html[data-site-loading='true']) .heroSubtitle,
|
||
:global(html[data-site-loading='true']) .actionButtons {
|
||
opacity: 0;
|
||
animation: none;
|
||
}
|
||
|
||
@keyframes heroContentEnter {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(0.75rem) scale(0.98);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
}
|
||
|
||
.heroButton {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: clamp(6.5rem, 10vw, 8.25rem);
|
||
height: clamp(2.5rem, 4.5vw, 3.25rem);
|
||
padding: 0 clamp(1rem, 2vw, 1.75rem);
|
||
gap: 0.5rem;
|
||
border-width: 2px;
|
||
font-size: clamp(0.8125rem, 1.1vw, 1rem);
|
||
}
|
||
|
||
.heroButtonUpcoming {
|
||
border-color: var(--border-default);
|
||
background: color-mix(in srgb, var(--bg-raised) 68%, transparent);
|
||
color: var(--text-secondary);
|
||
cursor: default;
|
||
opacity: 0.78;
|
||
}
|
||
|
||
.heroButtonPrimary {
|
||
border-color: var(--color-blue-600);
|
||
background: var(--color-blue-600);
|
||
color: var(--color-blue-white);
|
||
}
|
||
|
||
.heroButton:focus-visible {
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
[data-theme="dark"] .heroButtonUpcoming {
|
||
border-color: var(--border-default);
|
||
background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
[data-theme="dark"] .heroButtonPrimary {
|
||
border-color: var(--color-blue-white);
|
||
background: var(--color-blue-100);
|
||
color: var(--color-blue-950);
|
||
}
|
||
|
||
/* ── Contact bar ─────────────────────────────────────────────── */
|
||
.contactBar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: clamp(0.625rem, 1.4vw, 1.125rem);
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--color-blue-700);
|
||
font-size: clamp(0.6875rem, 1vw, 0.875rem);
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
[data-theme="dark"] .contactBar {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.contactItem {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
color: inherit;
|
||
white-space: nowrap;
|
||
transition: opacity var(--motion-duration-fast) ease;
|
||
}
|
||
|
||
.contactItem:focus-visible {
|
||
border-radius: 2px;
|
||
outline: 3px solid var(--focus-ring);
|
||
outline-offset: 4px;
|
||
}
|
||
|
||
.contactIcon {
|
||
flex: 0 0 auto;
|
||
color: currentColor;
|
||
}
|
||
|
||
.filledIcon {
|
||
fill: currentColor;
|
||
}
|
||
|
||
.contactDivider {
|
||
width: 1px;
|
||
height: 1.125rem;
|
||
background: var(--color-blue-500);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ================================================================
|
||
MOBILE ≤ 640px
|
||
================================================================ */
|
||
/* ================================================================
|
||
TABLET 651px – 1100px — match the illustration breakpoint
|
||
================================================================ */
|
||
@media (max-width: 1100px) and (min-width: 651px) {
|
||
.heroContentWrapper {
|
||
height: auto;
|
||
min-height: clamp(33.75rem, 64vw, 40rem);
|
||
}
|
||
|
||
.heroContent {
|
||
height: auto;
|
||
min-height: clamp(33.75rem, 64vw, 40rem);
|
||
justify-content: flex-start;
|
||
padding-top: clamp(3.75rem, 8vw, 5.625rem);
|
||
padding-bottom: 2.5rem;
|
||
}
|
||
|
||
.heroTitle {
|
||
/* Allow wrapping at tablet so text stays within the center zone */
|
||
max-width: 32.5rem;
|
||
white-space: normal;
|
||
}
|
||
|
||
.contactBar {
|
||
/* Wrap contact items on narrow tablets */
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 0.5rem 0.875rem;
|
||
white-space: normal;
|
||
}
|
||
|
||
.contactDivider {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ================================================================
|
||
MOBILE ≤ 650px (screensizes under 650px)
|
||
================================================================ */
|
||
@media (max-width: 650px) {
|
||
.heroContentWrapper {
|
||
height: auto;
|
||
min-height: 33.75rem;
|
||
}
|
||
|
||
.topBar {
|
||
padding: 1rem 0.875rem 0;
|
||
}
|
||
|
||
.iconButton {
|
||
width: 2.75rem;
|
||
height: 2.75rem;
|
||
}
|
||
|
||
.heroContent {
|
||
height: auto;
|
||
min-height: 33.75rem;
|
||
padding: 4.125rem 1rem 2.5rem;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.heroTitle {
|
||
width: 100%;
|
||
max-width: 21rem;
|
||
font-size: clamp(1.875rem, 8vw, 2.25rem);
|
||
line-height: 1.04;
|
||
}
|
||
|
||
.heroSubtitle {
|
||
max-width: 18rem;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.actionButtons {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
width: min(100%, 21rem);
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.heroButtonPrimary {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.heroButton {
|
||
min-width: 0;
|
||
width: 100%;
|
||
height: 2.75rem;
|
||
padding: 0 0.75rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
}
|
||
|
||
/* ================================================================
|
||
HOVER STATES
|
||
================================================================ */
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.iconButton:hover {
|
||
color: var(--color-blue-500);
|
||
border-color: var(--accent-default);
|
||
background: var(--bg-raised);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.iconButton:hover .controlIcon,
|
||
.iconButton:hover .themeIcon {
|
||
transform: rotate(12deg) scale(1.04);
|
||
}
|
||
|
||
.contactItem:hover {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
[data-theme="dark"] .iconButton:hover {
|
||
color: var(--accent-default);
|
||
}
|
||
|
||
.heroButtonPrimary:hover {
|
||
border-color: var(--color-blue-700);
|
||
background: var(--color-blue-700);
|
||
}
|
||
|
||
[data-theme="dark"] .heroButtonPrimary:hover {
|
||
border-color: var(--color-blue-white);
|
||
background: var(--color-blue-white);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.topBar,
|
||
.avatarWrapper,
|
||
.heroTitle,
|
||
.heroSubtitle,
|
||
.actionButtons {
|
||
animation-name: heroContentFade;
|
||
animation-duration: var(--motion-duration-default) !important;
|
||
animation-delay: 0ms;
|
||
transform: none;
|
||
}
|
||
|
||
@keyframes heroContentFade {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
}
|