/* ════════════════════════════════════════════════ VARIABLES & RESET ════════════════════════════════════════════════ */ :root{ /* Backgrounds — light "technical publication" surface */ --bg: #ffffff; --bg2: #f8fafc; --bg3: #f3f4f6; --card: #ffffff; --card2: #f8fafc; --surf: #f3f4f6; /* Accent — dark green → emerald */ --a: #16a34a; --a2: #059669; --aG: linear-gradient(135deg,#16a34a,#059669); --aGlow: rgba(22,163,74,.10); --aGlow2:rgba(22,163,74,.06); /* Borders */ --b: #e5e7eb; --bH: rgba(22,163,74,.4); /* Text */ --t: #111827; --ts: #374151; --tm: #6b7280; /* Type */ --fH: 'Inter',sans-serif; --fB: 'Inter',sans-serif; --fM: 'JetBrains Mono',monospace; /* Layout */ --nav: 66px; --max: 1160px; --r: 14px; --r2: 10px; --tr: .32s cubic-bezier(.4,0,.2,1); /* Status */ --danger: #f87171; /* Gradients (horizontal variant for bars/underlines) */ --aG2: linear-gradient(90deg,#16a34a,#059669); /* Soft shadows — light and subtle, no glow motif */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.06); --shadow-lg: 0 8px 24px rgba(0,0,0,.08); /* Icon-box scale — consolidates .si/.rc-ico/.cd-ico/.sv-ico/.yt-ti */ --ibox-sm: 38px; --ibox-md: 40px; --ibox-lg: 50px; /* Shared card padding + muted small body text, for cross-component consistency */ --card-pad: 28px 24px; --fs-body-sm: .87rem; /* Navbar glass tint (theme-aware) */ --nav-bg: rgba(255,255,255,.85); --nav-bg-scrolled: rgba(255,255,255,.97); } /* ════════════════════════════════════════════════ DARK MODE — opt-in via [data-theme="dark"] on , toggled/persisted client-side (see site-scripts.blade.php). Accent stays the same green/emerald brand; only the neutral surface/text/shadow tokens flip. ════════════════════════════════════════════════ */ :root[data-theme="dark"]{ --bg: #0b0e14; --bg2: #11151d; --bg3: #171c26; --card: #12161f; --card2: #171c26; --surf: #1b202b; --aGlow: rgba(22,163,74,.16); --aGlow2:rgba(22,163,74,.09); --b: rgba(255,255,255,.08); --bH: rgba(22,163,74,.5); --t: #eef1f7; --ts: #9aa4b5; --tm: #5b6472; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.35); --shadow-lg: 0 20px 45px rgba(0,0,0,.5); --nav-bg: rgba(11,14,20,.85); --nav-bg-scrolled: rgba(11,14,20,.97); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* No CSS scroll-behavior:smooth here — it fights GSAP ScrollTrigger's own scroll-position reads (the products pin-stack), causing exactly the kind of delayed/erratic pin behavior that looks like a glitch. In-page anchor links already get their smooth scroll from JS (site-scripts.blade.php), which isn't affected by this. */ html{scroll-padding-top:var(--nav);font-size:16px} body{background:var(--bg);color:var(--t);font-family:var(--fB);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} ul{list-style:none} img{max-width:100%;display:block} button{cursor:pointer;border:none;background:none;font-family:inherit} /* Scrollbar */ ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--a);border-radius:3px} /* ════════════════════════════════════════════════ LAYOUT HELPERS ════════════════════════════════════════════════ */ .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} .sec{padding:64px 0} .dark{background:var(--bg2)} .tc{text-align:center} /* ════════════════════════════════════════════════ TYPOGRAPHY ════════════════════════════════════════════════ */ .label{ display:inline-flex;align-items:center;gap:10px; font-family:var(--fM);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--a);margin-bottom:18px; } .label-line{display:block;width:28px;height:1px;background:var(--a)} .h2{ font-family:var(--fH);font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800;line-height:1.1;margin-bottom:14px; } .h2 em{font-style:italic;color:var(--a)} .sub{font-size:.97rem;color:var(--ts);max-width:480px;margin-bottom:54px;line-height:1.7} .sub.tc{margin-inline:auto} .page-hero-count{font-family:var(--fM);font-size:.76rem;letter-spacing:.03em;color:var(--tm);margin:-40px 0 40px} /* ════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:6px 14px;border-radius:var(--r2); font-family:var(--fB);font-size:.78rem;font-weight:500; border:1.5px solid transparent;transition:all var(--tr);white-space:nowrap;cursor:pointer; } .btn-p{ background:var(--a);color:#fff;border-color:var(--a); box-shadow:var(--shadow-md); } .btn-p:hover{background:transparent;color:var(--a);box-shadow:var(--shadow-lg);transform:translateY(-2px)} .btn-o{background:transparent;color:var(--t);border-color:var(--b)} .btn-o:hover{border-color:var(--a);color:var(--a);background:var(--aGlow)} .btn-sm{padding:5px 10px;font-size:.7rem} .btn-w{width:100%} .btn.is-disabled{opacity:.5;pointer-events:none;cursor:default} /* ════════════════════════════════════════════════ NAVBAR ════════════════════════════════════════════════ */ #navbar{ position:fixed;top:0;left:0;right:0; height:var(--nav);z-index:9000; display:flex;align-items:center; background:var(--nav-bg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--b); transition:background var(--tr),border-color var(--tr); } #navbar.scrolled{background:var(--nav-bg-scrolled);border-color:rgba(22,163,74,.12)} .nav-inner{ max-width:var(--max);margin:0 auto;padding:0 22px; width:100%;display:flex;align-items:center;justify-content:space-between; } .logo{ display:flex;align-items:center;gap:8px; font-family:var(--fH);font-size:1.08rem;font-weight:800; color:var(--t);flex-shrink:0;z-index:9200;position:relative; } .logo-icon{ font-family:var(--fM);font-weight:700;font-size:.95rem; color:var(--a);letter-spacing:-.02em; } /* Desktop nav links */ .nav-list{display:flex;align-items:center;justify-content:center;gap:28px;flex:1} .nav-link{ font-family:var(--fM);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase; color:var(--t);transition:color var(--tr);position:relative;padding-bottom:3px; } .nav-link::after{ content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px; background:var(--a);transition:width var(--tr); } .nav-link:hover,.nav-link.on{color:var(--a)} .nav-link:hover::after,.nav-link.on::after{width:100%} /* Dropdown submenus (nav items with children) */ .nav-item{position:relative} .nav-caret{font-size:.6rem;margin-left:5px;transition:transform var(--tr)} .nav-item.has-dropdown:hover .nav-caret,.nav-item.has-dropdown:focus-within .nav-caret{transform:rotate(180deg)} /* Outer hit-box starts immediately below the link (no dead gap) — its own top padding creates the visual gap while staying part of the hoverable area, so moving the mouse down into the dropdown never loses :hover. */ .nav-dropdown{ position:absolute;top:100%;left:50%;transform:translateX(-50%); padding-top:12px; opacity:0;pointer-events:none;transition:opacity var(--tr); } .nav-item.has-dropdown:hover .nav-dropdown,.nav-item.has-dropdown:focus-within .nav-dropdown{ opacity:1;pointer-events:all; } .nav-dropdown-inner{ min-width:190px;background:var(--card);border:1px solid var(--b);border-radius:var(--r2); box-shadow:var(--shadow-lg);padding:8px; display:flex;flex-direction:column;gap:2px; transform:translateY(-6px);transition:transform var(--tr); } .nav-item.has-dropdown:hover .nav-dropdown-inner,.nav-item.has-dropdown:focus-within .nav-dropdown-inner{ transform:translateY(0); } .nav-dropdown a{ display:block;padding:9px 12px;border-radius:calc(var(--r2) - 2px); font-family:var(--fB);font-size:.85rem;text-transform:none;letter-spacing:normal; color:var(--ts);transition:all var(--tr); } .nav-dropdown a:hover{background:var(--aGlow2);color:var(--a)} .drw-children{display:flex;flex-direction:column;padding-left:14px;margin-bottom:4px} .drw-child{font-size:.82rem;padding:10px 0;text-transform:none;letter-spacing:normal} /* Hamburger — always rendered, hidden via display:none on desktop */ .ham{ display:none;flex-direction:column;justify-content:center;gap:5px; padding:8px;z-index:9200;position:relative; width:40px;height:40px; } .ham span{ display:block;width:22px;height:2px; background:var(--t);border-radius:2px; transition:transform var(--tr),opacity var(--tr); transform-origin:center; } .ham.on span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ham.on span:nth-child(2){opacity:0;transform:scaleX(0)} .ham.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile drawer */ #drawer{ position:fixed;top:0;right:0;bottom:0; width:min(290px,85vw); background:var(--bg3); border-left:1px solid var(--b); z-index:9100; padding:calc(var(--nav) + 28px) 28px 40px; display:flex;flex-direction:column;gap:2px; transform:translateX(110%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; } #drawer.on{transform:translateX(0)} .drw-link{ display:block; font-family:var(--fM);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase; color:var(--t);padding:15px 0; border-bottom:1px solid var(--b); transition:color var(--tr),padding-left var(--tr); } .drw-link:last-child{border-bottom:none} .drw-link:hover,.drw-link.on{color:var(--a);padding-left:10px} /* Backdrop */ #backdrop{ position:fixed;inset:0; background:rgba(0,0,0,.7); z-index:9050; opacity:0;pointer-events:none; transition:opacity var(--tr); } #backdrop.on{opacity:1;pointer-events:all} /* ════════════════════════════════════════════════ HERO ════════════════════════════════════════════════ */ #hero{ min-height:100svh;min-height:100vh; position:relative;overflow:hidden; display:flex;align-items:center; padding-top:var(--nav); } /* Full-bleed background image + dark overlay */ /* Extends past the section's own edges (clipped by #hero's overflow:hidden) so the parallax scroll effect in site-scripts.blade.php has room to shift the image without ever exposing a gap at top/bottom. */ .hero-bg{position:absolute;top:-60px;left:0;right:0;bottom:-60px;z-index:0;background:#0b1120;will-change:transform} .hero-bg img{width:100%;height:100%;object-fit:cover} .hero-overlay{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,10,18,.55) 0%,rgba(6,10,18,.72) 55%,rgba(6,10,18,.92) 100%); } .hero-body{ position:relative;z-index:2; max-width:var(--max);margin:0 auto;padding:56px 22px 64px;width:100%; } .hero-content{max-width:880px;margin:0 auto;text-align:center} /* Available badge */ .hero-badge{ display:inline-flex;align-items:center;gap:9px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); color:#fff;font-family:var(--fM);font-size:.72rem;letter-spacing:.1em; padding:7px 16px;border-radius:100px;margin-bottom:30px; } .dot-pulse{ width:7px;height:7px;border-radius:50%;background:var(--a); box-shadow:0 0 8px var(--a);animation:dp 2s ease-in-out infinite; } @keyframes dp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}} /* Hero title */ .hero-title{ font-family:var(--fH); font-size:clamp(1.8rem,4.4vw,3.4rem); font-weight:800;line-height:1.15;letter-spacing:-.02em; color:#fff;margin-bottom:20px;white-space:normal; } .hero-title .em{color:var(--a)} .hero-title .out{-webkit-text-stroke:1.5px rgba(255,255,255,.35);color:transparent} /* Typed role */ .hero-role{ font-family:var(--fM);font-size:.95rem;letter-spacing:.05em;font-weight:600; color:#fff;margin-bottom:14px;min-height:22px; } #typed{color:#fff;border-right:2px solid var(--a);padding-right:3px;animation:blink .75s step-end infinite} @keyframes blink{0%,100%{border-color:var(--a)}50%{border-color:transparent}} .hero-desc{font-size:1.05rem;color:rgba(255,255,255,.78);max-width:760px;line-height:1.8;margin:0 auto 36px} .hero-desc strong{color:#fff} /* Some stored descriptions come from a rich-text editor as several

fragments — render them inline so they still read as one paragraph instead of stacked blocks. */ .hero-desc p{display:inline;margin:0} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:44px} /* The hero always sits on a dark photo background regardless of site theme, so its outline button can't rely on the theme-dependent --t text color (which is near-black in light theme — invisible here). Hardcode it white. */ .hero-cta .btn-o{color:#fff;border-color:rgba(255,255,255,.3)} .hero-cta .btn-o:hover{color:var(--a);border-color:var(--a);background:rgba(255,255,255,.08)} /* Hero stats — translucent cards over the background image */ .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:640px;margin:0 auto} .stat-card{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16); border-radius:var(--r);padding:20px 14px;text-align:center; backdrop-filter:blur(6px);transition:all var(--tr); } .stat-card:hover{border-color:rgba(255,255,255,.32);transform:translateY(-2px)} .stn{ font-family:var(--fH);font-size:2rem;font-weight:800; color:#fff;line-height:1; } .stl{ font-family:var(--fM);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.65);margin-top:5px; } /* Social icon buttons (used in About / Contact sections) */ .si{ width:var(--ibox-md);height:var(--ibox-md);border-radius:var(--r2); background:var(--card);border:1px solid var(--b); color:var(--ts);display:flex;align-items:center;justify-content:center; font-size:.92rem;transition:all var(--tr); } .si:hover{border-color:var(--a);color:var(--a);background:var(--aGlow);transform:translateY(-3px)} /* ════════════════════════════════════════════════ ABOUT ════════════════════════════════════════════════ */ .about-grid{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start} /* Left column */ .about-left{display:flex;flex-direction:column;align-items:center;gap:22px} .av-wrap{position:relative;width:240px;height:240px;flex-shrink:0} .av-core{ width:158px;height:158px;border-radius:50%; background:var(--aG); display:flex;align-items:center;justify-content:center; font-family:var(--fH);font-size:2rem;font-weight:800;color:#fff; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2; box-shadow:var(--shadow-lg); } /* Simple photo card — replaces the old rotating-ring avatar treatment */ .about-photo{ width:100%;max-width:300px;aspect-ratio:1;border-radius:var(--r);overflow:hidden; border:1px solid var(--b);box-shadow:var(--shadow-md); } .about-photo img{width:100%;height:100%;object-fit:cover} .about-photo-fallback{ width:100%;height:100%;background:var(--aG); display:flex;align-items:center;justify-content:center; font-family:var(--fH);font-size:3rem;font-weight:800;color:#fff; } .role-card{ width:100%;background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:16px 18px;display:flex;align-items:center;gap:14px; transition:border-color var(--tr); } .role-card:hover{border-color:var(--bH)} .rc-ico{ width:var(--ibox-sm);height:var(--ibox-sm);border-radius:var(--r2); background:var(--aGlow);border:1px solid rgba(22,163,74,.18); color:var(--a);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .rc-t{font-size:.86rem;font-weight:500} .rc-s{font-family:var(--fM);font-size:.7rem;color:var(--a);margin-top:2px} .about-soc{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} /* Right column */ .about-lead{font-size:1.06rem;line-height:1.75;margin-bottom:14px} .about-body{font-size:.94rem;color:var(--ts);line-height:1.75;margin-bottom:12px} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .chip{ display:flex;align-items:center;gap:6px; font-family:var(--fM);font-size:.71rem;color:var(--ts); background:var(--surf);border:1px solid var(--b);border-radius:100px;padding:5px 13px; } .chip i{color:var(--a);font-size:.72rem} .mt28{margin-top:28px;display:inline-flex} /* ════════════════════════════════════════════════ SKILLS ════════════════════════════════════════════════ */ .sk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .sk-cat{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:var(--card-pad);box-shadow:var(--shadow-sm); transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr); } .sk-cat:hover{border-color:var(--bH);transform:translateY(-2px);box-shadow:var(--shadow-md)} .sk-hd{ display:flex;align-items:center;gap:9px; font-family:var(--fM);font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--a);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--b); } .sk-list{display:flex;flex-direction:column;gap:9px} .sk-item{ display:flex;align-items:center;gap:12px;padding:9px 13px; border-radius:var(--r2);background:var(--bg3); border:1px solid transparent;font-size:var(--fs-body-sm); transition:all var(--tr); } .sk-item:hover{border-color:var(--bH);background:var(--aGlow2);color:var(--a)} .sk-item i{font-size:1.05rem;width:19px;text-align:center;color:var(--a);opacity:.85;flex-shrink:0} .sk-item-img{width:19px;height:19px;object-fit:contain;flex-shrink:0} .sk-item--meta{justify-content:space-between} .sk-item--meta .sk-item-main{display:flex;align-items:center;gap:12px} .sk-item--meta .sk-item-lvl{font-family:var(--fM);font-size:.68rem;color:var(--tm);flex-shrink:0} /* ════════════════════════════════════════════════ SERVICES ════════════════════════════════════════════════ */ .sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sv-card{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:var(--card-pad);position:relative;overflow:hidden; box-shadow:var(--shadow-sm);transition:all var(--tr); } .sv-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:var(--aG2); transform:scaleX(0);transform-origin:left;transition:transform var(--tr); } .sv-card:hover{border-color:var(--bH);transform:translateY(-5px);box-shadow:var(--shadow-lg)} .sv-card:hover::before{transform:scaleX(1)} .sv-num{ position:absolute;top:20px;right:22px; font-family:var(--fH);font-size:2.8rem;font-weight:800; color:rgba(17,24,39,.05);line-height:1; } :root[data-theme="dark"] .sv-num{color:rgba(255,255,255,.06)} .sv-ico{ width:var(--ibox-lg);height:var(--ibox-lg);border-radius:var(--r2); background:var(--aGlow);border:1px solid rgba(22,163,74,.18); color:var(--a);display:flex;align-items:center;justify-content:center; font-size:1.2rem;margin-bottom:18px; } .sv-ico img{width:55%;height:55%;object-fit:contain} .sv-card h3{font-family:var(--fH);font-size:1.05rem;font-weight:700;margin-bottom:10px} .sv-card p{font-size:var(--fs-body-sm);color:var(--ts);line-height:1.7;margin-bottom:20px} .sv-tags{display:flex;flex-wrap:wrap;gap:6px} .sv-tag{ font-family:var(--fM);font-size:.66rem;color:var(--a); background:var(--aGlow);border:1px solid rgba(22,163,74,.15); padding:3px 10px;border-radius:100px; } .sv-card--link{display:block;color:inherit} .sv-more{margin-top:18px;font-family:var(--fM);font-size:.76rem;color:var(--a);display:flex;align-items:center;gap:6px} /* ════════════════════════════════════════════════ PROJECTS ════════════════════════════════════════════════ */ .pj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .pj-card{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--tr); } .pj-card:hover{border-color:var(--bH);transform:translateY(-5px);box-shadow:var(--shadow-lg)} .pj-thumb{position:relative;height:196px;overflow:hidden} .pj-price-badge{position:absolute;top:12px;right:12px;z-index:2;background:var(--card);box-shadow:var(--shadow-sm)} .pj-bg{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-size:4rem;color:rgba(255,255,255,.35); transition:transform .5s ease; } .pj-card:hover .pj-bg{transform:scale(1.07)} .pb1{background:linear-gradient(135deg,#15803d,#16a34a)} .pb2{background:linear-gradient(135deg,#065f46,#059669)} .pb3{background:linear-gradient(135deg,#16a34a,#059669)} .pb4{background:linear-gradient(135deg,#166534,#0d9488)} .pj-body{padding:22px 20px} .pj-techs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px} .pj-tech{ font-family:var(--fM);font-size:.64rem;color:var(--a2); background:rgba(5,150,105,.07);border:1px solid rgba(5,150,105,.18); padding:2px 9px;border-radius:100px; } .pj-name{font-family:var(--fH);font-size:1.02rem;font-weight:700;margin-bottom:7px} .pj-desc{font-size:var(--fs-body-sm);color:var(--ts);line-height:1.65} .pj-links{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:16px;padding-top:16px;border-top:1px solid var(--b); } .pj-icon-link{ width:32px;height:32px;border-radius:var(--r2);background:var(--bg3); display:flex;align-items:center;justify-content:center;color:var(--ts); transition:all var(--tr);font-size:.85rem; } .pj-icon-link:hover{background:var(--aGlow);color:var(--a)} /* "Next Project/Product" card — closes out a detail page with a clear next step instead of a plain text link */ .next-card{ display:flex;align-items:center;justify-content:space-between;gap:20px; margin-top:64px;padding:28px 30px; background:var(--card);border:1px solid var(--b);border-radius:var(--r); box-shadow:var(--shadow-sm);transition:border-color var(--tr),box-shadow var(--tr); } .next-card:hover{border-color:var(--a);box-shadow:var(--shadow-md)} .next-card:hover .next-card-arrow{background:var(--a);color:#fff;transform:translateX(4px)} .next-card-text{display:flex;flex-direction:column;gap:8px;min-width:0} .next-card-label{ display:flex;align-items:center;gap:10px; font-family:var(--fM);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a); } .next-card-title{ font-family:var(--fH);font-size:1.3rem;font-weight:700;color:var(--t); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .next-card-arrow{ flex-shrink:0;width:48px;height:48px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--aGlow);color:var(--a);font-size:1rem; transition:all var(--tr); } /* ════════════════════════════════════════════════ YOUTUBE / TUTORIALS SECTION ════════════════════════════════════════════════ */ .yt-box{ background:linear-gradient(135deg,rgba(22,163,74,.06) 0%,rgba(5,150,105,.04) 100%); border:1px solid rgba(22,163,74,.14); border-radius:var(--r);padding:60px 48px; display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start; } .yt-title{ font-family:var(--fH);font-size:clamp(1.6rem,3.5vw,2.3rem); font-weight:800;line-height:1.2;margin-bottom:14px; } .yt-em{color:var(--a)} .yt-sub{font-size:.95rem;color:var(--ts);line-height:1.72;margin-bottom:28px} .yt-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px} .yt-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .yt-count{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm);transition:all var(--tr); } .yt-count:hover{border-color:var(--bH);transform:translateY(-2px);box-shadow:var(--shadow-md)} .yt-n{font-family:var(--fH);font-size:1.7rem;font-weight:800;color:var(--a);line-height:1} .yt-l{font-family:var(--fM);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ts);margin-top:5px} /* Featured YouTube videos — thumbnail cards linking out to the actual video, rather than embedding real iframes, to avoid loading YouTube's heavy player JS for every visitor who never clicks play. */ .yt-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px} .yt-video-card{ display:block;border-radius:var(--r2);overflow:hidden; background:var(--card);border:1px solid var(--b); transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr); } .yt-video-card:hover{border-color:var(--bH);transform:translateY(-3px);box-shadow:var(--shadow-md)} .yt-video-thumb{ position:relative;aspect-ratio:16/9;overflow:hidden; background:#0b1120;display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.35);font-size:2.2rem; } .yt-video-thumb img{width:100%;height:100%;object-fit:cover} .yt-video-play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.28);color:#fff;font-size:1.1rem; transition:background var(--tr); } .yt-video-card:hover .yt-video-play{background:rgba(0,0,0,.45)} .yt-video-title{padding:12px 14px;font-size:.85rem;font-weight:600;color:var(--t);line-height:1.4} /* ════════════════════════════════════════════════ GOOGLE ADSENSE UNITS ════════════════════════════════════════════════ */ .ad-unit{margin:28px 0;text-align:center} .ad-unit-label{ display:block;font-family:var(--fM);font-size:.6rem;letter-spacing:.08em; text-transform:uppercase;color:var(--tm);margin-bottom:8px; } .yt-topics{display:flex;flex-direction:column;gap:11px} .yt-t{ display:flex;align-items:center;gap:14px; background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:14px 18px;transition:all var(--tr); } .yt-t:hover{border-color:var(--bH);background:var(--aGlow2)} .yt-ti{ width:var(--ibox-sm);height:var(--ibox-sm);border-radius:var(--r2); background:var(--aGlow);border:1px solid rgba(22,163,74,.18); color:var(--a);display:flex;align-items:center;justify-content:center; font-size:.92rem;flex-shrink:0; } .yt-tt{font-size:.89rem;font-weight:500} .yt-ts{font-family:var(--fM);font-size:.68rem;color:var(--ts);margin-top:2px} /* ════════════════════════════════════════════════ TESTIMONIALS ════════════════════════════════════════════════ */ .tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tm-card{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:var(--card-pad);box-shadow:var(--shadow-sm);transition:all var(--tr);position:relative;overflow:hidden; } .tm-card::after{ content:'\201C';position:absolute;top:14px;right:20px; font-family:var(--fH);font-size:4rem;font-weight:800; color:rgba(22,163,74,.07);line-height:1; } .tm-card:hover{border-color:var(--bH);transform:translateY(-3px);box-shadow:var(--shadow-md)} .stars{color:#f59e0b;font-size:.8rem;letter-spacing:2px;margin-bottom:14px} .tm-txt{font-size:var(--fs-body-sm);color:var(--ts);line-height:1.72;margin-bottom:20px;font-style:italic} .tm-auth{display:flex;align-items:center;gap:12px} .tm-av{ width:38px;height:38px;border-radius:50%;flex-shrink:0; background:var(--aG); display:flex;align-items:center;justify-content:center; font-family:var(--fH);font-size:.88rem;font-weight:700;color:#fff; } .tm-name{font-size:.86rem;font-weight:500} .tm-role{font-family:var(--fM);font-size:.68rem;color:var(--ts);margin-top:2px} /* ════════════════════════════════════════════════ CONTACT ════════════════════════════════════════════════ */ .ct-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:start} .ct-body{font-size:.95rem;color:var(--ts);line-height:1.75;margin-bottom:28px;max-width:400px} .ct-dets{display:flex;flex-direction:column;gap:15px;margin-bottom:28px} .cd{display:flex;align-items:center;gap:14px} .cd-ico{ width:var(--ibox-md);height:var(--ibox-md);border-radius:var(--r2); background:var(--aGlow);border:1px solid rgba(22,163,74,.18); color:var(--a);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .cd-l{font-family:var(--fM);font-size:.66rem;color:var(--tm);letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px} .cd-v{font-size:.9rem;font-weight:500} .cd-v a{color:var(--a);transition:opacity var(--tr)} .cd-v a:hover{opacity:.7} .soc-list{display:flex;flex-direction:column;gap:8px} .soc-row{ display:flex;align-items:center;gap:12px; padding:11px 16px;border-radius:var(--r2); background:var(--card);border:1px solid var(--b); transition:all var(--tr); } .soc-row i{width:16px;text-align:center;color:var(--a);flex-shrink:0} .soc-row span{font-family:var(--fM);font-size:.72rem;color:var(--ts)} .soc-row:hover{border-color:var(--bH);background:var(--aGlow2)} /* Form */ .form-box{ background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:38px 32px;box-shadow:var(--shadow-md); } .form{display:flex;flex-direction:column;gap:20px} .fg{display:flex;flex-direction:column;gap:7px} .fg label{ font-family:var(--fM);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ts); } .fg input,.fg textarea,.fg select{ background:var(--bg3);border:1.5px solid var(--b);border-radius:var(--r2); color:var(--t);font-family:var(--fB);font-size:.92rem; padding:12px 15px;outline:none;resize:vertical;width:100%; transition:border-color var(--tr),box-shadow var(--tr); } .fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(22,163,74,.1)} .fg input::placeholder,.fg textarea::placeholder{color:var(--tm)} .fg input.err,.fg textarea.err{border-color:var(--danger)} .ferr{font-family:var(--fM);font-size:.68rem;color:var(--danger);min-height:14px} .fsuc.is-error{background:rgba(248,113,113,.12);color:var(--danger);border-color:rgba(248,113,113,.3)} .fsuc{ display:flex;align-items:center;gap:9px; background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25); border-radius:var(--r2);padding:13px 17px; color:var(--a);font-size:.88rem; } /* The shared .btn class is sized for compact nav/pill buttons (6px vertical padding) — too thin for this form's full-width submit CTA, so give it its own padding to match the visual weight of the inputs above it. */ .form button[type="submit"]{padding:14px 15px;font-size:.88rem;} /* ════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════ */ footer{background:var(--bg2);border-top:1px solid var(--b);padding:56px 0 22px} .ft-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} .ft-col-brand .logo{display:inline-flex;gap:10px;font-size:1.3rem;margin-bottom:14px} .ft-col-brand .logo-icon{font-size:1.05rem} .ft-sub{font-size:.88rem;color:var(--ts);line-height:1.65;margin-bottom:18px;max-width:320px} .ft-col-title{ font-family:var(--fM);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase; color:var(--t);margin-bottom:16px; } .ft-col-links{display:flex;flex-direction:column;gap:11px} .ft-col-links a{font-size:.88rem;color:var(--ts);transition:color var(--tr)} .ft-col-links a:hover{color:var(--a)} .ft-col-links-icon a,.ft-col-links-icon span{display:inline-flex;align-items:center;gap:9px} .ft-col-links-icon a i,.ft-col-links-icon span i{width:14px;text-align:center;font-size:.8rem;color:var(--tm);flex:none} .ft-col-links-icon a:hover i{color:var(--a)} .ft-soc{display:flex;gap:8px;flex-wrap:wrap} .ft-btm{ border-top:1px solid var(--b);padding-top:20px; font-family:var(--fM);font-size:.67rem;color:var(--t);text-align:center; } .ft-btm-link{color:var(--t);text-decoration:underline;text-underline-offset:2px;transition:color var(--tr)} .ft-btm-link:hover{color:var(--a)} /* ════════════════════════════════════════════════ FOCUS STATES — visible keyboard-focus ring wherever the browser default outline is otherwise the only cue ════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .drw-link:focus-visible, .si:focus-visible, .filter-pill:focus-visible, .page-link:focus-visible, .content-card:focus-visible, .pj-card:focus-visible, .sv-card:focus-visible, .tm-card:focus-visible, .soc-row:focus-visible, .ft-col-links a:focus-visible, .form-control:focus-visible{ outline:2px solid var(--a);outline-offset:3px;border-radius:var(--r2); } /* ════════════════════════════════════════════════ SCROLL ANIMATIONS — handled by AOS (see layouts/site.blade.php for the CDN include and site-scripts.blade.php for AOS.init()). ════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════ EXPERIENCE TIMELINE ════════════════════════════════════════════════ */ .tl{position:relative;max-width:760px;margin:0 auto;padding-left:36px} .tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:linear-gradient(to bottom,var(--a),var(--b) 90%)} .tl-item{position:relative;padding-bottom:44px} .tl-item:last-child{padding-bottom:0} .tl-dot{position:absolute;left:-36px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--bg);border:2px solid var(--a);box-shadow:0 0 0 4px var(--bg)} .tl-item.current .tl-dot{background:var(--a);box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(22,163,74,.5)} .tl-card{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-sm);transition:border-color var(--tr),box-shadow var(--tr)} .tl-card:hover{border-color:var(--bH);box-shadow:var(--shadow-md)} .tl-period{font-family:var(--fM);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--a);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .tl-current-badge{background:var(--aGlow);border:1px solid rgba(22,163,74,.25);color:var(--a);padding:2px 10px;border-radius:100px;font-size:.64rem} .tl-role{font-family:var(--fH);font-size:1.15rem;font-weight:700;margin-bottom:4px} .tl-company{font-size:.88rem;color:var(--ts);margin-bottom:4px;display:flex;align-items:center;gap:8px} .tl-location{font-family:var(--fM);font-size:.7rem;color:var(--tm);margin-bottom:14px} .tl-desc{font-size:.88rem;color:var(--ts);line-height:1.75;margin-bottom:14px} /* ════════════════════════════════════════════════ GENERIC CONTENT PAGES (Tutorials / Courses / Blogs) ════════════════════════════════════════════════ */ /* No overflow:hidden here — it's a classic CSS trap: any ancestor with overflow other than visible silently breaks position:sticky on a descendant (like the blog post's TOC sidebar). body already has overflow-x:hidden as a page-wide safety net against the decorative blur circle below poking past the edge, so this doesn't need its own. */ .page-hero,.detail-hero{position:relative} .page-hero::before,.detail-hero::before{ content:'';position:absolute;top:-140px;right:-120px;width:480px;height:480px; background:radial-gradient(circle,rgba(22,163,74,.10),transparent 70%); filter:blur(80px);pointer-events:none;z-index:0; } .page-hero .wrap,.detail-hero .wrap{position:relative;z-index:1} .page-hero{padding:calc(var(--nav) + 64px) 0 72px} .page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .form-control{ background:var(--bg3);border:1.5px solid var(--b);border-radius:var(--r2); color:var(--t);font-family:var(--fB);font-size:.92rem; padding:12px 15px;outline:none;width:100%;max-width:420px; transition:border-color var(--tr),box-shadow var(--tr);margin-bottom:24px; } .form-control::placeholder{color:var(--tm)} .form-control:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(22,163,74,.1)} /* Category + Tag filters as two clearly separated, labeled groups instead of one long wrapping row mixing everything together */ .filters{display:flex;flex-direction:column;gap:20px;margin-bottom:40px} .filter-group{display:flex;flex-direction:column;gap:10px} .filter-group-heading{ font-family:var(--fM);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase; color:var(--tm); } .filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .filter-pill--sm{padding:5px 14px;font-size:.68rem} .filter-pill--tag{color:var(--a2)} .filter-pill--tag:hover,.filter-pill--tag.on{border-color:rgba(5,150,105,.35);color:var(--a2);background:rgba(5,150,105,.06)} .tag-extra{display:none} .filter-toggle{background:none;border:1px dashed var(--b);color:var(--a);cursor:pointer} .filter-toggle:hover{border-color:var(--a);background:var(--aGlow2)} .content-card{ position:relative;background:var(--card);border:1px solid var(--b);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--tr);display:flex;flex-direction:column; } /* Makes the whole card clickable via a single real link (the title), instead of only the title text itself — extends that link's hit area over the entire card with an invisible overlay. */ .stretched-link::after{content:'';position:absolute;inset:0;z-index:1} .content-card:hover{border-color:var(--bH);transform:translateY(-5px);box-shadow:var(--shadow-lg)} .content-thumb{position:relative;height:170px;overflow:hidden;background:linear-gradient(135deg,#16a34a,#059669);display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(255,255,255,.35)} .content-thumb img{width:100%;height:100%;object-fit:cover} /* Product cards reuse .content-card everywhere else; this is the one bit unique to them — a "Live Demo" pill that slides up over the thumbnail on hover, sitting above the .stretched-link so it stays clickable on its own instead of just triggering the card's product-page link. */ .pr-demo-link{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;align-items:center;justify-content:center;gap:8px; padding:11px;font-family:var(--fM);font-size:.72rem;font-weight:600;letter-spacing:.02em; color:#fff;background:rgba(15,23,20,.72);backdrop-filter:blur(2px); transform:translateY(100%);transition:transform .3s ease; } .content-card:hover .pr-demo-link{transform:translateY(0)} .content-body{padding:20px;display:flex;flex-direction:column;flex-grow:1} .content-meta{font-family:var(--fM);font-size:.64rem;color:var(--ts);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap} .content-title{font-family:var(--fH);font-size:1.02rem;font-weight:700;margin-bottom:8px} .content-title a{transition:color var(--tr)} .content-title a:hover{color:var(--a)} .content-desc{font-size:var(--fs-body-sm);color:var(--ts);line-height:1.65;margin-bottom:14px;flex-grow:1} .content-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto} .content-tag{font-family:var(--fM);font-size:.64rem;color:var(--a2);background:rgba(5,150,105,.07);border:1px solid rgba(5,150,105,.18);padding:2px 9px;border-radius:100px} .badge-level{font-family:var(--fM);font-size:.64rem;color:var(--a);background:var(--aGlow);border:1px solid rgba(22,163,74,.18);padding:2px 9px;border-radius:100px} /* Colorful tag/category chips — deterministic per name via the chip_color_class() helper (app/helpers.php), so tags/categories aren't all the same green while staying consistent: the same name always gets the same color everywhere. Applied as a second class alongside .content-tag/.pj-tech/.sv-tag/.filter-pill--tag. */ .chip-c0{color:var(--a2);background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.2)} .chip-c1{color:#2563eb;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.2)} .chip-c2{color:#9333ea;background:rgba(147,51,234,.08);border-color:rgba(147,51,234,.2)} .chip-c3{color:#ea580c;background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.2)} .chip-c4{color:#db2777;background:rgba(219,39,119,.08);border-color:rgba(219,39,119,.2)} .chip-c5{color:#0891b2;background:rgba(8,145,178,.08);border-color:rgba(8,145,178,.2)} .chip-c6{color:#d97706;background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.2)} .chip-c7{color:#dc2626;background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.2)} .chip-c8{color:#4f46e5;background:rgba(79,70,229,.08);border-color:rgba(79,70,229,.2)} /* ════════════════════════════════════════════════ PRODUCTS — pinned scroll stack (GSAP ScrollTrigger) Each .pin-card fills the same box, absolutely positioned; JS slides them up one at a time while the section is pinned. Falls back to a plain stacked list — no absolute positioning — below the 960px breakpoint and for prefers-reduced-motion, since JS gates the pin animation off there too. See site-scripts.blade.php for the ScrollTrigger setup. */ .pin-stack{ position:relative;max-width:var(--max);margin:28px auto 0; /* Sized off the actual viewport height (not a fixed px/vh guess) so the card's own content always has room to breathe — on shorter laptop screens a fixed clamp minimum could exceed what's left below the pinned card's top, clipping the bottom of the content. 130px approximates the navbar + the gap above the pinned card + a little breathing room below it once pinned (see the ScrollTrigger start calc in site-scripts.blade.php, which is what actually determines that pinned position). */ height:clamp(420px,calc(100vh - 130px),620px); /* Cards not yet revealed sit at yPercent:100 — on an absolutely positioned box that still extends past the container's own bottom edge into whatever comes after it in the page, so this must stay hidden. The upward "peek" recede (max ~42px, see the JS) stays safely inside the 56px top buffer either way, so it's unaffected by this. */ overflow:hidden; } .pin-card{ /* top:56px leaves headroom for the stacked cards behind the active one to peek upward as they recede (see the ScrollTrigger tween in site-scripts.blade.php) without being clipped by the container. */ position:absolute;top:56px;left:22px;right:22px;bottom:0; background:var(--card);border:1px solid var(--b);border-radius:var(--r); box-shadow:var(--shadow-lg);overflow:hidden;will-change:transform; } .pin-card-inner{display:grid;grid-template-columns:1.1fr 1fr;height:100%} /* overflow:hidden, never :auto — this section pins and drives the whole page's scroll via GSAP, so an inner scrollable box here would capture the mouse wheel the moment the cursor sits over it, stalling the pin entirely until that inner content finished scrolling first. Content is sized/limited (see the key_features slice in home/index.blade.php) to fit without needing to scroll; anything that still overflows just clips instead of trapping input. */ .pin-card-text{padding:34px 44px;display:flex;flex-direction:column;overflow:hidden} .pin-card-text .content-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px} .pin-card-count{margin-left:auto;font-family:var(--fM);font-size:.72rem;color:var(--tm)} .pin-card-title{font-family:var(--fH);font-size:1.4rem;line-height:1.3;color:var(--t);margin-bottom:10px} .pin-card-desc{color:var(--ts);line-height:1.6;margin-bottom:14px} .pin-card-features{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px} .pin-card-features li{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;color:var(--ts)} .pin-card-features i{color:var(--a);font-size:.76rem;margin-top:4px} .pin-card-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto} .pin-card-visual{ position:relative;background:linear-gradient(135deg,#16a34a,#059669); display:flex;align-items:center;justify-content:center;overflow:hidden; } .pin-card-visual img{width:100%;height:100%;object-fit:cover} .pin-card-visual i{font-size:5rem;color:rgba(255,255,255,.4)} .pin-card-tech{position:absolute;left:20px;bottom:20px;right:20px;display:flex;flex-wrap:wrap;gap:6px} .pin-card-tech span{ font-family:var(--fM);font-size:.68rem;color:#fff;background:rgba(0,0,0,.28); backdrop-filter:blur(4px);padding:4px 10px;border-radius:100px; } @media(max-width:960px){ .pin-stack{height:auto;margin-top:24px;padding:0 22px} .pin-card{position:static !important;transform:none !important;margin-bottom:22px} .pin-card:last-child{margin-bottom:0} .pin-card-inner{grid-template-columns:1fr} /* Image first, text below — the desktop side-by-side order (text, then visual, in the markup) reads wrong once stacked into one column. */ .pin-card-visual{min-height:200px;order:1} .pin-card-text{padding:28px 24px;order:2} } .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px} .filter-pill{ font-family:var(--fM);font-size:.74rem;color:var(--ts); background:var(--card);border:1px solid var(--b);border-radius:100px; padding:8px 18px;transition:all var(--tr); } .filter-pill:hover,.filter-pill.on{border-color:var(--bH);color:var(--a);background:var(--aGlow2)} .empty-state{text-align:center;padding:60px 20px;color:var(--ts)} .empty-state i{font-size:2.4rem;color:var(--tm);margin-bottom:16px;display:block} .detail-hero{padding:calc(var(--nav) + 56px) 0 56px} .detail-body{font-size:.98rem;color:var(--t);line-height:1.9} .detail-body h1{font-family:var(--fH);font-size:1.7rem;margin:36px 0 16px;color:var(--t)} .detail-body h2,.detail-body h3{font-family:var(--fH);margin:32px 0 14px;color:var(--t)} .detail-body h4,.detail-body h5,.detail-body h6{font-family:var(--fH);margin:26px 0 12px;color:var(--t);font-size:1rem} .detail-body p{margin-bottom:18px;color:var(--ts)} .detail-body ul,.detail-body ol{margin:0 0 18px 22px;color:var(--ts)} .detail-body a{color:var(--a);text-decoration:underline} .detail-body img{border-radius:var(--r);margin:18px 0} .detail-body hr{border:none;border-top:1px solid var(--b);margin:32px 0} .detail-body blockquote{ margin:0 0 18px;padding:14px 20px;border-left:3px solid var(--a); background:var(--surf);border-radius:0 var(--r2) var(--r2) 0;color:var(--ts);font-style:italic; } /* Light-gray code blocks — matches the technical-publication reference style rather than a dark-on-light "docs" convention */ .detail-body code{ font-family:var(--fM);font-size:.85em;color:var(--a); background:var(--bg3);padding:2px 6px;border-radius:4px; } /* Code blocks stay dark regardless of site theme (like GitHub/most docs sites) since that's what the loaded highlight.js theme expects and what reads best for code either way — see site-scripts.blade.php for the syntax-highlighting + copy-button wiring. */ .detail-body pre{ position:relative;background:#0d1117;border:1px solid rgba(22,163,74,.25); border-radius:var(--r2);margin:0 0 20px;overflow:hidden;box-shadow:var(--shadow-sm); } .detail-body pre code{ display:block;overflow-x:auto;background:none; padding:18px 46px 18px 20px;font-size:.86rem;line-height:1.7;color:#e6edf3; scrollbar-width:none; } .detail-body pre code::-webkit-scrollbar{display:none} .code-copy-btn{ position:absolute;top:10px;right:10px;z-index:2; width:28px;height:28px;border-radius:7px; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.65);cursor:pointer;font-size:.75rem; transition:all var(--tr); } .code-copy-btn:hover{background:rgba(22,163,74,.2);border-color:var(--a);color:#fff} .detail-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem} .detail-body th,.detail-body td{padding:10px 14px;border:1px solid var(--b);text-align:left} .detail-body th{font-family:var(--fM);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tm);background:var(--card)} .detail-body td{color:var(--ts)} /* Shared detail-page subheading + list, replacing repeated inline styles */ .detail-subhead{font-family:var(--fH);font-size:1.1rem;font-weight:700;margin:32px 0 14px;color:var(--t)} .detail-subhead:first-child{margin-top:0} .related-title{font-family:var(--fH);font-size:1.4rem;font-weight:800;margin:0 0 20px;color:var(--t)} .detail-list{margin:0;padding:0;list-style:none;color:var(--ts);font-size:.94rem;line-height:1.9} .detail-list li{display:flex;align-items:flex-start;gap:10px} .detail-list i{color:var(--a);margin-top:6px;flex-shrink:0} /* Project gallery grid (replaces inline grid-template-columns so it collapses on mobile) */ .gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .gallery-grid img{width:100%;border-radius:var(--r);cursor:zoom-in;transition:transform .25s ease} .gallery-grid img:hover{transform:scale(1.015)} /* Gallery lightbox — built once per page in site-scripts.blade.php and reused for every .gallery-grid found (products, projects, ...). */ .lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(6,9,17,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease;touch-action:none} .lightbox-overlay.open{opacity:1;visibility:visible} .lightbox-stage{position:relative;max-width:88vw;max-height:78vh;display:flex;align-items:center;justify-content:center} .lightbox-stage img{max-width:88vw;max-height:78vh;width:auto;height:auto;border-radius:10px;box-shadow:var(--shadow-lg);-webkit-user-drag:none;user-select:none} .lightbox-close,.lightbox-nav{position:fixed;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;padding:0;cursor:pointer;transition:background .2s,transform .2s} .lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.3)} .lightbox-close{top:20px;right:24px;width:44px;height:44px} .lightbox-close svg{width:20px;height:20px} .lightbox-nav{top:50%;transform:translateY(-50%);width:56px;height:56px} .lightbox-nav svg{width:26px;height:26px} .lightbox-nav:hover{transform:translateY(-50%) scale(1.06)} .lightbox-prev{left:20px} .lightbox-next{right:20px} .lightbox-counter{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.02em} @media (max-width:640px){ .lightbox-prev{left:8px} .lightbox-next{right:8px} .lightbox-close{top:12px;right:12px;width:38px;height:38px} .lightbox-nav{width:46px;height:46px} .lightbox-nav svg{width:22px;height:22px} } /* Blog post — content + sticky "on this page" table of contents sidebar (headings/scrollspy generated client-side, see site-scripts.blade.php) */ /* No max-width override here — inherits .wrap's var(--max), so the blog content's left/right edges line up exactly with the navbar's, instead of sitting inset from them at a narrower custom width. */ .blog-layout{display:grid;grid-template-columns:1fr 240px;gap:56px;align-items:start} .blog-main{min-width:0} .toc-aside{position:sticky;top:calc(var(--nav) + 24px)} .toc-box{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:20px} .toc-label{font-family:var(--fM);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tm);margin-bottom:14px} .toc-list{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - var(--nav) - 80px);overflow-y:auto} .toc-list a{display:block;font-size:.82rem;color:var(--ts);padding:7px 10px;border-radius:var(--r2);border-left:2px solid transparent;transition:all var(--tr);line-height:1.4} .toc-list a.h3{padding-left:22px;font-size:.78rem} .toc-list a:hover{color:var(--t);background:var(--bg3)} .toc-list a.on{color:var(--a);border-left-color:var(--a);background:var(--aGlow2);font-weight:600} /* Share row */ .share-row{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap} .share-label{font-family:var(--fM);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm)} .share-btns{display:flex;gap:8px} .share-btns button.si{cursor:pointer} /* FAQ accordion — smooth height animation via the grid 0fr/1fr technique, since max-height transitions either jump or need a guessed end value */ .faq-list{display:flex;flex-direction:column;gap:10px} .faq-item{background:var(--card);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;transition:border-color var(--tr)} .faq-item:hover{border-color:var(--bH)} .faq-q{ width:100%;background:none;border:none;padding:16px 18px;text-align:left;font-family:inherit; display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:.94rem;font-weight:600;color:var(--t);cursor:pointer; } .faq-q i{color:var(--a);font-size:.8rem;transition:transform .3s ease;flex-shrink:0} .faq-q[aria-expanded="true"] i{transform:rotate(180deg)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease} .faq-item.open .faq-a{grid-template-rows:1fr} .faq-a-inner{overflow:hidden} .faq-a p{margin:14px 18px 18px;color:var(--ts);font-size:.9rem;line-height:1.75} .tl-logo{width:20px;height:20px;object-fit:contain;border-radius:4px;flex-shrink:0} .av-wrap--sm{width:90px;height:90px} .av-core--sm{width:90px;height:90px;font-size:1.4rem;position:static;transform:none;box-shadow:none} .av-photo{padding:0;overflow:hidden} .av-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .link-arrow{font-family:var(--fM);font-size:.78rem;color:var(--a);display:inline-flex;align-items:center;gap:6px} .curriculum-chapter{background:var(--card);border:1px solid var(--b);border-radius:var(--r);padding:20px 22px;margin-bottom:14px} .curriculum-chapter h4{font-family:var(--fH);font-size:.95rem;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px} .curriculum-chapter-meta{font-family:var(--fM);font-size:.68rem;font-weight:400;color:var(--tm);white-space:nowrap} .curriculum-lesson{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--b);font-size:.87rem;color:var(--ts)} .curriculum-lesson:first-of-type{border-top:none} .curriculum-lesson i{color:var(--a);width:18px} .curriculum-lesson-num{font-family:var(--fM);font-size:.72rem;color:var(--tm);width:20px;flex-shrink:0} .curriculum-lesson-dur{margin-left:auto;color:var(--tm);font-family:var(--fM);font-size:.78rem} .pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px} .pagination-summary{font-size:.82rem;color:var(--ts)} .pagination-wrap :is(.pagination){display:flex;gap:6px;flex-wrap:wrap;justify-content:center;list-style:none;font-family:var(--fM);font-size:.8rem} .pagination-wrap .page-link{ display:inline-flex;align-items:center;justify-content:center; min-width:36px;height:36px;padding:0 10px;border-radius:var(--r2); background:var(--card);border:1px solid var(--b);color:var(--ts); } .pagination-wrap .active .page-link{background:var(--a);color:#fff;border-color:var(--a)} .pagination-wrap .disabled .page-link{opacity:.4} /* ════════════════════════════════════════════════ NAV UTILITIES — theme toggle + search trigger ════════════════════════════════════════════════ */ .theme-toggle{ width:var(--ibox-md);height:var(--ibox-md);border-radius:var(--r2); background:var(--card);border:1px solid var(--b); color:var(--ts);display:flex;align-items:center;justify-content:center; font-size:.92rem;transition:all var(--tr);flex-shrink:0; } .theme-toggle:hover{border-color:var(--a);color:var(--a)} .theme-toggle .fa-sun{display:none} :root[data-theme="dark"] .theme-toggle .fa-moon{display:none} :root[data-theme="dark"] .theme-toggle .fa-sun{display:inline-block} .search-trigger{ display:flex;align-items:center;gap:10px; background:var(--bg3);border:1px solid var(--b);border-radius:var(--r2); padding:9px 12px;color:var(--tm);font-family:var(--fB);font-size:.85rem; transition:all var(--tr);flex-shrink:0; } .search-trigger:hover{border-color:var(--bH)} .search-trigger kbd{ font-family:var(--fM);font-size:.68rem;color:var(--ts); background:var(--card);border:1px solid var(--b);border-radius:5px;padding:2px 6px; } .nav-actions{display:flex;align-items:center;gap:10px} @media(max-width:640px){ .search-trigger span,.search-trigger kbd{display:none} .search-trigger{padding:9px} } /* ════════════════════════════════════════════════ SEARCH MODAL (Ctrl+K command palette) ════════════════════════════════════════════════ */ #searchModal{ position:fixed;inset:0;z-index:9500; background:rgba(15,17,23,.6);backdrop-filter:blur(4px); display:flex;align-items:flex-start;justify-content:center; padding:12vh 20px 20px; opacity:0;pointer-events:none;transition:opacity .2s ease; } #searchModal.on{opacity:1;pointer-events:all} .search-panel{ width:100%;max-width:600px;background:var(--card);border:1px solid var(--b); border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden; transform:translateY(-12px);transition:transform .2s ease; } #searchModal.on .search-panel{transform:translateY(0)} .search-input-row{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--b)} .search-input-row i{color:var(--tm)} .search-input-row input{ flex:1;background:none;border:none;outline:none; font-family:var(--fB);font-size:1rem;color:var(--t); } .search-input-row input::placeholder{color:var(--tm)} .search-input-row kbd{ font-family:var(--fM);font-size:.68rem;color:var(--ts); background:var(--bg3);border:1px solid var(--b);border-radius:5px;padding:2px 6px; } .search-results{max-height:60vh;overflow-y:auto;padding:8px} .search-result{ display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:var(--r2); transition:background var(--tr); } .search-result:hover,.search-result:focus-visible{background:var(--aGlow2)} .search-result-type{font-family:var(--fM);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--a)} .search-result-title{font-size:.92rem;font-weight:500} .search-result-excerpt{font-size:.8rem;color:var(--ts)} .search-empty{padding:32px 20px;text-align:center;color:var(--tm);font-size:.88rem} /* ════════════════════════════════════════════════ NEWSLETTER CTA BAND ════════════════════════════════════════════════ */ .nl-band{ background:var(--aG);border-radius:var(--r); padding:52px 48px;display:flex;align-items:center;justify-content:space-between; gap:32px;flex-wrap:wrap;color:#fff; position:relative;overflow:hidden; } /* Optional admin-uploaded photo behind the band, same layered pattern as the hero background: full-bleed image + tinted overlay so the brand green + white text stay legible over any photo. */ /* inset:-1px (not 0) so the image/overlay overscan the rounded, clipped container by a hair on every edge — masks the 1px compositing seam Chrome sometimes leaves at the boundary of a border-radius+overflow:hidden parent with an absolutely-positioned, object-fit:cover child image. */ .nl-band-bg{position:absolute;inset:-1px;z-index:0} .nl-band-bg img{width:100%;height:100%;object-fit:cover} .nl-band-overlay{ position:absolute;inset:-1px; /* Bottom stop must hit full opacity, not .92 — otherwise a sliver of whatever's bright in the uploaded photo (sky, monitor glow, etc.) shows through right at the bottom edge as a stray 1px highlight. */ background:linear-gradient(180deg,rgba(6,10,18,.55) 0%,rgba(6,10,18,.72) 55%,rgba(6,10,18,1) 100%); } .nl-band.has-bg .nl-copy,.nl-band.has-bg .nl-form{position:relative;z-index:1} .nl-copy h3{font-family:var(--fH);font-size:1.5rem;font-weight:800;margin-bottom:6px} .nl-copy p{font-size:.92rem;color:rgba(255,255,255,.85)} .nl-form{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0} .nl-form input{ background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3); border-radius:var(--r2);color:#fff;font-family:var(--fB);font-size:.78rem; padding:13px 15px;outline:none;min-width:240px; } .nl-form input::placeholder{color:rgba(255,255,255,.7)} .nl-form button{ background:#fff;color:var(--a);border:none;border-radius:var(--r2); padding:13px 20px;font-family:var(--fB);font-weight:600;font-size:.78rem; cursor:pointer;transition:opacity var(--tr);white-space:nowrap; } .nl-form button:hover{opacity:.9} .nl-msg{font-size:.85rem;margin-top:8px;color:#fff} /* ════════════════════════════════════════════════ COURSE AVAILABILITY BADGES ════════════════════════════════════════════════ */ .avail-badge{ font-family:var(--fM);font-size:.64rem;font-weight:600;letter-spacing:.06em; padding:3px 10px;border-radius:100px;display:inline-block; } .avail-free{background:var(--aGlow);color:var(--a);border:1px solid rgba(22,163,74,.2)} .avail-premium{background:rgba(217,119,6,.1);color:#d97706;border:1px solid rgba(217,119,6,.25)} .avail-soon{background:rgba(91,100,114,.12);color:var(--ts);border:1px solid var(--b)} .avail-progress{background:rgba(5,150,105,.1);color:var(--a2);border:1px solid rgba(5,150,105,.25)} /* ════════════════════════════════════════════════ RESOURCES HUB ════════════════════════════════════════════════ */ .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .res-card{ display:block;background:var(--card);border:1px solid var(--b);border-radius:var(--r); padding:var(--card-pad);box-shadow:var(--shadow-sm);transition:all var(--tr);color:inherit; } .res-card:hover{border-color:var(--bH);transform:translateY(-4px);box-shadow:var(--shadow-md)} .res-type{ font-family:var(--fM);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em; color:var(--a);margin-bottom:10px;display:block; } .res-card h3{font-family:var(--fH);font-size:1.02rem;font-weight:700;margin-bottom:8px} .res-card p{font-size:var(--fs-body-sm);color:var(--ts);line-height:1.6} .res-cat-heading{ font-family:var(--fM);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase; color:var(--tm);margin:40px 0 16px; } .res-cat-heading:first-of-type{margin-top:0} /* ════════════════════════════════════════════════ FEATURED / EDITORIAL BLOG & PROJECT LAYOUT ════════════════════════════════════════════════ */ .featured-post{ display:grid;grid-template-columns:1.1fr 1fr;gap:0; background:var(--card);border:1px solid var(--b);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:40px; } .featured-post-thumb{position:relative;min-height:280px;overflow:hidden;background:linear-gradient(135deg,#16a34a,#059669)} .featured-post-thumb img{width:100%;height:100%;object-fit:cover} .featured-post-body{padding:40px;display:flex;flex-direction:column;justify-content:center} .featured-post-body .content-meta{margin-bottom:14px} .featured-post-body h2{font-family:var(--fH);font-size:1.6rem;font-weight:800;margin-bottom:12px;line-height:1.25} .featured-post-body p{color:var(--ts);line-height:1.7;margin-bottom:20px} .featured-project{ display:grid;grid-template-columns:1.15fr 1fr;gap:0; background:var(--card);border:1px solid var(--b);border-radius:var(--r); overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:32px; } .featured-project-thumb{position:relative;min-height:320px;overflow:hidden} .featured-project-thumb img,.featured-project-thumb .pj-bg{width:100%;height:100%;object-fit:cover} .featured-project-body{padding:44px;display:flex;flex-direction:column;justify-content:center} .featured-project-body h3{font-family:var(--fH);font-size:1.5rem;font-weight:800;margin-bottom:12px} .featured-project-body p{color:var(--ts);line-height:1.7;margin-bottom:20px} .popular-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px} .popular-item{ background:var(--card);border:1px solid var(--b);border-radius:var(--r2); padding:16px;transition:all var(--tr); } .popular-item:hover{border-color:var(--bH);transform:translateY(-2px)} .popular-item-meta{font-family:var(--fM);font-size:.62rem;color:var(--tm);margin-bottom:6px;display:flex;align-items:center;gap:6px} .popular-item h4{font-size:.88rem;font-weight:600;line-height:1.4} /* ════════════════════════════════════════════════ TOP PAGE-LOAD PROGRESS BAR — shown above the navbar while navigating to a new page or during load. ════════════════════════════════════════════════ */ #pageProgress{ position:fixed;top:0;left:0;height:3px;width:0%; background:var(--aG);z-index:10000; opacity:0;pointer-events:none; box-shadow:0 0 8px var(--bH); } /* Scroll-reading progress bar — sits on top of the navbar, fills left to right as the visitor scrolls down the page (GSAP-driven, see site-scripts) */ #scrollProgress{ position:fixed;top:0;left:0;height:3px;width:0%; background:var(--aG);z-index:9250; pointer-events:none; box-shadow:0 0 8px var(--bH); } /* ════════════════════════════════════════════════ CUSTOM CURSOR (GSAP-driven dot + trailing ring) — an added effect on top of the normal system cursor, which stays visible; desktop-with-mouse only. ════════════════════════════════════════════════ */ .cursor-dot,.cursor-ring{ position:fixed;top:0;left:0;border-radius:50%; pointer-events:none;z-index:9999;will-change:transform; } .cursor-dot{ width:8px;height:8px;margin:-4px 0 0 -4px; background:var(--a); transition:opacity .2s ease; } .cursor-ring{ width:36px;height:36px;margin:-18px 0 0 -18px; border:1.5px solid var(--a);opacity:.55; transition:background .25s ease,border-color .25s ease,opacity .2s ease; } .cursor-ring.cursor-hover{background:var(--aGlow);border-color:transparent} .cursor-dot.cursor-hover{opacity:0} /* ════════════════════════════════════════════════ RESPONSIVE — Tablet ≤ 960px ════════════════════════════════════════════════ */ @media(max-width:960px){ .about-grid{grid-template-columns:1fr;gap:40px} .about-left{flex-direction:column;align-items:center} .sv-grid{grid-template-columns:repeat(2,1fr)} .tm-grid{grid-template-columns:1fr 1fr} .yt-box{grid-template-columns:1fr;gap:36px;padding:44px 32px} .yt-videos{grid-template-columns:1fr 1fr} .yt-counts{grid-template-columns:repeat(3,1fr)} .page-grid{grid-template-columns:repeat(2,1fr)} .res-grid{grid-template-columns:repeat(2,1fr)} .popular-row{grid-template-columns:1fr 1fr} .featured-post,.featured-project{grid-template-columns:1fr} .featured-post-thumb,.featured-project-thumb{min-height:200px} .blog-layout{grid-template-columns:1fr} .toc-aside{display:none !important} } /* ════════════════════════════════════════════════ RESPONSIVE — Mobile ≤ 768px ════════════════════════════════════════════════ */ @media(max-width:768px){ :root{--nav:60px} /* Show hamburger, hide desktop links */ .ham{display:flex} .nav-list{display:none} .sec{padding:48px 0} .hero-body{padding:40px 22px 56px} .hero-title{font-size:clamp(1.7rem,7vw,2.6rem)} .hero-stats{grid-template-columns:1fr 1fr;gap:14px} .next-card{padding:22px 20px} .next-card-title{font-size:1.05rem} .next-card-arrow{width:38px;height:38px;font-size:.85rem} .about-grid{grid-template-columns:1fr;gap:36px} .about-left{width:100%;align-items:center} .av-wrap{width:210px;height:210px} .av-core{width:138px;height:138px;font-size:1.7rem} .av-r1{width:168px;height:168px} .av-r2{width:207px;height:207px} .sk-grid{grid-template-columns:1fr} .sv-grid{grid-template-columns:1fr} .pj-grid{grid-template-columns:1fr} .tm-grid{grid-template-columns:1fr} .ct-grid{grid-template-columns:1fr;gap:36px} .form-box{padding:26px 20px} .ct-body{max-width:100%} .yt-box{padding:36px 22px;gap:28px} .yt-counts{grid-template-columns:repeat(3,1fr)} .yt-btns{flex-direction:column} .yt-videos{grid-template-columns:1fr} .ft-cols{grid-template-columns:1fr 1fr;gap:32px 24px} .ft-col-brand{grid-column:1 / -1} .page-grid{grid-template-columns:1fr} .gallery-grid{grid-template-columns:1fr} .page-hero::before,.detail-hero::before{width:320px;height:320px;top:-100px;right:-100px} .res-grid{grid-template-columns:1fr} .popular-row{grid-template-columns:1fr} .nl-band{padding:36px 24px;flex-direction:column;align-items:flex-start} .nl-form{width:100%} .nl-form input{min-width:0;flex:1} .featured-post-body,.featured-project-body{padding:26px} .search-panel{max-width:100%} #searchModal{padding:6vh 12px 12px} } /* ════════════════════════════════════════════════ RESPONSIVE — Small ≤ 480px ════════════════════════════════════════════════ */ @media(max-width:480px){ .sec{padding:40px 0} .hero-title{font-size:clamp(1.5rem,9vw,2rem)} .hero-cta{flex-direction:column;width:100%} .hero-cta .btn{width:100%;justify-content:center} .hero-stats{grid-template-columns:1fr} .yt-counts{grid-template-columns:1fr 1fr} .ft-soc{flex-wrap:wrap} .ft-cols{grid-template-columns:1fr} .ft-col-brand{grid-column:auto} .form-box{padding:22px 16px} .h2{font-size:1.75rem} }