/*
* ============================================================
* SAIPH WATCH LTD — saiph.watch
* About the Designer · about.css
* ============================================================
*
* Page: about.html — James Weston, Founder & Designer
*
* Usage
* Link in after styles.css:
*
*
*
* This file extends the root design tokens from styles.css.
* Both files must be present for correct rendering.
*
* Sections
* 01 Navigation (about page variant)
* 02 Hero — split image / text
* 03 Journey / timeline (dark)
* 04 Vision quote section
* 05 Heritage section
* 06 How Saiph is made
* 07 Philosophy & facts
* 08 Closing
* 09 Footer
* 10 Scroll reveal animations
* 11 Responsive — mobile ≤ 900px
*
* Colour tokens, typography and Google Fonts import
* are inherited from styles.css — not repeated here.
*
* © 2025 Saiph Watch Ltd · james@saiph.watch
* ============================================================
*/
/* Colour tokens inherited from styles.css */
html { scroll-behavior: smooth; }
body {
background: var(--warm);
color: var(--text);
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
line-height: 1.85;
overflow-x: hidden;
}
/* ── NAV ── */
/* ── 01 NAVIGATION ─────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 24px 60px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(250,247,242,0.96);
border-bottom: 1px solid rgba(200,169,110,0.2);
backdrop-filter: blur(8px);
}
/* ─ Brand mark */
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.nav-brand-text {
font-family: 'Cinzel', serif;
font-size: 16px;
letter-spacing: 6px;
color: var(--text);
font-weight: 400;
}
.nav-brand-arabic {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
color: var(--gold);
}
/* ─ Back link */
.nav-back {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 4px;
color: var(--muted);
text-decoration: none;
text-transform: uppercase;
transition: color 0.3s;
}
.nav-back:hover { color: var(--gold); }
/* ── HERO ── */
/* ── 02 HERO — SPLIT IMAGE / TEXT ──────────────────────── */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding-top: 80px;
}
/* ─ Image column */
.hero-image-side {
position: relative;
height: 100vh;
overflow: hidden;
background: var(--navy);
}
.hero-image-side::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 70%, var(--warm) 100%);
pointer-events: none;
z-index: 2;
}
/* ─ Photo */
.hero-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
opacity: 0.92;
}
/* Gold accent bar on left edge */
.hero-image-side::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: linear-gradient(to bottom, transparent, var(--gold), transparent);
z-index: 3;
}
/* ─ Text column */
.hero-text {
padding: 80px 70px 60px 60px;
position: relative;
}
/* ─ Eyebrow label */
.hero-eyebrow {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 8px;
color: var(--gold-dk);
text-transform: uppercase;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 14px;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 32px;
height: 1px;
background: var(--gold);
opacity: 0.5;
}
/* ─ Name heading */
.hero-name {
font-family: 'Cinzel', serif;
font-size: clamp(32px, 4vw, 52px);
font-weight: 300;
letter-spacing: 4px;
color: var(--text);
line-height: 1.1;
margin-bottom: 8px;
}
.hero-arabic {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
color: var(--gold);
margin-bottom: 28px;
letter-spacing: 2px;
}
.hero-rule {
width: 60px;
height: 1px;
background: var(--gold);
margin-bottom: 28px;
opacity: 0.6;
}
/* ─ Title / role */
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 20px;
color: var(--muted);
margin-bottom: 36px;
letter-spacing: 0.5px;
}
/* ─ Intro paragraph */
.hero-intro {
font-size: 18px;
color: var(--text);
line-height: 1.85;
max-width: 480px;
}
.hero-intro strong {
color: var(--gold-dk);
font-weight: 500;
}
/* Star mark */
.star-mark {
margin: 32px 0;
}
/* ── JOURNEY SECTION ── */
/* ── 03 JOURNEY / TIMELINE ─────────────────────────────── */
.journey {
background: var(--navy);
padding: 120px 0;
position: relative;
overflow: hidden;
}
/* Background سيف watermark */
.journey::before {
content: 'سيف';
position: absolute;
font-size: 400px;
color: rgba(200,169,110,0.03);
font-family: 'Cormorant Garamond', serif;
right: -80px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
line-height: 1;
}
/* ─ Inner container */
.journey-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 80px;
}
.journey-header {
margin-bottom: 72px;
}
.journey-eyebrow {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 7px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 14px;
}
.journey-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(28px, 3.5vw, 46px);
color: var(--cream);
line-height: 1.2;
}
/* Timeline */
/* ─ Timeline wrapper */
.timeline {
position: relative;
padding-left: 48px;
}
/* Vertical line */
.timeline::before {
content: '';
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--gold), transparent);
opacity: 0.4;
}
/* ─ Timeline entry */
.timeline-item {
position: relative;
margin-bottom: 52px;
padding-bottom: 52px;
border-bottom: 1px solid rgba(200,169,110,0.08);
}
.timeline-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Timeline dot */
.timeline-item::before {
content: '';
position: absolute;
left: -45px;
top: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
opacity: 0.7;
}
/* ─ Period label */
.timeline-period {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 5px;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
}
/* ─ Entry heading */
.timeline-heading {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
color: var(--cream);
margin-bottom: 10px;
}
/* ─ Entry body */
.timeline-body {
font-size: 16px;
color: var(--muted-lt);
line-height: 1.9;
max-width: 640px;
}
.timeline-location {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 4px;
color: rgba(200,169,110,0.4);
text-transform: uppercase;
margin-top: 10px;
}
/* ── THE VISION SECTION ── */
/* ── 04 VISION QUOTE ───────────────────────────────────── */
.vision {
background: var(--sand);
padding: 120px 80px;
border-top: 1px solid rgba(200,169,110,0.2);
border-bottom: 1px solid rgba(200,169,110,0.2);
}
.vision-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.vision-eyebrow {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 7px;
color: var(--gold-dk);
text-transform: uppercase;
margin-bottom: 24px;
}
/* ─ Pull quote */
.vision-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(24px, 3vw, 40px);
color: var(--text);
line-height: 1.55;
margin-bottom: 32px;
}
.vision-quote em {
color: var(--gold-dk);
font-style: normal;
}
.vision-rule {
width: 60px;
height: 1px;
background: var(--gold);
margin: 0 auto 32px;
opacity: 0.5;
}
.vision-body {
font-size: 17px;
color: var(--muted);
line-height: 1.9;
max-width: 680px;
margin: 0 auto;
}
/* ── PHILOSOPHY SECTION ── */
/* ── 07 PHILOSOPHY & FACTS ─────────────────────────────── */
.philosophy {
background: var(--warm);
padding: 120px 80px;
}
.philosophy-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.philosophy-text .section-eyebrow {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 7px;
color: var(--gold-dk);
text-transform: uppercase;
margin-bottom: 16px;
}
.philosophy-text .section-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(28px, 3vw, 42px);
color: var(--text);
line-height: 1.2;
margin-bottom: 20px;
}
.section-rule {
width: 50px;
height: 1px;
background: var(--gold);
margin-bottom: 28px;
opacity: 0.6;
}
.philosophy-text p {
font-size: 16px;
color: var(--muted);
line-height: 1.9;
margin-bottom: 18px;
}
.philosophy-text p strong {
color: var(--text);
font-weight: 500;
}
/* Facts panel */
/* ─ Facts panel */
.facts {
display: flex;
flex-direction: column;
gap: 0;
}
/* ─ Fact item */
.fact {
padding: 28px 0;
border-bottom: 1px solid rgba(200,169,110,0.15);
display: flex;
gap: 20px;
align-items: flex-start;
}
.fact:first-child { padding-top: 0; }
.fact:last-child { border-bottom: none; }
.fact-num {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
color: var(--gold);
opacity: 0.25;
line-height: 1;
flex-shrink: 0;
width: 44px;
margin-top: 2px;
}
.fact-body h4 {
font-family: 'Cinzel', serif;
font-size: 9px;
letter-spacing: 3px;
color: var(--text);
text-transform: uppercase;
margin-bottom: 6px;
font-weight: 400;
}
.fact-body p {
font-size: 14px;
color: var(--muted);
line-height: 1.7;
}
/* ── CLOSING SECTION ── */
/* ── 08 CLOSING ────────────────────────────────────────── */
.closing {
background: var(--navy-dk);
padding: 100px 80px;
text-align: center;
}
.closing-arabic {
font-family: 'Cormorant Garamond', serif;
font-size: 60px;
color: var(--gold);
line-height: 1;
margin-bottom: 20px;
letter-spacing: 3px;
}
.closing-rule {
width: 80px;
height: 1px;
background: var(--gold);
margin: 0 auto 24px;
opacity: 0.4;
}
.closing-text {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 20px;
color: var(--cream);
max-width: 600px;
margin: 0 auto 36px;
line-height: 1.6;
}
.closing-contact {
font-family: 'Cinzel', serif;
font-size: 8px;
letter-spacing: 5px;
color: var(--muted-lt);
text-transform: uppercase;
}
.closing-contact a {
color: var(--gold);
text-decoration: none;
}
/* ── FOOTER ── */
/* ── 09 FOOTER ─────────────────────────────────────────── */
footer {
background: var(--navy-dk);
border-top: 1px solid rgba(200,169,110,0.12);
padding: 28px 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
footer p {
font-family: 'Cinzel', serif;
font-size: 7px;
letter-spacing: 3px;
color: rgba(200,169,110,0.3);
text-transform: uppercase;
}
/* ── REVEAL ── */
/* ── 10 SCROLL REVEAL ──────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: 0.1s; }
.rd2 { transition-delay: 0.2s; }
.rd3 { transition-delay: 0.3s; }
/* ── RESPONSIVE ── */
/* ── 11 RESPONSIVE — MOBILE ≤ 900px ────────────────────── */
@media (max-width: 900px) {
nav { padding: 20px 24px; }
.hero { grid-template-columns: 1fr; }
.hero-image-side { height: 60vw; min-height: 320px; }
.hero-image-side::after { background: linear-gradient(to bottom, transparent 70%, var(--warm) 100%); }
.hero-text { padding: 40px 24px 60px; }
.journey-inner, .philosophy-inner { padding: 0 24px; }
.philosophy-inner { grid-template-columns: 1fr; gap: 48px; }
.vision { padding: 80px 24px; }
.closing { padding: 80px 24px; }
footer { flex-direction: column; gap: 8px; padding: 20px 24px; }
}