@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:wght@300;400&display=swap'); *{margin:0;padding:0;box-sizing:border-box;} /* ============================================================ THEME VARIABLES Usage: - Homepage → - Halaman lain → ============================================================ */ /* DARK THEME (Homepage) */ body.theme-dark{ --gold:#C9A84C; --gold-light:#E8CC7A; --gold-dim:#7A6030; --bg:#060606; --s1:#0E0D0B; --s2:#151412; --surface:var(--s2); --surface-soft:var(--s1); --border:#222018; --border2:#2E2A22; --text:#F0EAD6; --muted:#7A7060; --soft:#A89878; } /* LIGHT THEME (Halaman lain) */ body.theme-light{ --gold:#C9A84C; --gold-light:#E8CC7A; --gold-dim:#B08A3A; --bg:#F5F1E6; --s1:#F0EAD6; --s2:#FFFFFF; --surface:#FFFFFF; --surface-soft:#F0EAD6; --border:#E2D8C3; --border2:#D5C9AE; --text:#1A1814; --muted:#7A6F5A; --soft:#A89878; } /* ============================================================ BASE ============================================================ */ body{ background:var(--bg); color:var(--text); font-family:'DM Mono',monospace; overflow-x:hidden; } /* ============================================================ NAV ============================================================ */ .nav{ display:flex; justify-content:space-between; align-items:center; padding:24px 48px; border-bottom:0.5px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(8px); } /* Dark nav background */ body.theme-dark .nav{background:rgba(6,6,6,0.95);} /* Light nav background */ body.theme-light .nav{background:rgba(245,241,230,0.95);} .logo{ font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:300; letter-spacing:0.2em; color:var(--gold); text-decoration:none; } .nav-right{display:flex;align-items:center;gap:32px;} .nav-link{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color 0.2s; cursor:pointer; background:none; border:none; font-family:'DM Mono',monospace; } .nav-link:hover{color:var(--soft);} .nav-cta{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bg); background:var(--gold); padding:12px 24px; border:none; cursor:pointer; font-family:'DM Mono',monospace; transition:background 0.2s; } .nav-cta:hover{background:var(--gold-light);} /* Hamburger */ .nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;} .nav-toggle span{width:20px;height:2px;background:var(--gold);display:block;} /* ============================================================ HERO ============================================================ */ .hero{ min-height:94vh; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; } .hero-bg-grid{ position:absolute; inset:0; background-image: repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(34,32,24,0.45) 59px,rgba(34,32,24,0.45) 60px), repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(34,32,24,0.45) 59px,rgba(34,32,24,0.45) 60px); pointer-events:none; } .hero-left{ padding:90px 48px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; } .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:36px;} .eyebrow-line{width:36px;height:0.5px;background:var(--gold-dim);} .eyebrow-text{font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-dim);} .hero-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(48px,6vw,78px); font-weight:300; line-height:1.06; letter-spacing:-0.025em; margin-bottom:28px; } .hero-title em{color:var(--gold);font-style:italic;display:block;} .hero-body{ font-size:14px; letter-spacing:0.04em; line-height:1.95; color:var(--muted); max-width:400px; margin-bottom:48px; } .hero-actions{display:flex;gap:18px;align-items:center;} .hero-right{ position:relative; display:flex; align-items:center; justify-content:center; border-left:0.5px solid var(--border); } /* Hero orb */ .hero-orb{position:relative;width:300px;height:300px;} .orb-ring{position:absolute;border-radius:50%;border:0.5px solid;} .orb-ring:nth-child(1){inset:0;border-color:var(--border2);animation:rot 20s linear infinite;} .orb-ring:nth-child(2){inset:24px;border-color:var(--gold-dim);opacity:0.4;animation:rot 14s linear infinite reverse;} .orb-ring:nth-child(3){inset:56px;border-color:var(--border2);animation:rot 10s linear infinite;} .orb-core{position:absolute;inset:80px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--gold-dim),transparent 70%);opacity:0.6;} .orb-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);} .orb-label{position:absolute;font-size:10px;letter-spacing:0.18em;color:var(--muted);text-transform:uppercase;line-height:1.4;} .orb-label.tl{top:36px;left:16px;} .orb-label.tr{top:36px;right:16px;text-align:right;} .orb-label.bl{bottom:36px;left:16px;} .orb-label.br{bottom:36px;right:16px;text-align:right;} .orb-label span{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--gold);letter-spacing:0;margin-bottom:3px;} .orb-dot:nth-of-type(5){top:0;left:50%;transform:translate(-50%,-50%);} .orb-dot:nth-of-type(6){top:50%;right:0;transform:translate(50%,-50%);} .orb-dot:nth-of-type(7){bottom:0;left:50%;transform:translate(-50%,50%);} .orb-dot:nth-of-type(8){top:50%;left:0;transform:translate(-50%,-50%);} @keyframes rot{to{transform:rotate(360deg)}} /* ============================================================ MARQUEE ============================================================ */ .marquee-strip{ border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); padding:16px 0; overflow:hidden; background:var(--s1); } .marquee-inner{display:flex;animation:marquee 28s linear infinite;width:max-content;} .marquee-item{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--muted); padding:0 44px; border-right:0.5px solid var(--border2); white-space:nowrap; } .marquee-item.gold{color:var(--gold-dim);} @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ============================================================ SECTION GENERIC ============================================================ */ .section{padding:100px 48px;} .section.dark{background:var(--s1);} .divider{height:0.5px;background:var(--border);} .sec-label{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:22px; display:flex; align-items:center; gap:12px; } .sec-label::before{content:'';display:block;width:24px;height:0.5px;background:var(--gold-dim);} .sec-label.center{justify-content:center;} .sec-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(34px,4.5vw,56px); font-weight:300; line-height:1.1; letter-spacing:-0.02em; margin-bottom:20px; } .sec-title em{color:var(--gold);font-style:italic;} .sec-sub{ font-size:14px; letter-spacing:0.04em; line-height:1.9; color:var(--muted); max-width:520px; margin-bottom:60px; } .text-center{text-align:center;} .section.text-center .sec-sub, .tools-section .sec-sub{max-width:420px;margin:0 auto 40px;} .tools-cta{display:flex;justify-content:center;} /* ============================================================ TYPOGRAPHY SHARED ============================================================ */ .title{ font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:300; letter-spacing:-0.02em; } .title em{color:var(--gold);font-style:italic;} .text-secondary{color:var(--muted)!important;} /* ============================================================ PROBLEM CARDS ============================================================ */ .problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);} .prob-card{background:var(--s1);padding:40px 36px;position:relative;overflow:hidden;transition:background 0.3s;} .prob-card:hover{background:var(--s2);} .prob-num{font-family:'Cormorant Garamond',serif;font-size:80px;font-weight:300;color:var(--border2);position:absolute;top:12px;right:20px;line-height:1;pointer-events:none;} .prob-icon{font-size:20px;margin-bottom:18px;color:var(--gold-dim);} .prob-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:var(--text);margin-bottom:12px;} .prob-desc{font-size:13px;letter-spacing:0.04em;line-height:1.85;color:var(--muted);} /* ============================================================ SOLUTION ============================================================ */ .solution-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} .feature-list{list-style:none;margin-top:40px;} .feature-item{display:flex;gap:22px;padding:22px 0;border-bottom:0.5px solid var(--border);align-items:flex-start;} .feature-item:first-child{padding-top:0;} .f-icon{width:36px;height:36px;border:0.5px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;} .f-icon-sym{font-size:13px;color:var(--gold);} .f-title{font-size:13px;letter-spacing:0.1em;color:var(--text);margin-bottom:6px;} .f-desc{font-size:13px;letter-spacing:0.03em;line-height:1.8;color:var(--muted);} .sol-visual{display:flex;flex-direction:column;gap:18px;} .sol-bar-row{display:flex;flex-direction:column;gap:7px;} .sol-bar-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:0.1em;color:var(--muted);} .sol-bar-val{color:var(--soft);} .sol-bar-track{height:2px;background:var(--border);} .sol-bar-fill{height:100%;background:var(--gold);transition:width 1.5s ease;width:0%;} .sol-card{background:var(--s2);border:0.5px solid var(--border2);padding:32px;margin-bottom:8px;} .sol-card-label{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;} .sol-card-num{font-family:'Cormorant Garamond',serif;font-size:46px;font-weight:300;color:var(--gold);line-height:1;} .sol-card-sub{font-size:12px;letter-spacing:0.1em;color:var(--muted);margin-top:8px;} /* ============================================================ MANIFESTO ============================================================ */ .manifesto{ padding:110px 48px; text-align:center; background:var(--s1); border-top:0.5px solid var(--border); border-bottom:0.5px solid var(--border); } .manifesto-quote{ font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,48px); font-weight:300; font-style:italic; color:var(--text); line-height:1.3; max-width:700px; margin:0 auto 20px; letter-spacing:-0.01em; } .manifesto-divider{width:40px;height:0.5px;background:var(--gold-dim);margin:22px auto;} .manifesto-attr{font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--muted);} /* ============================================================ WHY DIFFERENT ============================================================ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:60px;} .why-card{background:var(--bg);padding:40px 32px;border-top:2px solid transparent;transition:border-color 0.3s,background 0.3s;} .why-card:hover{border-top-color:var(--gold);background:var(--s1);} .why-num{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:0.2em;color:var(--gold-dim);margin-bottom:22px;} .why-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--text);margin-bottom:14px;} .why-desc{font-size:13px;letter-spacing:0.04em;line-height:1.85;color:var(--muted);} /* ============================================================ REDACTED / ABOUT ============================================================ */ .redacted-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} .redacted-card{background:var(--s2);border:0.5px solid var(--border2);padding:40px;} .redacted-label{font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;} .redacted-row{display:flex;flex-direction:column;gap:14px;} .r-item{display:flex;align-items:center;gap:16px;} .r-avatar{width:44px;height:44px;border:0.5px solid var(--border2);background:var(--border);flex-shrink:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;} .r-avatar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(34,32,24,0.8) 3px,rgba(34,32,24,0.8) 4px);} .r-avatar-sym{font-size:16px;color:var(--border2);z-index:1;} .r-info{flex:1;} .r-name{height:11px;background:var(--border);margin-bottom:7px;position:relative;overflow:hidden;} .r-name::after{content:'REDACTED';position:absolute;inset:0;display:flex;align-items:center;padding:0 8px;font-size:7px;letter-spacing:0.3em;color:var(--muted);} .r-role{height:9px;background:var(--border2);width:60%;} .r-sep{height:0.5px;background:var(--border);} /* ============================================================ TIMELINE ============================================================ */ .timeline{display:flex;flex-direction:column;gap:0;max-width:680px;margin:0 auto;} .tl-item{display:grid;grid-template-columns:90px 1px 1fr;gap:0 28px;padding-bottom:48px;} .tl-item:last-child{padding-bottom:0;} .tl-year{font-size:11px;letter-spacing:0.15em;color:var(--gold-dim);padding-top:4px;text-align:right;} .tl-line{background:var(--border);position:relative;} .tl-line::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--gold);border:1px solid var(--bg);} .tl-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:400;color:var(--text);margin-bottom:10px;} .tl-desc{font-size:13px;letter-spacing:0.04em;line-height:1.85;color:var(--muted);} /* ============================================================ VALUES ============================================================ */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:56px;} .val-card{background:var(--s1);padding:40px 32px;border-top:2px solid transparent;transition:border-color 0.3s,background 0.3s;} .val-card:hover{border-top-color:var(--gold);background:var(--s2);} .val-sym{font-size:20px;color:var(--gold-dim);margin-bottom:20px;} .val-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--text);margin-bottom:12px;} .val-desc{font-size:13px;letter-spacing:0.04em;line-height:1.85;color:var(--muted);} /* ============================================================ CARD ============================================================ */ .card-dark{ background:var(--surface); border:1px solid var(--border); padding:40px; border-radius:12px; transition:all 0.2s ease; } .card-dark:hover{ box-shadow:0 10px 30px rgba(0,0,0,0.08); } /* ============================================================ FORM ============================================================ */ .form-label{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);} .form-control{ background:var(--surface-soft); border:1px solid var(--border); color:var(--text); font-size:13px; padding:14px 16px; letter-spacing:0.04em; font-family:'DM Mono',monospace; outline:none; width:100%; transition:border-color 0.2s,background 0.2s; } .form-control::placeholder{color:var(--muted);} .form-control:focus{border-color:var(--gold-dim);background:var(--surface);} /* ============================================================ BUTTONS ============================================================ */ .btn-primary{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--bg); background:var(--gold); padding:16px 32px; border:none; cursor:pointer; font-family:'DM Mono',monospace; transition:background 0.2s; display:inline-block; } .btn-primary:hover{background:var(--gold-light);} .btn-ghost{ font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--soft); background:transparent; padding:16px 0; border:none; cursor:pointer; font-family:'DM Mono',monospace; display:flex; align-items:center; gap:8px; } .btn-ghost::after{content:'→';transition:transform 0.2s;} .btn-ghost:hover::after{transform:translateX(4px);} .btn-gold{ background:var(--gold); color:#000; border:none; padding:14px 28px; letter-spacing:0.18em; text-transform:uppercase; font-size:11px; font-family:'DM Mono',monospace; cursor:pointer; transition:all 0.25s; display:inline-block; } .btn-gold:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,0.25); } /* ============================================================ RESULT / PROGRESS (dipakai di halaman tools / calculator) ============================================================ */ .result-number{ font-family:'Cormorant Garamond',serif; font-size:44px; font-weight:300; color:var(--gold); } .result-sub{ font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); } .progress{height:5px;background:var(--border);border-radius:4px;} .progress-bar{background:var(--gold);transition:width 0.6s ease;} /* ============================================================ CTA SECTION ============================================================ */ .cta-section{padding:110px 48px;border-top:0.5px solid var(--border);} .cta-inner{max-width:660px;margin:0 auto;text-align:center;} .cta-badge{display:inline-flex;align-items:center;gap:10px;border:0.5px solid var(--gold-dim);padding:10px 20px;margin-bottom:40px;} .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite;} .badge-text{font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-dim);} .cta-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(38px,5.5vw,62px); font-weight:300; line-height:1.08; letter-spacing:-0.02em; margin-bottom:22px; } .cta-title em{color:var(--gold);font-style:italic;} .cta-body{font-size:14px;letter-spacing:0.04em;line-height:1.9;color:var(--muted);margin-bottom:48px;} .cta-form{display:flex;max-width:460px;margin:0 auto;} .cta-input{ flex:1; background:var(--surface-soft); border:0.5px solid var(--border2); border-right:none; padding:18px 20px; font-family:'DM Mono',monospace; font-size:13px; color:var(--text); outline:none; letter-spacing:0.05em; } .cta-input:focus{border-color:var(--gold-dim);} .cta-input::placeholder{color:var(--muted);} .cta-btn{ background:var(--gold); color:#000; border:none; padding:18px 26px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:background 0.2s; } .cta-btn:hover{background:var(--gold-light);} .cta-note{font-size:11px;letter-spacing:0.1em;color:var(--muted);margin-top:16px;} /* ============================================================ FOOTER ============================================================ */ .footer{ padding:40px 48px; border-top:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:var(--s1); } .footer-logo{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;letter-spacing:0.2em;color:var(--gold-dim);} .footer-tagline{font-size:11px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;} .footer-ig{font-size:11px;letter-spacing:0.15em;color:var(--muted);text-decoration:none;transition:color 0.2s;} .footer-ig:hover{color:var(--soft);} .footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:18px 0;} .footer-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:.2s ease;} .footer-links a:hover{color:var(--gold);} .footer-socials{display:flex;justify-content:center;margin-top:20px;} .social-link{color:var(--muted);transition:.2s ease;} .social-link:hover{color:var(--gold);transform:translateY(-2px);} /* ============================================================ TOAST ============================================================ */ .toast{ position:fixed; bottom:28px; right:28px; padding:16px 24px; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); opacity:0; transform:translateY(16px); transition:all 0.3s; z-index:999; pointer-events:none; } body.theme-dark .toast{background:var(--s2);border:0.5px solid var(--gold-dim);} body.theme-light .toast{background:#fff;border:0.5px solid var(--gold);} .toast.show{opacity:1;transform:translateY(0);} /* ============================================================ ANIMATIONS ============================================================ */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.2}} /* ============================================================ MOBILE ============================================================ */ @media(max-width:768px){ .nav{padding:16px 20px;} .logo{font-size:18px;} .nav-toggle{display:flex;} .nav-right{ position:absolute; top:64px;right:0;width:100%; background:var(--bg); flex-direction:column; align-items:flex-start; padding:20px;gap:16px; border-top:0.5px solid var(--border); display:none;opacity:0; transform:translateY(-10px); transition:all 0.3s ease; } .nav-right.active{display:flex;opacity:1;transform:translateY(0);} .nav-link{display:block;width:100%;} .nav-cta{width:100%;text-align:center;padding:12px;font-size:10px;} .hero{grid-template-columns:1fr;min-height:auto;} .hero-left{padding:60px 20px 40px;} .hero-right{display:none;} .hero-title{font-size:38px;} .hero-body{max-width:100%;} .section{padding:70px 20px;} .problem-grid,.why-grid,.values-grid{grid-template-columns:1fr;} .solution-layout,.redacted-inner{grid-template-columns:1fr;gap:40px;} .tl-item{grid-template-columns:60px 1px 1fr;gap:0 16px;} .cta-form{flex-direction:column;} .cta-input{border-right:0.5px solid var(--border2);margin-bottom:10px;} .cta-btn{width:100%;} .footer{flex-direction:column;gap:12px;text-align:center;} .btn-primary,.btn-gold{width:100%;text-align:center;} } .btn-outline{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); background:transparent; border:0.5px solid var(--border2); padding:10px 20px; font-family:'DM Mono',monospace; cursor:pointer; text-decoration:none; display:inline-block; transition:all 0.2s; } .btn-outline:hover{ border-color:var(--gold-dim); color:var(--soft); } /* ============================================================ TOOLS PAGE ============================================================ */ .tools-hero{ padding:100px 48px 120px; position:relative; } .tools-hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at top right, rgba(201,168,76,0.08), transparent 40%); pointer-events:none; } .tools-header{ max-width:760px; margin-bottom:70px; } .tools-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(42px,5vw,72px); font-weight:300; line-height:1.05; letter-spacing:-0.03em; margin-bottom:24px; } .tools-title em{ color:var(--gold); font-style:italic; } .tools-sub{ font-size:14px; line-height:1.9; letter-spacing:0.04em; color:var(--muted); max-width:520px; } /* GRID */ .tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); } /* CARD */ .tool-card{ background:var(--surface); padding:42px 36px; min-height:340px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; transition: transform .35s ease, background .35s ease, border-color .35s ease; } .tool-card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .tool-card:hover{ background:var(--s1); transform:translateY(-6px); } .tool-card:hover::before{ transform:scaleX(1); } /* TOP */ .tool-top{ margin-bottom:40px; } .tool-index{ font-size:11px; letter-spacing:0.25em; color:var(--gold-dim); margin-bottom:28px; } .tool-name{ font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:300; line-height:1.1; color:var(--text); margin-bottom:14px; } .tool-tag{ display:inline-flex; align-items:center; gap:8px; border:0.5px solid var(--border2); padding:8px 14px; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); } /* DESC */ .tool-desc{ font-size:13px; line-height:1.9; letter-spacing:0.04em; color:var(--muted); margin-bottom:40px; } /* LINK */ .tool-link{ display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-decoration:none; } .tool-link::after{ content:'→'; transition:transform .25s ease; } .tool-link:hover::after{ transform:translateX(4px); } .tools-table{ border-collapse:collapse; width:100%; /* ini yang bikin scroll di mobile */ } /* HEADER */ .tools-table thead{ background:var(--black); } .tools-table th{ text-align:left; padding:14px 16px; font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); border-bottom:0.5px solid var(--border); } /* BODY */ .tools-table td{ padding:14px 16px; font-size:13px; color:var(--muted); border-bottom:0.5px solid var(--border); } /* ROW HOVER */ .tools-table tbody tr:hover{ background:var(--s2); } /* MOBILE */ @media(max-width:768px){ .tools-hero{ padding:70px 20px 90px; } .tools-grid{ grid-template-columns:1fr; } .tool-card{ min-height:auto; } .tool-name{ font-size:28px; } .tools-table th, .tools-table td{ padding:12px 10px; font-size:12px; } } /* ============================================================ TOOL PAGE ============================================================ */ .tool-page{ padding:10px 48px 120px; } .tool-container{ max-width:1400px; margin:0 auto; } /* HEADER */ .tool-header{ margin-bottom:60px; max-width:760px; } .tool-label{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; } .tool-title{ font-family:'Cormorant Garamond',serif; font-size:clamp(44px,5vw,72px); font-weight:300; line-height:1.05; margin-bottom:24px; letter-spacing:-0.03em; } .tool-title em{ color:var(--gold); font-style:italic; } .tool-sub{ font-size:14px; line-height:1.9; letter-spacing:0.04em; color:var(--muted); max-width:520px; } /* LAYOUT */ .tool-layout{ display:grid; grid-template-columns:380px 1fr; gap:40px; align-items:start; } /* FORM */ .tool-form-card{ position:sticky; top:110px; } .tool-section-title{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; } /* SUMMARY */ .summary-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:24px; } .summary-card{ background:var(--surface); border:1px solid var(--border); padding:34px; } .summary-label{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; } .summary-value{ font-family:'Cormorant Garamond',serif; font-size:54px; font-weight:300; color:var(--gold); line-height:1; } .summary-value-small{ font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:300; color:var(--text); } /* TABLE */ .table-responsive{ width:100%; } .quant-table{ width:max-content; min-width:100%; border-collapse:collapse; } .quant-table thead th{ letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); padding:18px 0; border-bottom:1px solid var(--border); } .quant-table tbody td{ padding:18px 0; border-bottom:1px solid rgba(226,216,195,0.55); color:var(--text); } .quant-table tbody tr:hover{ background:rgba(201,168,76,0.03); } .quant-table tfoot th{ padding-top:24px; letter-spacing:0.1em; } /* BACK LINK */ .back-link{ display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; margin-bottom:40px; } .back-link:hover{ color:var(--gold); } .tool-section-space{ margin-top:42px; } .text-right{ text-align:right; } /* PRICING */ .pricing-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--border); margin-top:60px; } /* CARD BASE */ .price-card{ background:var(--s1); padding:40px 32px; text-align:left; transition:all 0.25s ease; border:0.5px solid transparent; position: relative; display:flex; flex-direction:column; height:100%; } .price-card:hover{ transform:translateY(-6px); border-color:var(--gold-dim); } /* FEATURED CARD */ .price-card.featured{ background:var(--s2); border-top:2px solid var(--gold); } /* badge */ .price-badge{ position:absolute; top:14px; right:14px; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--black); background:var(--gold); padding:6px 10px; border-radius:999px; } /* header */ .price-range{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); } .price-value{ font-family:'Cormorant Garamond', serif; font-size:44px; color:var(--gold); margin-top:6px; } .price-period{ font-size:11px; color:var(--muted); letter-spacing:0.15em; } /* list */ .price-list{ list-style:none; margin-top:20px; margin-bottom:24px; flex:1; } .price-list li{ position:relative; padding-left:20px; /* penting */ font-size:13px; line-height:1.7; color:var(--muted); padding-top:6px; padding-bottom:6px; border-bottom:0.5px solid var(--border); } .price-list li::before{ content:"✓"; position:absolute; left:0; top:8px; color:var(--gold); font-size:12px; } .price-list li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); font-size:12px; } .pricing-note{ max-width:720px; margin:0 auto 40px; font-size:13px; line-height:1.8; color:var(--muted); } .pricing-note .muted{ color:var(--soft); font-size:12px; } .pricing-note strong{ color:var(--gold); } .price-note-small{ margin-top:14px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); opacity:0.8; } .price-range-pill{ display:inline-block; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); border:0.5px solid var(--border2); padding:6px 10px; margin-bottom:18px; } .legal-content{ max-width:780px; margin:0 auto; text-align:left; color:var(--muted); font-size:14px; line-height:1.9; } .legal-content h3{ margin-top:26px; margin-bottom:10px; font-family:'Cormorant Garamond', serif; font-size:20px; color:var(--text); } .legal-content ul{ margin:10px 0 14px 20px; color:var(--muted); } .legal-content li{ margin-bottom:6px; } .affiliate-section{ padding:100px 48px; background:var(--s1); } .affiliate-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); margin-top:50px; } .affiliate-card{ background:var(--black); padding:36px; transition:all 0.2s ease; } .affiliate-card:hover{ background:var(--s2); transform:translateY(-2px); } .affiliate-card h3{ font-family:'Cormorant Garamond', serif; font-size:20px; color:var(--gold); margin-bottom:10px; } .affiliate-card p{ font-size:13px; color:var(--muted); line-height:1.8; } /* CTA */ .affiliate-cta{ margin-top:40px; text-align:center; } .affiliate-note{ margin-top:20px; font-size:11px; color:var(--muted); text-align:center; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.6; } /* MOBILE */ @media(max-width:992px){ .tool-page{ padding:70px 20px 90px; } .tool-layout{ grid-template-columns:1fr; } .tool-form-card{ position:relative; top:auto; } .summary-grid{ grid-template-columns:1fr; } } @media (max-width: 1100px){ .pricing-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 640px){ .pricing-grid{ grid-template-columns:1fr; } .price-card{ padding:28px 22px; } .price-value{ font-size:34px; } .pricing-note{ padding:0 10px; } .price-range-pill{ font-size:9px; } } @media (max-width: 768px){ .affiliate-section{ padding:70px 20px; } .affiliate-grid{ grid-template-columns:1fr; } .affiliate-card{ padding:26px 20px; } .affiliate-card h3{ font-size:18px; } .affiliate-card p{ font-size:13px; } .affiliate-note{ font-size:10px; padding:0 10px; } }