/* ============================================================================
EATCOOKJOY / AZIZ SAIF โ HOUSE THEME (canonical)
The editorial design system for azizsaif.com
Source of truth: /eatcookjoy-Playbook/ ยท Reuse this file on every page.
Fonts (load in ):
============================================================================ */
:root{
/* ---- Surfaces (warm cream paper) ---- */
--cream:#FBF7F1; /* page background */
--cream-soft:#F4EDE2; /* alternating section bg */
--cream-deep:#EBE1D2;
--paper:#FFFFFF; /* cards */
/* ---- Brand accents ---- */
--terracotta:#C45A3D; /* primary accent / links / CTAs */
--terracotta-d:#A4452C; /* hover / darker */
--terracotta-l:#E07B54; /* light */
--sage:#7A8C5C; /* secondary / "good" / positive */
--sage-d:#5C6E42;
--gold:#D9A86C; /* tertiary / highlight */
--gold-l:#E8C89A;
--gold-d:#B8862F;
/* ---- Ink & text ---- */
--charcoal:#2A2622; /* body text */
--ink:#16110D; /* headings / dark surfaces */
--ink-2:#211A14;
--espresso:#0E0B08; /* deepest dark cards */
--mute:#6E665C; /* muted text */
--mute-l:#8B8275;
/* ---- Lines ---- */
--line:#E4DDD0;
--line-2:#EFE8DC;
/* ---- Type ---- */
--ff-display:"Playfair Display",Georgia,"Times New Roman",serif; /* headings, big numbers */
--ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; /* body */
--ff-grotesk:"Space Grotesk","Inter",sans-serif; /* eyebrows, labels, nav, chips (UPPERCASE) */
--ff-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* code */
/* ---- Radii / layout / motion ---- */
--r-sm:8px;--r-md:16px;--r-lg:24px;--r-xl:32px;
--maxw:1180px;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-bounce:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{font-family:var(--ff-body);background:var(--cream);color:var(--charcoal);
line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden}
a{color:var(--terracotta);text-decoration:none}
a:hover{color:var(--terracotta-d)}
em{font-style:italic}
strong{color:var(--ink)}
::selection{background:var(--terracotta);color:#fff}
img{max-width:100%;display:block}
/* Signature grain overlay โ gives the warm "paper" feel. Keep on every page. */
body::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode:multiply}
/* Scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;
background:linear-gradient(90deg,var(--terracotta),var(--gold));transition:width .08s linear}
/* Reveal-on-scroll (add class="reveal", optional data-d="1|2|3") */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
/* ===== Sticky nav bar ===== */
.pb{position:sticky;top:0;z-index:90;background:rgba(251,247,241,.82);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
border-bottom:1px solid var(--line)}
.pb__row{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:6px}
.pb__logo{font-family:var(--ff-display);font-weight:800;font-size:20px;color:var(--ink);
letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:9px;flex-shrink:0;margin-right:6px}
.pb__logo em{color:var(--terracotta);font-style:italic}
.pb__badge{font-family:var(--ff-grotesk);font-size:10px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--terracotta),var(--gold-d));
padding:3px 8px;border-radius:99px;line-height:1;flex-shrink:0}
.pb__spacer{flex:1}
.pb__links{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.pb__links::-webkit-scrollbar{display:none}
.pb__links a{font-family:var(--ff-grotesk);font-size:12.5px;font-weight:600;letter-spacing:.02em;
color:var(--mute);padding:8px 12px;border-radius:99px;white-space:nowrap;transition:color .18s,background .18s}
.pb__links a:hover{color:var(--terracotta);background:var(--cream-soft)}
.pb__links a.active{color:#fff;background:var(--ink)}
.pb__links a.feat{color:var(--terracotta-d)}
.pb__links a.feat.active{color:#fff;background:var(--terracotta)}
/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;padding:64px 28px 52px;
background:radial-gradient(120% 90% at 88% -10%,rgba(217,168,108,.30),transparent 56%),
radial-gradient(110% 80% at -10% 120%,rgba(122,140,92,.18),transparent 52%),
linear-gradient(180deg,var(--cream-soft),var(--cream))}
.hero__wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.hero h1{font-family:var(--ff-display);font-weight:800;font-size:clamp(40px,6vw,76px);
line-height:.96;color:var(--ink);letter-spacing:-.028em;margin-bottom:22px}
.hero h1 em{color:var(--terracotta);font-style:italic}
.hero__sub{font-size:19px;color:var(--mute);max-width:560px;line-height:1.6;margin-bottom:26px}
/* ===== Section base ===== */
section{padding:74px 28px;position:relative}
section:nth-child(even){background:var(--cream-soft)}
.wrap{max-width:var(--maxw);margin:0 auto}
.eyebrow,.sec-label{font-family:var(--ff-grotesk);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
color:var(--terracotta);font-weight:600;margin-bottom:14px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before,.sec-label::before{content:"";width:30px;height:2px;background:var(--terracotta)}
.sec-title{font-family:var(--ff-display);font-weight:800;font-size:clamp(30px,4.4vw,50px);
line-height:1.02;color:var(--ink);letter-spacing:-.025em;margin-bottom:42px;max-width:880px}
.sec-title em{color:var(--terracotta);font-style:italic}
.lead{font-size:18px;line-height:1.8;color:var(--charcoal);max-width:760px;margin-bottom:24px}
/* ===== Buttons / pills / chips ===== */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--terracotta);color:#fff;
padding:15px 30px;border-radius:99px;font-family:var(--ff-grotesk);font-size:14px;font-weight:600;
letter-spacing:.02em;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{color:#fff;background:var(--terracotta-l);transform:translateY(-2px);box-shadow:0 16px 36px rgba(196,90,61,.34)}
.btn::after{content:"โ"}
.btn-ink{background:var(--ink)}
.btn-ink:hover{background:#000}
.pill{font-family:var(--ff-grotesk);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--charcoal)}
.pill.solid{background:var(--terracotta);color:#fff;border-color:var(--terracotta)}
.tag{display:inline-block;background:var(--cream-soft);color:var(--terracotta-d);
font-family:var(--ff-grotesk);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:5px 12px;border:1px solid var(--line);border-radius:99px;margin:8px 6px 0 0}
/* ===== Cards ===== */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:26px;
transition:transform .18s,box-shadow .2s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(196,90,61,.14);border-color:var(--terracotta)}
.card h4{font-family:var(--ff-display);font-weight:700;font-size:21px;color:var(--ink);margin-bottom:8px}
.card p{font-size:14.5px;color:var(--mute);line-height:1.7}
/* ===== Dark card / code ===== */
.dark{background:var(--espresso);color:#efe6da;border-radius:var(--r-lg);padding:32px}
.codeblock{background:var(--espresso);border:1px solid #2a2118;border-radius:var(--r-md);padding:22px 24px;
font-family:var(--ff-mono);font-size:13px;color:#cfc4b4;line-height:1.85;overflow-x:auto}
.codeblock .c{color:#6e655a}.codeblock .p{color:var(--terracotta-l)}
.codeblock .g{color:#a9d6a0}.codeblock .y{color:var(--gold-l)}
/* ===== Step flow ===== */
.flow{display:flex;flex-direction:column;max-width:920px}
.flow-step{display:grid;grid-template-columns:78px 1fr;gap:28px;align-items:start;
padding:30px 0;border-bottom:1px solid var(--line);position:relative}
.flow-step:last-child{border-bottom:none}
.step-num{width:66px;height:66px;border-radius:50%;
background:linear-gradient(135deg,var(--terracotta),var(--gold-d));color:#fff;
font-family:var(--ff-display);font-weight:800;font-size:28px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 10px 24px rgba(196,90,61,.28)}
.step-body h3{font-family:var(--ff-display);font-weight:700;font-size:24px;color:var(--ink);margin-bottom:8px}
.step-body p{font-size:16px;color:var(--charcoal);line-height:1.75}
/* ===== Tables ===== */
.table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.table th{background:var(--ink);color:#fff;text-align:left;padding:12px 16px;
font-family:var(--ff-grotesk);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.table td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table tr:nth-child(even) td{background:var(--cream-soft)}
/* ===== CTA band ===== */
.ctaband{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-d));color:#fff;text-align:center;padding:56px 28px}
.ctaband h2{font-family:var(--ff-display);font-weight:800;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin-bottom:14px}
.ctaband p{font-size:17px;color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 26px;line-height:1.6}
.ctaband .btn{background:var(--ink)}.ctaband .btn:hover{background:#000}
/* ===== Footer ===== */
footer{background:var(--espresso);color:#9c9081;padding:38px 28px}
.foot-row{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.f-brand{font-family:var(--ff-display);font-weight:800;font-size:22px;color:#fff}
.f-brand em{color:var(--terracotta-l);font-style:italic}
footer p{font-size:13px;line-height:1.6}
/* ===== Responsive ===== */
@media(max-width:980px){.cards-3,.cards-2{grid-template-columns:1fr}}
@media(max-width:560px){
section{padding:52px 20px}
.hero{padding:46px 20px 40px}
.flow-step{grid-template-columns:54px 1fr;gap:18px}
.step-num{width:50px;height:50px;font-size:22px}
}
/* Layout helpers */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}