/* =================================================================== MAHNOOR ISMAIL — Custom Web Developer Dark & Light Brown theme · Single source of truth stylesheet Used by both index.html (standalone) and the Astra child theme. Supports a light/dark theme switch via . =================================================================== */ /* ----------------------------- Tokens ----------------------------- */ :root{ /* Brown primitives */ --espresso: #1c1410; --coffee-900: #241a14; --coffee-800: #2e211b; --coffee-700: #3b2a20; --coffee-600: #4a342a; --brown: #6f4e37; --mocha: #8a6a4f; --caramel: #b9895f; --tan: #c8a27c; --latte: #e2c9ad; --cream: #f7efe6; --cream-2: #efe2d3; /* Accents (from logo) */ --gold: #c9a24b; --gold-soft: #e3c98f; --gold-deep: #a87c2e; --rose: #c98b86; /* Text on light surfaces */ --ink: #2a1d15; --ink-soft: #5c463a; /* Light-on-dark text (legacy aliases, follow theme tokens) */ --light: var(--d-text); --light-soft: var(--d-text-soft); /* ---- THEME SURFACE TOKENS (default = DARK) ---- */ --d-bg: #1c1410; /* page + "dark" sections */ --d-panel-1: #2e211b; /* card / panel top */ --d-panel-2: #241a14; /* card / panel bottom */ --d-text: #f5e9dc; /* primary text on those surfaces*/ --d-text-soft:#cdb7a3; /* muted text */ --d-glass: rgba(28,20,16,.82); --d-border: rgba(201,162,75,.12); --d-line: rgba(245,233,220,.32); --d-alt: linear-gradient(180deg,var(--cream),var(--cream-2)); /* .bg-light bg */ /* System */ --radius:18px; --radius-sm:12px; --shadow-sm:0 8px 24px rgba(20,12,8,.18); --shadow:0 24px 60px rgba(20,12,8,.35); --shadow-gold:0 18px 50px rgba(168,124,46,.35); --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --maxw:1200px; --font-display:"Cormorant Garamond",Georgia,serif; --font-body:"Poppins",system-ui,-apple-system,sans-serif; --font-label:"Marcellus",var(--font-display); } /* ---------------------------- LIGHT THEME ------------------------- */ [data-theme="light"]{ --d-bg: #f4ece1; --d-panel-1: #ffffff; --d-panel-2: #f7eede; --d-text: #2c1f16; --d-text-soft:#6f5847; --d-glass: rgba(248,241,232,.86); --d-border: rgba(168,124,46,.20); --d-line: rgba(44,31,22,.22); --d-alt: linear-gradient(180deg,#fffaf3,#f1e4d3); --shadow-sm:0 8px 24px rgba(120,86,52,.12); --shadow:0 24px 60px rgba(120,86,52,.20); } /* ----------------------------- Reset ------------------------------ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% } body{ font-family:var(--font-body); background:var(--d-bg); color:var(--d-text); line-height:1.7; overflow-x:hidden; font-weight:300; -webkit-font-smoothing:antialiased; transition:background .5s var(--ease), color .5s var(--ease); } body.no-scroll{ overflow:hidden; height:100vh } img{ max-width:100%; display:block } a{ color:inherit; text-decoration:none } ul{ list-style:none } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit } section{ position:relative } ::selection{ background:var(--gold); color:var(--espresso) } ::-webkit-scrollbar{ width:11px } ::-webkit-scrollbar-track{ background:var(--d-panel-2) } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--brown),var(--gold-deep)); border-radius:20px; border:2px solid var(--d-panel-2) } ::-webkit-scrollbar-thumb:hover{ background:var(--gold) } /* --------------------------- Typography --------------------------- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:.3px } .eyebrow{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.42em; font-size:.74rem; color:var(--gold); display:inline-flex; align-items:center; gap:.8rem; margin-bottom:1rem; } .eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)) } .eyebrow.center::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent) } /* ---------------------------- Layout ------------------------------ */ .container{ width:min(var(--maxw),92%); margin-inline:auto } .section{ padding:clamp(5rem,10vw,9rem) 0 } .section-head{ max-width:680px; margin-bottom:3.5rem } .section-head.center{ margin-inline:auto; text-align:center } .section-title{ font-size:clamp(2.1rem,5vw,3.6rem); margin-bottom:1rem } .section-title .accent{ color:var(--gold); font-style:italic } .lead{ color:var(--d-text-soft); font-size:1.05rem; max-width:60ch } .bg-light{ background:var(--d-alt); color:var(--ink) } .bg-light .lead{ color:var(--ink-soft) } .bg-light .section-title .accent{ color:var(--gold-deep) } /* --------------------------- Buttons ------------------------------ */ .btn{ position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 2rem; border-radius:60px; font-weight:500; font-size:.92rem; letter-spacing:.03em; overflow:hidden; isolation:isolate; transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease); will-change:transform; } .btn svg{ width:18px; height:18px; transition:transform .45s var(--ease) } .btn-primary{ background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--espresso); box-shadow:var(--shadow-gold) } .btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,var(--gold-soft),var(--gold)); transform:translateX(-101%); transition:transform .55s var(--ease) } .btn-primary:hover{ transform:translateY(-4px) } .btn-primary:hover::before{ transform:translateX(0) } .btn-primary:hover svg{ transform:translate(4px,-2px) } .btn-ghost{ border:1px solid var(--d-line); color:var(--d-text) } .btn-ghost::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--d-text); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease) } .btn-ghost:hover{ color:var(--d-bg); border-color:transparent; transform:translateY(-4px) } .btn-ghost:hover::before{ transform:scaleX(1) } .bg-light .btn-ghost{ border-color:rgba(42,29,21,.3); color:var(--ink) } .bg-light .btn-ghost::before{ background:var(--ink) } .bg-light .btn-ghost:hover{ color:var(--cream) } /* --------------------- Reveal-on-scroll --------------------------- */ .reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) } .reveal.in-view{ opacity:1; transform:none } .reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s } .reveal.d3{ transition-delay:.3s } .reveal.d4{ transition-delay:.4s } .reveal.d5{ transition-delay:.5s } .reveal.d6{ transition-delay:.6s } .reveal.from-left{ transform:translateX(-50px) } .reveal.from-right{ transform:translateX(50px) } .reveal.from-left.in-view,.reveal.from-right.in-view{ transform:none } .reveal.zoom{ transform:scale(.9) } .reveal.zoom.in-view{ transform:scale(1) } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.001ms !important } .reveal{ opacity:1; transform:none } } /* --------------------------- Cursor ------------------------------- */ .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; mix-blend-mode:difference } .cursor-dot{ width:7px; height:7px; background:var(--gold); transform:translate(-50%,-50%) } .cursor-ring{ width:38px; height:38px; border:1.5px solid var(--gold-soft); transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease) } .cursor-ring.grow{ width:64px; height:64px; background:rgba(201,162,75,.12) } @media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none } } /* -------------------------- Preloader ----------------------------- */ .preloader{ position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:radial-gradient(120% 120% at 50% 30%,var(--d-panel-2),var(--d-bg)); transition:opacity .8s var(--ease), visibility .8s; } .preloader.done{ opacity:0; visibility:hidden } .pre-logo{ position:relative; width:130px; height:130px; display:grid; place-items:center } .pre-ring{ position:absolute; inset:0; transform:rotate(-90deg) } .pre-ring circle{ fill:none; stroke-width:2.5 } .pre-ring .track{ stroke:rgba(201,162,75,.16) } .pre-ring .bar{ stroke:url(#preg); stroke-linecap:round; stroke-dasharray:383; stroke-dashoffset:383; transition:stroke-dashoffset .2s linear; filter:drop-shadow(0 0 6px rgba(201,162,75,.6)) } .pre-M{ font-family:var(--font-display); font-size:3.6rem; font-weight:700; background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:pulseM 1.6s var(--ease) infinite; } @keyframes pulseM{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.12); opacity:1 } } .pre-name{ font-family:var(--font-display); font-size:1.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--d-text); overflow:hidden } .pre-name span{ display:inline-block; opacity:0; transform:translateY(110%); animation:preUp .7s var(--ease) forwards } .pre-role{ font-family:var(--font-label); letter-spacing:.5em; text-transform:uppercase; font-size:.66rem; color:var(--rose); opacity:0; animation:fadeIn .8s ease forwards .9s } .pre-count{ position:absolute; bottom:8%; right:8%; font-family:var(--font-display); font-size:clamp(3rem,12vw,7rem); color:rgba(201,162,75,.14); font-weight:700 } @keyframes preUp{ to{ opacity:1; transform:none } } @keyframes fadeIn{ to{ opacity:1 } } /* ---------------------------- Header ------------------------------ */ .site-header{ position:fixed; top:0; left:0; width:100%; z-index:1000; padding:1.4rem 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; } .site-header.scrolled{ padding:.7rem 0; background:var(--d-glass); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 10px 40px rgba(0,0,0,.18); border-bottom:1px solid var(--d-border); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem } .brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-size:1.35rem; letter-spacing:.02em; margin-right:auto } .brand img{ height:58px; width:auto; transition:transform .5s var(--ease), height .4s var(--ease) } .site-header.scrolled .brand img{ height:50px } .brand:hover img{ transform:rotate(-6deg) scale(1.06) } .nav-links{ display:flex; align-items:center; gap:2.2rem } .nav-links a{ position:relative; font-size:.9rem; font-weight:400; letter-spacing:.04em; color:var(--d-text-soft); transition:color .35s var(--ease); padding:.2rem 0 } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease) } .nav-links a:hover,.nav-links a.active{ color:var(--d-text) } .nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); transform-origin:left } .theme-toggle{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--d-text); border:1px solid var(--d-border); transition:transform .5s var(--ease), color .4s, border-color .4s, background .4s } .theme-toggle:hover{ color:var(--gold); border-color:var(--gold); transform:rotate(25deg) } .theme-toggle svg{ width:19px; height:19px } .theme-toggle .ic-moon{ display:none } .theme-toggle .ic-sun{ display:block } [data-theme="light"] .theme-toggle .ic-sun{ display:none } [data-theme="light"] .theme-toggle .ic-moon{ display:block } .nav-cta{ display:inline-flex } .nav-toggle{ display:none; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; z-index:1100 } .nav-toggle span{ width:26px; height:2px; background:var(--d-text); border-radius:2px; transition:transform .4s var(--ease),opacity .3s } .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) } .nav-toggle.open span:nth-child(2){ opacity:0 } .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) } /* ----------------------------- Hero ------------------------------- */ .hero{ min-height:100vh; display:flex; align-items:center; padding:8rem 0 4rem; overflow:hidden; background: radial-gradient(60% 80% at 80% 20%,rgba(111,78,55,.45),transparent 60%), radial-gradient(50% 60% at 10% 90%,rgba(168,124,46,.16),transparent 60%), linear-gradient(160deg,var(--d-panel-2),var(--d-bg) 60%); } .hero-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0 } .hero-glow.a{ width:420px; height:420px; background:radial-gradient(circle,var(--gold-deep),transparent 70%); top:-80px; right:-60px; animation:float1 12s ease-in-out infinite } .hero-glow.b{ width:360px; height:360px; background:radial-gradient(circle,var(--brown),transparent 70%); bottom:-120px; left:-80px; animation:float2 14s ease-in-out infinite } @keyframes float1{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-30px,40px) } } @keyframes float2{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(40px,-30px) } } .hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center } .hero-copy h1{ font-size:clamp(3rem,8vw,6rem); line-height:.98; margin:.4rem 0 1.2rem; color:var(--d-text) } .hero-copy h1 .ln{ display:block; overflow:hidden } .hero-copy h1 .ln span{ display:inline-block; transform:translateY(110%); animation:heroUp 1s var(--ease-out) forwards } .hero-copy h1 .ln:nth-child(2) span{ animation-delay:.12s } .hero-copy h1 i{ font-style:italic; color:var(--gold) } @keyframes heroUp{ to{ transform:none } } .hero-sub{ font-size:1.12rem; color:var(--d-text-soft); max-width:46ch; margin-bottom:2.2rem; opacity:0; animation:fadeUp 1s var(--ease) forwards .5s } .hero-typed{ color:var(--gold-soft); font-weight:500 } [data-theme="light"] .hero-typed{ color:var(--gold-deep) } .hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; opacity:0; animation:fadeUp 1s var(--ease) forwards .7s } .hero-meta{ display:flex; gap:2.4rem; margin-top:2.8rem; opacity:0; animation:fadeUp 1s var(--ease) forwards .9s } .hero-meta .num{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold); font-weight:700; line-height:1 } .hero-meta .lbl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-text-soft); margin-top:.3rem } @keyframes fadeUp{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } } .hero-figure{ position:relative; justify-self:center; opacity:0; animation:fadeIn 1.2s ease forwards .4s } .hero-portrait{ position:relative; width:min(400px,80vw); aspect-ratio:334/420; border-radius:200px 200px 26px 26px; overflow:hidden; border:1px solid rgba(201,162,75,.4); box-shadow:var(--shadow); transition:transform .6s var(--ease) } .hero-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1.2s var(--ease) } .hero-figure:hover .hero-portrait img{ transform:scale(1.06) } .hero-portrait::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(28,20,16,.5)) } .hero-ring{ position:absolute; inset:-26px; border:1px dashed rgba(201,162,75,.4); border-radius:50%; animation:spin 26s linear infinite; z-index:-1 } @keyframes spin{ to{ transform:rotate(360deg) } } .hero-badge{ position:absolute; bottom:18px; left:-26px; background:var(--d-glass); backdrop-filter:blur(8px); border:1px solid var(--d-border); border-radius:16px; padding:.8rem 1.1rem; display:flex; align-items:center; gap:.7rem; box-shadow:var(--shadow-sm); animation:float1 6s ease-in-out infinite } .hero-badge .dot{ width:10px; height:10px; border-radius:50%; background:#5fd07f; box-shadow:0 0 0 0 rgba(95,208,127,.6); animation:ping 2s infinite } @keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(95,208,127,.6) } 70%{ box-shadow:0 0 0 10px rgba(95,208,127,0) } 100%{ box-shadow:0 0 0 0 rgba(95,208,127,0) } } .hero-badge small{ font-size:.7rem; color:var(--d-text-soft); text-transform:uppercase; letter-spacing:.1em } .hero-badge b{ font-size:.85rem; color:var(--d-text); font-weight:500 } .hero-chip{ position:absolute; top:30px; right:-20px; background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--espresso); font-weight:600; font-size:.78rem; padding:.5rem .9rem; border-radius:30px; box-shadow:var(--shadow-gold); animation:float2 7s ease-in-out infinite } .scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--d-text-soft) } .scroll-cue .mouse{ width:22px; height:36px; border:1.5px solid var(--d-text-soft); border-radius:14px; position:relative } .scroll-cue .mouse::after{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:7px; background:var(--gold); border-radius:3px; animation:scrolly 1.6s infinite } .scroll-cue small{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase } @keyframes scrolly{ 0%{ transform:translate(-50%,0); opacity:1 } 80%{ transform:translate(-50%,12px); opacity:0 } 100%{ opacity:0 } } /* Marquee strip */ .tape{ background:var(--gold); color:var(--espresso); padding:.85rem 0; overflow:hidden; white-space:nowrap; border-block:1px solid var(--gold-deep) } .tape-track{ display:inline-flex; gap:3rem; animation:marquee 26s linear infinite; will-change:transform } .tape:hover .tape-track{ animation-play-state:paused } .tape span{ font-family:var(--font-display); font-style:italic; font-size:1.25rem; font-weight:600; display:inline-flex; align-items:center; gap:3rem } .tape span::after{ content:"✦"; font-size:.8rem } @keyframes marquee{ to{ transform:translateX(-50%) } } /* ----------------------------- About ------------------------------ */ .about-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2.5rem,6vw,5rem); align-items:center } .about-media{ position:relative } .about-photo{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:341/430 } .about-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease) } .about-media:hover .about-photo img{ transform:scale(1.05) } .about-frame{ position:absolute; top:-22px; left:-22px; width:60%; height:60%; border:1px solid var(--gold); border-radius:14px; z-index:-1 } .about-exp{ position:absolute; bottom:24px; right:-24px; background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--espresso); border-radius:14px; padding:1rem 1.2rem; text-align:center; box-shadow:var(--shadow-gold); animation:float1 7s ease-in-out infinite } .about-exp .n{ font-family:var(--font-display); font-size:2rem; font-weight:700; line-height:1 } .about-exp .t{ font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; margin-top:.2rem } .about-copy p{ color:var(--ink-soft); margin-bottom:1.2rem } .about-copy strong{ color:var(--ink) } .about-copy .sig{ font-family:var(--font-display); font-style:italic; font-size:2rem; color:var(--gold-deep); margin-top:.6rem } .about-list{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem; margin:1.6rem 0 2rem } .about-list li{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink) } .about-list svg{ width:18px; height:18px; color:var(--gold-deep); flex:0 0 auto } /* Stats band */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1rem } .stat{ text-align:center; padding:1.6rem 1rem; border-radius:var(--radius-sm); background:rgba(255,255,255,.5); border:1px solid rgba(111,78,55,.14); transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s } [data-theme="light"] .stat{ background:rgba(255,255,255,.7) } .stat:hover{ transform:translateY(-6px); box-shadow:var(--shadow-sm); background:#fff } .stat .num{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:700; color:var(--gold-deep); line-height:1 } .stat .num::after{ content:attr(data-suffix); color:var(--brown) } .stat .lbl{ font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-top:.5rem } /* ---------------------------- Services ---------------------------- */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem } .card{ position:relative; padding:2.4rem 2rem; border-radius:var(--radius); overflow:hidden; isolation:isolate; background:linear-gradient(180deg,var(--d-panel-1),var(--d-panel-2)); border:1px solid var(--d-border); transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s; transform-style:preserve-3d; will-change:transform; } .card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(120% 120% at 50% 0%,rgba(201,162,75,.18),transparent 60%); transition:opacity .6s } .card:hover{ transform:translateY(-10px); box-shadow:var(--shadow); border-color:rgba(201,162,75,.4) } .card:hover::before{ opacity:1 } .card .ic{ width:62px; height:62px; border-radius:16px; display:grid; place-items:center; margin-bottom:1.4rem; background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(111,78,55,.25)); border:1px solid rgba(201,162,75,.3); color:var(--gold-soft); transition:transform .6s var(--ease), background .5s } [data-theme="light"] .card .ic{ color:var(--gold-deep) } .card:hover .ic{ transform:rotate(-8deg) scale(1.08); background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--espresso) } .card .ic svg{ width:30px; height:30px } .card h3{ font-size:1.5rem; margin-bottom:.6rem; color:var(--d-text) } .card p{ color:var(--d-text-soft); font-size:.94rem } .card .no{ position:absolute; top:1.4rem; right:1.6rem; font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:rgba(201,162,75,.16) } /* --------------------------- Tech / skills ------------------------ */ .tech{ background:linear-gradient(180deg,var(--d-bg),var(--d-panel-2)) } .skills-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem 4rem } .skill-top{ display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:.92rem } .skill-top b{ font-weight:500; color:var(--d-text) } .skill-top span{ color:var(--gold) } .skill-bar{ height:7px; border-radius:6px; background:rgba(201,162,75,.14); overflow:hidden } .skill-fill{ height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--brown),var(--gold)); transition:width 1.4s var(--ease) } .chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.6rem } .chip{ padding:.5rem 1.1rem; border-radius:30px; font-size:.82rem; color:var(--d-text-soft); border:1px solid rgba(201,162,75,.22); transition:all .4s var(--ease) } .chip:hover{ color:var(--espresso); background:var(--gold); border-color:var(--gold); transform:translateY(-3px) } /* --------------------------- Portfolio ---------------------------- */ .folio-filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.6rem } .filter{ padding:.55rem 1.3rem; border-radius:30px; font-size:.84rem; color:var(--ink-soft); border:1px solid rgba(111,78,55,.24); transition:all .4s var(--ease) } .filter:hover{ border-color:var(--gold-deep); color:var(--ink) } .filter.active{ background:var(--ink); color:var(--cream); border-color:var(--ink) } .folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem } .folio-item{ opacity:1; transition:opacity .4s, transform .4s } .folio-item.hide{ display:none } .folio-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--d-panel-2); aspect-ratio:16/11; transition:transform .6s var(--ease), box-shadow .6s var(--ease) } .folio-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow) } .folio-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; background:linear-gradient(135deg,var(--coffee-700),var(--coffee-900)); transition:transform 4s var(--ease) } .folio-card:hover .folio-shot{ transform:translateY(-22%) } .folio-skel{ position:absolute; inset:0; display:grid; place-items:center; color:var(--mocha); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase } .folio-skel::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(201,162,75,.12) 50%,transparent 70%); background-size:220% 100%; animation:shimmer 1.5s infinite } @keyframes shimmer{ to{ background-position:-220% 0 } } .folio-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; background:linear-gradient(0deg,rgba(20,12,8,.92),rgba(20,12,8,.2) 55%,transparent); opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease) } .folio-card:hover .folio-overlay{ opacity:1; transform:none } .folio-overlay .cat{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.3rem } .folio-overlay h3{ font-size:1.35rem; color:#fff; margin-bottom:.8rem } .folio-visit{ display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; font-size:.82rem; color:var(--espresso); background:var(--gold); padding:.5rem 1rem; border-radius:30px; font-weight:500; transition:gap .35s var(--ease) } .folio-visit:hover{ gap:.9rem } .folio-tag{ position:absolute; top:1rem; left:1rem; z-index:3; background:rgba(28,20,16,.7); backdrop-filter:blur(6px); border:1px solid rgba(201,162,75,.3); color:var(--gold-soft); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .7rem; border-radius:20px; opacity:0; transition:opacity .5s } .folio-card:hover .folio-tag{ opacity:1 } .folio-note{ text-align:center; margin-top:2.4rem; color:var(--ink-soft); font-size:.9rem } .folio-note a{ color:var(--gold-deep); border-bottom:1px solid currentColor } /* ---------------------------- Process ----------------------------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step } .step{ position:relative; padding:2.2rem 1.6rem; border-radius:var(--radius); background:linear-gradient(180deg,var(--d-panel-1),var(--d-panel-2)); border:1px solid var(--d-border); transition:transform .5s var(--ease), border-color .4s } .step:hover{ transform:translateY(-8px); border-color:rgba(201,162,75,.35) } .step .sno{ font-family:var(--font-display); font-size:1rem; color:var(--espresso); background:linear-gradient(120deg,var(--gold),var(--gold-deep)); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:700; margin-bottom:1.2rem; box-shadow:var(--shadow-gold) } .step h3{ font-size:1.35rem; color:var(--d-text); margin-bottom:.5rem } .step p{ color:var(--d-text-soft); font-size:.9rem } .step::after{ content:""; position:absolute; top:46px; right:-.85rem; width:1.7rem; height:1px; background:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 10px) } .step:last-child::after{ display:none } /* -------------------------- Testimonials -------------------------- */ .quotes{ position:relative; max-width:820px; margin-inline:auto; text-align:center } .quote{ display:none } .quote.active{ display:block; animation:fadeUp .8s var(--ease) } .quote .mark{ font-family:var(--font-display); font-size:5rem; line-height:.4; color:var(--gold); height:2.2rem } .quote p{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,3vw,1.9rem); color:var(--ink); margin:1.4rem 0 1.8rem } .quote .who{ font-weight:500; color:var(--ink) } .quote .role{ font-size:.82rem; color:var(--ink-soft) } .q-dots{ display:flex; gap:.6rem; justify-content:center; margin-top:2rem } .q-dot{ width:9px; height:9px; border-radius:50%; background:rgba(111,78,55,.25); transition:all .4s var(--ease) } .q-dot.active{ background:var(--gold-deep); width:30px; border-radius:6px } /* ---------------------------- Contact ----------------------------- */ .contact{ background: radial-gradient(60% 80% at 85% 15%,rgba(168,124,46,.18),transparent 60%), linear-gradient(160deg,var(--d-panel-2),var(--d-bg)); overflow:hidden } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center } .contact-info .lead{ margin-bottom:2rem } .contact-list li{ display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--d-border) } .contact-list .ic{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:rgba(201,162,75,.12); border:1px solid rgba(201,162,75,.25); color:var(--gold-soft); transition:all .45s var(--ease) } [data-theme="light"] .contact-list .ic{ color:var(--gold-deep) } .contact-list li:hover .ic{ background:var(--gold); color:var(--espresso); transform:rotate(-6deg) } .contact-list small{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-text-soft) } .contact-list b{ font-weight:400; color:var(--d-text) } .socials{ display:flex; gap:.8rem; margin-top:1.8rem } .socials a{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--d-text-soft); border:1px solid rgba(201,162,75,.25); transition:all .45s var(--ease) } .socials a:hover{ color:var(--espresso); background:var(--gold); border-color:var(--gold); transform:translateY(-5px) } .socials svg{ width:18px; height:18px } .form{ background:rgba(201,162,75,.05); border:1px solid var(--d-border); border-radius:var(--radius); padding:2.2rem; backdrop-filter:blur(6px) } [data-theme="light"] .form{ background:rgba(255,255,255,.6) } .field{ position:relative; margin-bottom:1.6rem } .field input,.field textarea{ width:100%; padding:1rem 1rem .5rem; background:transparent; border:none; border-bottom:1.5px solid rgba(201,162,75,.3); color:var(--d-text); font-size:.95rem; transition:border-color .4s } .field textarea{ resize:vertical; min-height:110px } .field label{ position:absolute; left:1rem; top:1rem; color:var(--d-text-soft); pointer-events:none; transition:all .35s var(--ease); font-size:.95rem } .field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold) } .field input:focus+label,.field textarea:focus+label, .field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{ top:-.4rem; font-size:.7rem; letter-spacing:.1em; color:var(--gold) } .form .btn{ width:100%; justify-content:center } .form-note{ font-size:.78rem; color:var(--d-text-soft); text-align:center; margin-top:1rem } .form-ok{ display:none; color:#3da35d; font-size:.85rem; text-align:center; margin-top:1rem } /* ---------------------------- Footer ------------------------------ */ .site-footer{ background:var(--d-bg); padding:4rem 0 2rem; border-top:1px solid var(--d-border) } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem } .footer-brand img{ height:54px; margin-bottom:1rem } .footer-brand p{ color:var(--d-text-soft); font-size:.9rem; max-width:34ch } .footer-col h4{ font-family:var(--font-body); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; font-weight:500 } .footer-col a{ display:block; color:var(--d-text-soft); font-size:.9rem; padding:.35rem 0; transition:color .35s, padding-left .35s var(--ease) } .footer-col a:hover{ color:var(--gold); padding-left:.4rem } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; border-top:1px solid var(--d-border); color:var(--d-text-soft); font-size:.82rem } .footer-bottom .heart{ color:var(--rose) } /* Back to top */ .to-top{ position:fixed; right:24px; bottom:24px; z-index:900; width:50px; height:50px; border-radius:50%; background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--espresso); display:grid; place-items:center; box-shadow:var(--shadow-gold); opacity:0; transform:translateY(20px) scale(.8); pointer-events:none; transition:all .5s var(--ease) } .to-top.show{ opacity:1; transform:none; pointer-events:auto } .to-top:hover{ transform:translateY(-4px) } .to-top svg{ width:20px; height:20px } /* --------------------------- Responsive --------------------------- */ @media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; text-align:center; gap:2.5rem } .hero-actions,.hero-meta{ justify-content:center } .hero-sub{ margin-inline:auto } .hero-figure{ order:-1 } .about-grid,.contact-grid{ grid-template-columns:1fr } .about-media{ max-width:460px; margin-inline:auto } .cards,.steps,.skills-grid{ grid-template-columns:1fr 1fr } .folio-grid{ grid-template-columns:1fr 1fr } .footer-top{ grid-template-columns:1fr 1fr } .step::after{ display:none } } @media (max-width:680px){ .nav-links{ position:fixed; inset:0 0 0 auto; width:min(82%,330px); flex-direction:column; justify-content:center; gap:1.6rem; background:linear-gradient(160deg,var(--d-panel-1),var(--d-bg)); padding:3rem; transform:translateX(110%); transition:transform .5s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.3) } .nav-links.open{ transform:none } .nav-links a{ font-size:1.1rem } .nav-cta{ display:none } .nav-toggle{ display:flex } .cards,.steps,.skills-grid,.folio-grid,.footer-top{ grid-template-columns:1fr } .stats{ grid-template-columns:1fr 1fr } .hero-meta{ gap:1.4rem } .section-head{ margin-bottom:2.4rem } }