/* ─────────────────────────────────────────────────────────
Hasan Salame — minimalist edition
Centered everything. Nothing extra.
───────────────────────────────────────────────────────── */
/* Fonts (Geist + Geist Mono) are loaded by a in each page's . */
:root {
--bg: #1a1814;
--bg-2: #211f19;
--ink: #ede4cf;
--ink-dim: rgba(237, 228, 207, 0.68);
--ink-muted: rgba(237, 228, 207, 0.52); /* ≥4.5:1 on --bg (WCAG AA) */
--line: rgba(237, 228, 207, 0.10);
--line-2: rgba(237, 228, 207, 0.20);
--accent: #7a8d5c;
--accent-2: #b3c692;
--accent-dim: rgba(122,141,92,0.45);
--sans: 'Geist', system-ui, -apple-system, sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Text stays selectable (email, phone, credits). Only imagery and UI chrome
opt out, so photos can't be drag-saved or tap-hold-saved. */
img, video, button, nav, [role="button"], [role="tab"], [role="slider"],
.hs-slide, .hs-layout, .w-rail, .w-stage, .w-reel, .w-grid, .gw-rail, .gw-stage, .gw-grid, .gw-lightbox {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }
/* Visible keyboard focus everywhere (mouse clicks don't trigger it). */
:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
border-radius: 2px;
}
body {
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-align: center;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--bg); }
/* ── NAV (fully centered) ── */
/* --hs-admin-bar-h is set by admin-bar.js to the bar's height when docked, 0 otherwise.
The nav floats below the admin bar, and the body padding-top reserves space for both. */
:root { --hs-admin-bar-h: 0px; }
.nav {
position: fixed; top: var(--hs-admin-bar-h, 0px); left: 0; right: 0;
z-index: 100;
padding: 19px 20px; /* 19 + 24 + 19 = the 62px every page offset assumes */
background: rgba(26, 24, 20, 0.88); /* fallback for browsers without color-mix() */
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
text-align: center;
}
.nav-inner {
display: flex; justify-content: center; align-items: center;
}
.nav-links {
display: flex; flex-wrap: wrap;
justify-content: center;
gap: clamp(18px, 4vw, 44px);
}
.nav-links a {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-dim);
padding: 4px 0;
position: relative;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent-2); }
.nav-links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
background: var(--accent-2);
}
body { padding-top: calc(62px + var(--hs-admin-bar-h, 0px)); }
/* Plain landmark wrapper: lay out exactly like direct body children did. */
body > main:not([class]) { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-width: 0; }
/* ── HOMEPAGE ── */
.home {
min-height: calc(100vh - 62px);
display: flex; flex-direction: column;
align-items: stretch; justify-content: flex-start;
padding: 0 0 60px;
gap: 56px;
}
.page-head {
max-width: 880px;
margin: 0 auto;
padding: 80px 24px 48px;
display: flex;
flex-direction: column;
gap: 10px;
}
.page-title {
font-family: var(--sans);
font-weight: 200;
font-size: clamp(2.6rem, 6vw, 4.4rem);
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
margin: 0;
}
.page-title em { font-style: italic; color: var(--accent-2); font-weight: 300; }
.page-overline {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-muted);
}
.page-sub {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-dim);
max-width: 60ch;
}
/* ── ABOUT (centered minimalist) ── */
.section-block {
max-width: 880px;
margin: 0 auto;
padding: 80px 24px;
text-align: center;
}
.section-block h3 {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
letter-spacing: -0.025em;
line-height: 1;
color: var(--ink);
margin-bottom: 50px;
}
/* awards (centered) */
.awards {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.award-row {
padding: 24px 18px;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 80px 1fr 200px;
gap: 30px;
align-items: baseline;
text-align: left;
}
@media (max-width: 700px) {
.award-row { grid-template-columns: 1fr; gap: 6px; text-align: center; padding: 22px 8px; }
}
.award-row .ay {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--accent-2);
}
.award-row h2, .award-row h5 {
font-family: var(--sans);
font-weight: 400;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--ink);
}
.award-row .at {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--ink-dim);
text-align: right;
}
@media (max-width: 700px) { .award-row .at { text-align: center; } }
/* ── SOCIAL (centered) ── */
.socials-list {
max-width: 540px;
margin: 30px auto 80px;
border-top: 1px solid var(--line);
}
.s-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 24px;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--line);
text-align: left;
transition: background 0.2s;
}
.s-row:hover { background: var(--bg-2); }
.s-row .s-icon { color: var(--ink); display: flex; align-items: center; justify-content: center; }
.s-row .s-icon svg { width: 22px; height: 22px; }
.s-row .s-name {
font-family: var(--sans);
font-weight: 400;
font-size: 1.05rem;
color: var(--ink);
}
.s-row .s-handle {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--ink-dim);
letter-spacing: 0.04em;
}
.s-row .s-arr {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--ink-muted);
letter-spacing: 0.18em;
}
.s-row:hover .s-arr { color: var(--accent-2); }
/* ── FOOTER — echoes the homepage (light spaced name, divider rule,
category-style social links with animated underline) ── */
footer {
border-top: 1px solid var(--line);
padding: clamp(40px, 6vh, 68px) 20px clamp(30px, 4.5vh, 46px);
text-align: center;
/* Faint warm glow from the top edge — like the homepage's accent lighting */
background: radial-gradient(125% 120% at 50% 0%, rgba(179, 198, 146, 0.05), transparent 58%);
/* Sticky footer — pushed to viewport bottom by flex body */
margin-top: auto;
}
/* Single uniform line: name · role · email · phone — same font & size,
separated by pipes. Wraps gracefully on very narrow screens. */
.foot-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(8px, 1.4vw, 14px);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--ink-dim);
}
.foot-line a { color: var(--ink-dim); transition: color 0.2s; }
.foot-line a:hover { color: var(--accent-2); }
.foot-pipe { color: var(--ink-muted); }
/* Once the line no longer fits on one row, stack it — a wrapped row left a
dangling "|" at the end of the first line. */
@media (max-width: 1000px) {
.foot-line { flex-direction: column; gap: 9px; }
.foot-pipe { display: none; }
}
.foot-socials {
display: flex; justify-content: center; flex-wrap: wrap;
gap: clamp(16px, 2vw, 26px);
margin: clamp(16px, 2.4vh, 22px) 0 0;
}
/* Social links pick up the homepage category-bar treatment:
animated underline + a small lift to accent on hover. */
.foot-socials a {
position: relative;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
padding-bottom: 4px;
transition: color 0.22s, transform 0.22s;
}
.foot-socials a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 1px;
background: rgba(237, 228, 207, 0.18);
transition: background 0.25s ease, height 0.25s ease;
}
.foot-socials a:hover { color: var(--accent-2); transform: translateY(-2px); }
.foot-socials a:hover::after { background: var(--accent-2); height: 2px; }
.foot-copy {
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: clamp(20px, 3vh, 30px);
}
/* ──────────────────────────────────────────────
TABLET & MOBILE
────────────────────────────────────────────── */
@media (max-width: 600px) {
body { padding-top: 56px; }
.nav { padding: 18px 12px; }
.nav-links { gap: 14px; }
.nav-links a { font-size: 0.62rem; letter-spacing: 0.14em; }
.page-overline { font-size: 0.6rem; letter-spacing: 0.24em; }
}
/* ── HAMBURGER BUTTON (mobile only) ── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px; height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
position: relative;
z-index: 201;
}
.nav-hamburger span {
display: block;
width: 22px; height: 1px;
background: var(--ink);
transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
opacity 0.22s ease,
width 0.22s ease;
transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── MOBILE NAV OVERLAY — semi-transparent backdrop ── */
.nav-mob-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(10,9,7,0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
align-items: stretch;
justify-content: flex-end;
opacity: 0; pointer-events: none; visibility: hidden; /* hidden = out of the tab order too */
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.nav-mob-overlay.open { opacity: 1; pointer-events: all; visibility: visible; transition: opacity 0.3s ease; }
/* ── Side-panel drawer ── */
.nav-mob-panel {
position: relative;
width: min(260px, 82vw);
height: 100%;
background: rgba(10,9,7,0.97);
backdrop-filter: blur(24px) saturate(1.1);
-webkit-backdrop-filter: blur(24px) saturate(1.1);
border-left: 1px solid rgba(237,228,207,0.08);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: safe center; /* short landscape phones: top links stay reachable */
padding: 72px 32px calc(48px + env(safe-area-inset-bottom, 0px));
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.2,0.85,0.2,1);
overflow-y: auto;
}
.nav-mob-overlay.open .nav-mob-panel { transform: translateX(0); }
.nav-mob-links {
display: flex; flex-direction: column;
align-items: flex-start;
list-style: none;
padding: 0; margin: 0;
gap: 0;
width: 100%;
}
.hs-mob-link {
font-family: var(--sans);
font-weight: 200;
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--ink-dim);
padding: 10px 0;
display: block;
transition: color 0.2s, transform 0.2s;
width: 100%;
border-bottom: 1px solid rgba(237,228,207,0.06);
}
.hs-mob-link:hover { color: var(--ink); transform: translateX(4px); }
.hs-mob-link.active { color: var(--accent-2); }
/* Close button sits at top-right of the panel */
.nav-mob-close {
position: absolute;
top: 10px; right: 10px; /* sits exactly where the hamburger was */
width: 44px; height: 44px;
background: none;
border: 1px solid rgba(237,228,207,0.18);
border-radius: 50%;
color: rgba(237,228,207,0.6);
font-size: 0.9rem;
font-family: var(--sans);
font-weight: 200;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.nav-mob-close:hover {
color: var(--ink);
border-color: rgba(237,228,207,0.4);
}
@media (max-width: 640px) {
.nav-links { display: none !important; }
.nav-hamburger { display: flex; }
/* No top letterbox — transparent nav, hamburger floats over the page */
.nav {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
padding: 0 !important;
height: 0 !important;
overflow: visible !important;
}
/* Fix hamburger in top-right corner, floating over content */
.nav-inner {
position: fixed !important;
top: 10px !important;
right: 10px !important;
width: auto !important;
display: flex !important;
justify-content: flex-end !important;
z-index: 202 !important;
}
body { padding-top: 0 !important; }
/* The button floats over photos, video and body text — give it a frosted
disc so the three lines stay readable on any background. */
.nav-hamburger {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(10,9,7,0.42);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
border: 1px solid rgba(237,228,207,0.14);
}
.nav-hamburger span { width: 18px; height: 1.5px; }
/* While the menu is open the panel's own ✕ (same spot) is the one control. */
.nav-hamburger.open { opacity: 0; pointer-events: none; }
/* Full-width rows so the whole line is tappable, not just the word */
.nav-mob-links li { width: 100%; }
.hs-mob-link { padding: 13px 0; }
}
/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}