/* ============================================================
SATOUKIBIJUSU (PORTFOLIO)
style.css: base, tokens, typography, nav, hero
Sections are appended in stages; each stage is clearly marked.
============================================================ */
/* Fonts are loaded via tags in index.html's , not
@import here: @import blocks CSS parsing until it resolves,
which is especially costly on slower/higher-latency mobile
connections. See index.html for the actual font tags. */
/* ------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------ */
:root {
/* Color */
--black: #06070A;
--surface: #0D0F14;
--surface-2: #1A2230;
--border: #1E232C;
--border-soft: #171B22;
--blue: #3D8BFF;
--blue-bright: #5CA2FF;
--blue-dim: #2563EB;
--blue-glow: rgba(61, 139, 255, 0.18);
--white: #F3F5F8;
--muted: #8A94A3;
--muted-2: #4B5563;
/* Type */
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Layout */
--container-max: 1240px;
--gutter: 2rem;
--section-pad-y: 6.3rem;
--nav-height: 76px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 0.3s;
--dur-med: 0.6s;
}
/* ------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--nav-height);
}
body {
background: var(--black);
color: var(--white);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--blue); color: var(--black); }
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 2px;
}
/* ------------------------------------------------------------
3. TYPOGRAPHY
------------------------------------------------------------ */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.01em;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
display: inline-flex;
align-items: center;
gap: 0.6em;
}
.eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: var(--blue);
display: inline-block;
}
/* ------------------------------------------------------------
4. LAYOUT UTILITIES
------------------------------------------------------------ */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter);
}
.section-pad { padding: var(--section-pad-y) 0; }
/* ------------------------------------------------------------
5. LANGUAGE TOGGLE SYSTEM
Same pattern as the previous site: show/hide by body class.
------------------------------------------------------------ */
[data-lang] { display: none !important; }
body.lang-pt [data-lang="pt"],
body.lang-en [data-lang="en"] { display: revert !important; }
body.lang-pt span[data-lang="pt"],
body.lang-en span[data-lang="en"] { display: inline !important; }
body.lang-pt div[data-lang="pt"],
body.lang-en div[data-lang="en"] { display: block !important; }
/* ------------------------------------------------------------
6. NAVIGATION
------------------------------------------------------------ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 500;
height: var(--nav-height);
display: flex;
align-items: center;
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled {
background: rgba(6, 7, 10, 0.96);
border-bottom: 1px solid var(--border);
}
.nav-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-logo .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 12px var(--blue);
}
.nav-links {
display: flex;
align-items: center;
gap: 2.4rem;
}
.nav-links a {
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.02em;
position: relative;
padding: 0.3rem 0;
transition: color var(--dur-fast) ease;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1px;
background: var(--blue);
transition: width var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }
.nav-right {
display: flex;
align-items: center;
gap: 1.4rem;
}
.lang-toggle {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--muted);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.4rem 0.7rem;
display: flex;
align-items: center;
gap: 0.35rem;
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang-toggle:hover { border-color: var(--blue); color: var(--white); }
.nav-social {
width: 34px; height: 34px;
border: 1px solid var(--border);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--muted);
transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.nav-social:hover {
border-color: var(--blue);
color: var(--white);
transform: translateY(-2px);
}
.nav-social svg { width: 15px; height: 15px; }
.nav-toggle {
display: none;
width: 34px; height: 34px;
border: 1px solid var(--border);
border-radius: 8px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
}
.nav-toggle span {
width: 16px; height: 1.5px;
background: var(--white);
transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-mobile-panel {
position: fixed;
top: var(--nav-height); left: 0; right: 0;
background: rgba(6, 7, 10, 0.98);
border-bottom: 1px solid var(--border);
padding: 1.5rem var(--gutter) 2rem;
display: flex;
flex-direction: column;
gap: 1.4rem;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
z-index: 499;
}
.nav-mobile-panel.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav-mobile-panel a {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
color: var(--white);
}
/* ------------------------------------------------------------
7. BUTTONS
------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
padding: 0.85rem 1.6rem;
border-radius: 8px;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.btn-primary {
background: var(--blue);
color: var(--black);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px var(--blue-glow);
}
.btn-ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--white);
}
.btn-ghost:hover {
border-color: var(--blue);
transform: translateY(-2px);
}
.btn svg { width: 14px; height: 14px; }
/* ------------------------------------------------------------
8. HERO
------------------------------------------------------------ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: calc(var(--nav-height) + 2rem) 0 4rem;
overflow: hidden;
}
.hero-bg-glow {
position: absolute;
top: -10%;
right: -10%;
width: 60%;
height: 70%;
background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.35fr 0.65fr;
align-items: center;
gap: 3.5rem;
width: 100%;
}
.hero-content { max-width: 700px; }
.hero-eyebrow { margin-bottom: 1.6rem; }
.hero-title {
font-size: clamp(3.2rem, 7vw, 5.6rem);
font-weight: 800;
text-transform: uppercase;
color: var(--white);
margin-bottom: 0.6rem;
}
.hero-mission {
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.2vw, 1.85rem);
font-weight: 600;
color: var(--muted);
line-height: 1.35;
max-width: 560px;
margin-bottom: 2.2rem;
}
.hero-mission strong {
color: var(--white);
font-weight: 600;
}
.hero-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 4rem;
}
.hero-stats {
display: flex;
gap: 0;
border-top: 1px solid var(--border);
padding-top: 2.6rem;
max-width: 680px;
}
.hero-stat {
flex: 1;
padding-right: 2.2rem;
border-right: 1px solid var(--border-soft);
}
.hero-stat:last-child { border-right: none; padding-right: 0; }
.hero-stat:not(:first-child) { padding-left: 2.2rem; }
.hero-stat-value {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 700;
color: var(--white);
display: flex;
align-items: baseline;
gap: 2px;
}
.hero-stat-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted-2);
margin-top: 0.4rem;
}
.hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero-visual-frame {
position: relative;
width: 100%;
max-width: 380px;
aspect-ratio: 13 / 16;
}
.hero-visual-frame img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 1;
}
.hero-visual-ring {
position: absolute;
inset: 6%;
border: 1px solid var(--border);
border-radius: 50%;
z-index: 0;
}
/* ------------------------------------------------------------
9. COMPANIES (double marquee)
Each track's inner list is duplicated in the HTML (two copies
back to back) so translateX(-50%) loops seamlessly.
------------------------------------------------------------ */
.companies {
padding: 2.75rem 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--surface-2);
}
.companies-head {
text-align: center;
margin-bottom: 1.5rem;
}
.marquee-group {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.marquee-viewport {
position: relative;
overflow: hidden;
width: 100%;
}
.marquee-viewport::before,
.marquee-viewport::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 8%;
min-width: 40px;
z-index: 1;
pointer-events: none;
}
.marquee-viewport::before {
left: 0;
background: linear-gradient(90deg, var(--surface-2) 0%, transparent 100%);
}
.marquee-viewport::after {
right: 0;
background: linear-gradient(270deg, var(--surface-2) 0%, transparent 100%);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
}
.marquee-track--a {
animation: marqueeLeft 64s linear infinite;
}
.marquee-track--b {
animation: marqueeRight 92s linear infinite;
}
.marquee-list {
display: flex;
align-items: center;
gap: 2.25rem;
padding-right: 2.25rem;
}
.logo-item {
display: flex;
align-items: center;
height: 52px;
opacity: 1;
filter: none;
transition: transform var(--dur-fast) ease;
}
.logo-item:hover {
transform: translateY(-2px);
}
.logo-item img {
height: 100%;
width: auto;
}
/* ------------------------------------------------------------
11. CASE STUDIES
------------------------------------------------------------ */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 3rem;
}
.section-head h2 {
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
margin-top: 0.8rem;
max-width: 520px;
}
.section-head p {
color: var(--muted);
max-width: 360px;
font-size: 0.92rem;
padding-bottom: 0.3rem;
}
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.case-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.case-card:hover {
border-color: var(--blue-dim);
transform: translateY(-5px);
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.case-card-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1.2rem 1.5rem;
border-bottom: 1px solid var(--border-soft);
}
.case-logo {
height: 20px;
width: auto;
}
/* Visible "View Case" badge: every case card links to its own
dedicated page under case-studies/*.html. Sits at the bottom of
the card body (no screenshot to float over). */
.case-view-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.4rem;
background: var(--blue);
color: var(--black);
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.4rem 0.75rem;
border-radius: 20px;
margin: 0 1.5rem 1.5rem;
transition: transform var(--dur-fast) var(--ease-out);
}
.case-view-badge svg {
width: 11px;
height: 11px;
}
.case-card:hover .case-view-badge {
transform: translateY(-2px);
}
.case-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
flex: 1;
}
.case-block-label {
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue-bright);
margin-bottom: 0.4rem;
}
.case-block p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.55;
}
/* ------------------------------------------------------------
12. AUDIENCE (SaaS-style dashboard)
All figures live directly in the HTML (text + inline style
widths/gradients), so updating a number is a single edit with
no JS or build step involved. See README for a walkthrough.
Two rows: a top KPI strip (headline metrics), then a row of
three breakdown cards (Age, Gender, Engagement Insights).
------------------------------------------------------------ */
/* Row 1: headline metrics strip */
.dashboard-kpis {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.5rem 1.5rem;
transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.kpi-card:hover {
border-color: var(--blue-dim);
transform: translateY(-3px);
}
.kpi-value {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 1.9rem);
font-weight: 700;
color: var(--white);
line-height: 1;
margin-bottom: 0.7rem;
}
.kpi-label {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Row 2: breakdown cards */
.dashboard-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 1.25rem;
}
.dash-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.9rem 2rem;
transition: border-color var(--dur-fast) ease;
}
.dash-card:hover { border-color: var(--border-soft); }
.dash-card--gender {
display: flex;
flex-direction: column;
}
.dash-card-title {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.6rem;
}
/* horizontal bars (age range, engagement insights) */
.bar-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.bar-row-label {
display: flex;
justify-content: space-between;
font-size: 0.84rem;
color: var(--white);
margin-bottom: 0.45rem;
}
.bar-row-label span:last-child {
font-family: var(--font-mono);
color: var(--blue-bright);
font-weight: 500;
}
.bar-track {
height: 8px;
border-radius: 5px;
background: var(--surface-2);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, var(--blue-dim), var(--blue));
transform-origin: left center;
transform: scaleX(0);
transition: transform 1s var(--ease-out);
}
.dash-card.is-visible .bar-fill { transform: scaleX(1); }
/* donut (gender split) built with a conic-gradient + center cutout */
.donut-wrap {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 1;
}
.donut {
--pct: 81.1;
position: relative;
width: 108px;
height: 108px;
border-radius: 50%;
flex-shrink: 0;
background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--surface-2) 0);
}
.donut.donut--3 {
background: conic-gradient(
var(--blue) 0% calc(var(--pct-1) * 1%),
var(--blue-bright) calc(var(--pct-1) * 1%) calc(var(--pct-2) * 1%),
var(--muted-2) calc(var(--pct-2) * 1%) 100%
);
}
.donut::after {
content: '';
position: absolute;
inset: 16px;
border-radius: 50%;
background: var(--surface);
}
.donut-legend {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.donut-legend-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--muted);
}
.donut-legend-item .dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.donut-legend-item .dot.male { background: var(--blue); }
.donut-legend-item .dot.female { background: var(--blue-bright); }
.donut-legend-item .dot.unspecified { background: var(--muted-2); }
.donut-legend-item strong {
color: var(--white);
font-family: var(--font-mono);
font-weight: 500;
margin-left: auto;
}
/* ------------------------------------------------------------
13. CONTENT FORMATS
------------------------------------------------------------ */
.content-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.content-card {
display: block;
perspective: 1000px;
}
.content-media {
position: relative;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
transition: border-color var(--dur-fast) ease, transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
transform-style: preserve-3d;
}
.content-card:hover .content-media {
border-color: var(--blue-dim);
transform: rotateX(2deg) rotateY(-3deg) scale(1.02);
box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7);
}
.content-media img {
width: 100%;
display: block;
transition: transform var(--dur-med) var(--ease-out);
}
.content-card:hover .content-media img { transform: scale(1.04); }
.content-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(6, 7, 10, 0.75);
border: 1px solid rgba(243, 245, 248, 0.25);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease;
}
.content-card:hover .content-play {
background: var(--blue);
transform: translate(-50%, -50%) scale(1.08);
}
.content-play svg { width: 16px; height: 16px; color: var(--white); margin-left: 2px; }
.content-info {
padding: 1.1rem 0.2rem 0;
}
.content-info h3 {
font-size: 1.05rem;
font-weight: 600;
color: var(--white);
margin-bottom: 0.35rem;
}
.content-info p {
font-size: 0.84rem;
color: var(--muted);
line-height: 1.5;
}
.content-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.7rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--blue-bright);
}
.content-link svg {
width: 12px;
height: 12px;
transition: transform var(--dur-fast) var(--ease-out);
}
.content-card:hover .content-link svg { transform: translate(2px, -2px); }
/* ------------------------------------------------------------
14. NODRA (compact mention)
------------------------------------------------------------ */
.nodra-mention {
padding: 3rem 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--surface);
}
.nodra-mention-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.nodra-mention-text {
max-width: 640px;
}
.nodra-logo {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.9rem;
}
.nodra-logo-icon {
width: 14px;
height: 14px;
border-radius: 4px;
background: var(--blue);
box-shadow: 0 0 18px rgba(61, 139, 255, 0.55);
flex-shrink: 0;
}
.nodra-logo-text {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--white);
}
.nodra-mention-inner p {
font-size: 1.05rem;
color: var(--muted);
max-width: 640px;
}
.nodra-mention-inner p strong {
color: var(--white);
font-weight: 600;
}
.nodra-mention-inner .btn svg {
width: 14px;
height: 14px;
}
/* ------------------------------------------------------------
15. WHY BRANDS WORK WITH ME
------------------------------------------------------------ */
.why-brands { background: var(--surface); }
.reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.reason-card {
background: var(--black);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.9rem;
transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.reason-card:hover {
border-color: var(--blue-dim);
transform: translateY(-3px);
}
.reason-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--blue-glow);
color: var(--blue-bright);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.4rem;
}
.reason-icon svg { width: 18px; height: 18px; }
.reason-card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--white);
margin-bottom: 0.5rem;
}
.reason-card p {
font-size: 0.85rem;
color: var(--muted);
line-height: 1.55;
}
/* ------------------------------------------------------------
16. TESTIMONIALS
------------------------------------------------------------ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.testimonial-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1.6rem;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 16px;
padding: 1.9rem;
min-height: 220px;
}
.testimonial-quote {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--muted);
line-height: 1.5;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 0.85rem;
}
.testimonial-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--border);
background: var(--surface-2);
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--white);
}
.testimonial-role {
font-size: 0.78rem;
color: var(--muted-2);
margin-top: 0.15rem;
}
/* ------------------------------------------------------------
17. CONTACT
------------------------------------------------------------ */
.contact { position: relative; overflow: hidden; padding-bottom: 1.5rem; }
.contact-bg-glow {
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 60%;
background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
pointer-events: none;
}
.contact-inner {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-eyebrow { margin-bottom: 1.6rem; justify-content: center; }
.contact-title {
font-size: clamp(2.6rem, 6vw, 4.4rem);
font-weight: 800;
text-transform: uppercase;
line-height: 1.02;
margin-bottom: 3rem;
}
.contact-title .accent { color: var(--blue-bright); }
.contact-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.contact-link {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1.5rem;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
color: var(--white);
transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.contact-link:hover {
border-color: var(--blue);
background: var(--blue-glow);
transform: translateY(-2px);
}
.contact-link svg { width: 17px; height: 17px; }
.contact-character {
margin-top: 1.5rem;
opacity: 0.95;
}
.contact-character img {
width: 440px;
height: auto;
margin: 0 auto;
}
/* ------------------------------------------------------------
18. FOOTER
------------------------------------------------------------ */
.site-footer {
border-top: 1px solid var(--border-soft);
padding: 3.5rem 0 0;
}
.footer-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 2.5rem;
padding-bottom: 2.75rem;
}
.footer-brand-name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
color: var(--white);
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-brand-name .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--blue);
}
.footer-brand-role {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-2);
margin-top: 0.5rem;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
}
.footer-nav a {
font-size: 0.84rem;
color: var(--muted);
transition: color var(--dur-fast) ease;
}
.footer-nav a:hover { color: var(--white); }
.footer-social {
display: flex;
gap: 0.7rem;
}
.footer-bottom {
border-top: 1px solid var(--border-soft);
padding: 1.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copy {
font-size: 0.78rem;
color: var(--muted-2);
}
.footer-top {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
transition: color var(--dur-fast) ease;
}
.footer-top:hover { color: var(--blue-bright); }