/*
Theme Name: Sohib Creative Child
Theme URI: https://sohibcreative.id
Description: Child theme untuk Hello Elementor — design system "Overprint" milik Sohib Creative (percetakan & creative studio). Berisi token warna, tipografi, komponen, dan class animasi (parallax, marquee, reveal). Pasang Hello Elementor sebagai parent theme.
Author: Fericy Labs
Author URI: https://fericy.com
Template: hello-elementor
Version: 1.0.0
Text Domain: sohib-creative-child
*/
/* ============================================================
1. DESIGN TOKENS (ubah nilai di sini untuk rebrand)
============================================================ */
:root{
--sc-paper:#F3F0E7;
--sc-surface:#FBF9F3;
--sc-surface-2:#EFEBDF;
--sc-ink:#1B1622;
--sc-ink-soft:#4B4453;
--sc-muted:#847C8D;
--sc-line:#E3DCCB;
--sc-primary:#EE3F1C; /* vermilion ink — warna aksen utama */
--sc-primary-strong:#C7300F;
--sc-cyan:#0E97A4; /* print cyan */
--sc-sun:#FFB627; /* highlight kuning */
--sc-on-primary:#FFF6EE;
--sc-on-dark:#F3EEE4;
--sc-ink-ground:#14101A; /* panel gelap */
--sc-shadow:0 18px 50px -24px rgba(27,22,34,.45);
--sc-shadow-sm:0 8px 24px -14px rgba(27,22,34,.4);
--sc-radius:18px;
--sc-radius-lg:28px;
/* font family — samakan juga di Elementor > Site Settings > Global Fonts */
--sc-ff-display:"Bricolage Grotesque",system-ui,sans-serif;
--sc-ff-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
--sc-ff-mono:"DM Mono",ui-monospace,monospace;
}
/* Dark mode opsional: tambahkan class .sc-dark di (atau pakai plugin dark-mode) */
body.sc-dark{
--sc-paper:#141019;--sc-surface:#1D1725;--sc-surface-2:#241D2F;
--sc-ink:#F3EEE4;--sc-ink-soft:#CCC5D3;--sc-muted:#9A92A6;--sc-line:#2E2739;
--sc-primary:#FF5A34;--sc-primary-strong:#FF7A56;--sc-cyan:#25C4D1;--sc-sun:#FFC64F;
--sc-on-primary:#1B0F0A;--sc-ink-ground:#0E0B14;
--sc-shadow:0 22px 60px -26px rgba(0,0,0,.7);
}
/* ============================================================
2. BASE / TIPOGRAFI (berlaku global di seluruh halaman)
============================================================ */
body{
background:var(--sc-paper);
color:var(--sc-ink);
font-family:var(--sc-ff-body);
font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.sc-display{
font-family:var(--sc-ff-display);font-weight:800;line-height:1.05;
letter-spacing:-.02em;text-wrap:balance;
}
a{color:var(--sc-primary)}
/* paper grain overlay tipis untuk seluruh site (opsional, matikan kalau tak perlu) */
body.sc-grain::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body.sc-dark.sc-grain::before{mix-blend-mode:screen;opacity:.06}
/* ============================================================
3. KOMPONEN — pakai class ini di widget Elementor
============================================================ */
/* eyebrow / label kecil */
.sc-eyebrow{
font-family:var(--sc-ff-mono);font-size:.74rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--sc-primary);
display:inline-flex;align-items:center;gap:.6em;
}
.sc-eyebrow::before{content:"";width:22px;height:2px;background:var(--sc-primary);display:inline-block}
/* tombol (kalau tak mau pakai button Elementor) */
.sc-btn{
position:relative;display:inline-flex;align-items:center;gap:.55em;
font-family:var(--sc-ff-body);font-weight:700;font-size:1rem;
padding:.9em 1.5em;border-radius:999px;border:2px solid var(--sc-ink);
cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .2s,color .2s;
text-decoration:none;color:var(--sc-ink);
}
.sc-btn--primary{background:var(--sc-primary);border-color:var(--sc-primary);color:var(--sc-on-primary)}
.sc-btn--primary:hover{transform:translateY(-3px);box-shadow:6px 6px 0 var(--sc-ink)}
.sc-btn--ghost:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--sc-primary);border-color:var(--sc-primary)}
/* kartu layanan */
.sc-card{
background:var(--sc-surface);border:1px solid var(--sc-line);border-radius:var(--sc-radius);
padding:30px 26px;position:relative;overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;height:100%;
}
.sc-card:hover{transform:translateY(-6px);box-shadow:var(--sc-shadow);border-color:var(--sc-primary)}
.sc-card__ico{
width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
background:color-mix(in srgb,var(--sc-primary) 14%,transparent);color:var(--sc-primary);
margin-bottom:20px;transition:background .22s,color .22s;
}
.sc-card:hover .sc-card__ico{background:var(--sc-primary);color:var(--sc-on-primary)}
.sc-card h3{font-size:1.32rem;margin:0 0 8px}
.sc-card p{color:var(--sc-muted);font-size:.98rem;margin:0}
/* panel gelap (produk/CTA) */
.sc-panel-dark{background:var(--sc-ink-ground);color:var(--sc-on-dark);border-radius:var(--sc-radius-lg)}
.sc-panel-dark h1,.sc-panel-dark h2,.sc-panel-dark h3{color:var(--sc-on-dark)}
/* langkah proses bernomor */
.sc-step__num{
font-family:var(--sc-ff-display);font-weight:800;font-size:3.4rem;line-height:1;
color:transparent;-webkit-text-stroke:1.6px var(--sc-primary);letter-spacing:-.04em;
}
/* blob dekoratif */
.sc-blob{position:absolute;z-index:0;border-radius:50%;filter:blur(46px);opacity:.4;pointer-events:none}
/* ============================================================
4. MARQUEE — "text berjalan"
Struktur:
JS otomatis menggandakan isi track supaya loop-nya mulus.
============================================================ */
.sc-marquee{background:var(--sc-ink-ground);color:var(--sc-on-dark);border-block:2px solid var(--sc-ink);
padding-block:16px;overflow:hidden;position:relative}
.sc-marquee--primary{background:var(--sc-primary);color:var(--sc-on-primary);border-color:var(--sc-primary)}
.sc-marquee__track{display:flex;width:max-content;gap:0;animation:sc-marquee 32s linear infinite}
.sc-marquee--primary .sc-marquee__track{animation-duration:26s;animation-direction:reverse}
.sc-marquee--fast .sc-marquee__track{animation-duration:20s}
.sc-marquee:hover .sc-marquee__track{animation-play-state:paused}
.sc-marquee__item{
font-family:var(--sc-ff-display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.9rem);
text-transform:uppercase;padding-inline:26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap;
}
.sc-marquee__item::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--sc-sun);flex:0 0 auto}
.sc-marquee--primary .sc-marquee__item::after{background:var(--sc-on-primary)}
@keyframes sc-marquee{to{transform:translateX(-50%)}}
/* ============================================================
5. ANIMASI — parallax, float, reveal
============================================================ */
/* elemen melayang ambient: class .sc-float (+ .sc-float--d1/d2/d3 utk delay) */
.sc-float{animation:sc-float 7s ease-in-out infinite}
.sc-float--d1{animation-delay:-2s}.sc-float--d2{animation-delay:-4s}.sc-float--d3{animation-delay:-1s}
@keyframes sc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(6deg)}}
/* parallax: tambahkan atribut data-sc-parallax="0.15" (0.05–0.4) ke elemen */
/* (transform di-set oleh JS saat scroll) */
/* reveal saat masuk viewport: class .sc-reveal (konten tetap terlihat kalau JS mati) */
.sc-reveal.sc-in{animation:sc-rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes sc-rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
/* efek overprint pada teks: Teks */
.sc-over{position:relative;display:inline-block;color:var(--sc-primary)}
.sc-over::after{content:attr(data-word);position:absolute;left:2px;top:3px;color:var(--sc-cyan);
mix-blend-mode:multiply;z-index:-1;opacity:.9}
body.sc-dark .sc-over::after{mix-blend-mode:screen}
/* ============================================================
6. AKSEN ELEMENTOR (opsional) — samakan heading & tombol default
============================================================ */
.elementor-widget-heading .elementor-heading-title{font-family:var(--sc-ff-display);letter-spacing:-.02em}
.elementor-button{font-family:var(--sc-ff-body);font-weight:700;border-radius:999px}
/* ============================================================
7. AKSESIBILITAS — hormati prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion:reduce){
.sc-float,.sc-marquee__track{animation:none !important}
.sc-reveal.sc-in{animation:none !important}
[data-sc-parallax]{transform:none !important}
}