/* ============================================================ PEAK DIGITAL — Theme tokens Three themes switch via [data-theme] on . ============================================================ */ :root { --blue: #7EC8E3; --purple: #C3A6E8; --radius: 18px; --maxw: 1180px; --nav-h: 72px; --ease: cubic-bezier(.22,.61,.36,1); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---------- DARK (default) ---------- */ [data-theme="dark"] { --bg: #0D0D0D; --bg-2: #141414; --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.06); --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14); --text: #ffffff; --muted: #9aa3ad; --accent: #7EC8E3; --error: #ff8585; --accent-grad: linear-gradient(120deg, var(--blue), var(--purple)); --glow: 0 0 28px rgba(126,200,227,.35), 0 0 60px rgba(195,166,232,.18); --card-shadow: 0 10px 40px rgba(0,0,0,.5); --hero-orb-1: rgba(126,200,227,.22); --hero-orb-2: rgba(195,166,232,.20); } /* ---------- LIGHT ---------- */ [data-theme="light"] { --bg: #f6f8fb; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --border: rgba(17,24,39,.10); --border-strong: rgba(17,24,39,.18); --text: #111827; --muted: #5b6472; --accent: #15718f; --error: #c81e1e; --accent-grad: linear-gradient(120deg, #3aa6cc, #9b6fd6); --glow: 0 8px 30px rgba(58,166,204,.18); --card-shadow: 0 10px 30px rgba(17,24,39,.08); --hero-orb-1: rgba(126,200,227,.45); --hero-orb-2: rgba(195,166,232,.40); } /* ---------- GRADIENT (glassmorphism) ---------- */ [data-theme="gradient"] { --bg: #1b0b3a; --bg-2: #1e1450; --surface: rgba(255,255,255,.08); --surface-2: rgba(255,255,255,.12); --border: rgba(255,255,255,.18); --border-strong: rgba(255,255,255,.30); --text: #ffffff; --muted: #d6cdf2; --accent: #7EC8E3; --error: #ff8585; --accent-grad: linear-gradient(120deg, var(--blue), var(--purple)); --glow: 0 0 30px rgba(126,200,227,.40), 0 0 70px rgba(195,166,232,.30); --card-shadow: 0 18px 50px rgba(0,0,0,.35); --hero-orb-1: rgba(126,200,227,.30); --hero-orb-2: rgba(195,166,232,.30); } /* ============================================================ Base ============================================================ */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; transition: background .5s var(--ease), color .4s var(--ease); } [data-theme="gradient"] body { background: radial-gradient(900px 600px at 12% -5%, rgba(126,200,227,.28), transparent 55%), radial-gradient(900px 700px at 95% 10%, rgba(195,166,232,.30), transparent 55%), linear-gradient(160deg, #1b0b3a 0%, #221054 40%, #15224f 100%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } img { max-width:100%; display:block; } section { padding: 110px 0; position: relative; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Selection */ ::selection { background: var(--purple); color:#1a1a1a; } /* ============================================================ Accessibility — focus, skip link, reduced motion ============================================================ */ /* Visible keyboard focus for every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Form fields already draw their own ring; keep it consistent */ .field input:focus-visible, .field textarea:focus-visible { outline: none; } /* Skip-to-content link (visible on keyboard focus) */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 18px; border-radius: 10px; background: var(--accent-grad); color: #0c0c12; font-weight: 700; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* Typographic helpers */ .eyebrow { display:inline-block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color: var(--accent); margin-bottom:14px; padding:6px 14px; border:1px solid var(--border-strong); border-radius:999px; background: var(--surface); } h1,h2,h3 { line-height:1.12; font-weight:800; letter-spacing:-.02em; } .section-head { text-align:center; max-width:660px; margin:0 auto 60px; } .section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom:16px; } .section-head p { color: var(--muted); font-size:1.08rem; } .grad-text { background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ============================================================ Buttons ============================================================ */ .btn { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.98rem; cursor:pointer; padding:14px 28px; border-radius:999px; border:1px solid transparent; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s; white-space:nowrap; } .btn-primary { background: var(--accent-grad); color:#0c0c12; box-shadow: var(--glow); } .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 40px rgba(126,200,227,.55), 0 0 80px rgba(195,166,232,.4); } .btn-ghost { background: var(--surface); color: var(--text); border:1px solid var(--border-strong); backdrop-filter: blur(8px); } .btn-ghost:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); } /* ============================================================ Navbar ============================================================ */ header.nav { position: sticky; top:0; z-index:1000; height: var(--nav-h); display:flex; align-items:center; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border); transition: background .4s var(--ease), border-color .4s; } .nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; } .logo { display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.18rem; letter-spacing:-.02em; } .logo svg { width:30px; height:30px; flex:none; } .logo-img { width:42px; height:42px; flex:none; border-radius:50%; background:#fff; object-fit:contain; box-shadow: 0 2px 12px rgba(0,0,0,.18); } .nav-links { display:flex; align-items:center; gap:6px; list-style:none; } .nav-links a { font-size:.93rem; font-weight:600; color: var(--muted); padding:9px 14px; border-radius:10px; transition: color .25s, background .25s; } .nav-links a:hover { color: var(--text); background: var(--surface); } .nav-actions { display:flex; align-items:center; gap:14px; } /* Theme switcher */ .theme-switch { display:flex; gap:4px; padding:4px; border-radius:999px; background: var(--surface); border:1px solid var(--border); } .theme-switch button { width:34px; height:34px; border-radius:999px; border:none; cursor:pointer; background:transparent; display:grid; place-items:center; color: var(--muted); transition: background .25s, color .25s, transform .2s; } .theme-switch button svg { width:17px; height:17px; } .theme-switch button:hover { color: var(--text); transform: translateY(-1px); } .theme-switch button.active { background: var(--accent-grad); color:#0c0c12; } /* Mobile menu button */ .menu-btn { display:none; width:42px; height:42px; border-radius:12px; cursor:pointer; background: var(--surface); border:1px solid var(--border); color:var(--text); place-items:center; } .menu-btn svg { width:22px; height:22px; } /* ============================================================ Hero ============================================================ */ .hero { padding-top: 96px; padding-bottom: 120px; text-align:center; overflow:hidden; } .hero .orb { position:absolute; border-radius:50%; filter: blur(70px); z-index:0; pointer-events:none; } .hero .orb.a { width:520px; height:520px; background: var(--hero-orb-1); top:-120px; left:-100px; } .hero .orb.b { width:560px; height:560px; background: var(--hero-orb-2); bottom:-200px; right:-120px; } .hero .wrap { position:relative; z-index:1; } .hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); margin-bottom:22px; } .hero p.sub { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--muted); max-width:620px; margin:0 auto 38px; } .hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .hero-stats { display:flex; gap:46px; justify-content:center; flex-wrap:wrap; margin-top:64px; } .hero-stats .stat .n { font-size:2.1rem; font-weight:800; } .hero-stats .stat .l { font-size:.85rem; color: var(--muted); letter-spacing:.04em; } /* ============================================================ About ============================================================ */ .about-grid { display:grid; grid-template-columns: 1.05fr 1fr; gap:56px; align-items:center; } .about-copy h2 { font-size: clamp(2rem,4vw,2.8rem); margin-bottom:20px; } .about-copy p { color: var(--muted); margin-bottom:18px; font-size:1.05rem; } .about-points { list-style:none; margin-top:26px; display:grid; gap:14px; } .about-points li { display:flex; gap:13px; align-items:flex-start; } .about-points .tick { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background: var(--accent-grad); color:#0c0c12; font-weight:800; font-size:.85rem; } .about-visual { position:relative; aspect-ratio: 1/1; border-radius:24px; background: var(--surface); border:1px solid var(--border); overflow:hidden; box-shadow: var(--card-shadow); display:grid; place-items:center; } [data-theme="gradient"] .about-visual { backdrop-filter: blur(12px); } .about-visual .mark { width:62%; } .about-visual .mark img { width:100%; height:auto; display:block; border-radius:50%; background:#fff; box-shadow: 0 6px 28px rgba(0,0,0,.22); } .about-visual .ring { position:absolute; border:1px solid var(--border-strong); border-radius:50%; } .about-visual .ring.r1 { inset:14%; } .about-visual .ring.r2 { inset:26%; border-style:dashed; animation: spin 26s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Card base (services, portfolio, testimonials, pricing) ============================================================ */ .card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:30px; position:relative; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s; } [data-theme="gradient"] .card { backdrop-filter: blur(14px) saturate(130%); } .card:hover { transform: translateY(-8px); border-color: var(--border-strong); box-shadow: var(--card-shadow); } /* Services */ .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; } @media (min-width: 981px) { #services .grid-3 { grid-template-columns: repeat(6, 1fr); } #services .grid-3 > .card { grid-column: span 2; } #services .grid-3 > .card:nth-child(4) { grid-column: 2 / span 2; } #services .grid-3 > .card:nth-child(5) { grid-column: 4 / span 2; } } .service .ico { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background: var(--surface-2); border:1px solid var(--border); margin-bottom:20px; transition: box-shadow .35s, transform .35s; } .service .ico svg { width:26px; height:26px; stroke: var(--accent); } .service:hover .ico { box-shadow: var(--glow); transform: scale(1.05); } .service h3 { font-size:1.22rem; margin-bottom:10px; } .service p { color: var(--muted); font-size:.98rem; } /* Portfolio — single "Coming Soon" oval */ .coming-soon { display:grid; place-items:center; padding:20px 0; } .cs-oval { position:relative; display:grid; place-items:center; text-align:center; width: min(540px, 84vw); aspect-ratio: 2 / 1; border-radius: 50%; background: var(--surface); box-shadow: var(--glow); transition: transform .45s var(--ease), box-shadow .45s; } [data-theme="gradient"] .cs-oval { backdrop-filter: blur(14px) saturate(130%); } .cs-oval::before { content:""; position:absolute; inset:0; border-radius:50%; padding:2px; background: var(--accent-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } .cs-oval span { font-size: clamp(2rem, 7vw, 3.6rem); font-weight:800; letter-spacing:-.02em; } .cs-oval:hover { transform: scale(1.03); box-shadow: 0 0 40px rgba(126,200,227,.5), 0 0 90px rgba(195,166,232,.35); } /* Pricing */ .grid-pricing { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; align-items:stretch; } .grid-pricing.single { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .grid-pricing.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; } @media (max-width: 820px) { .grid-pricing.two { grid-template-columns: 1fr; max-width: 460px; } } .price { display:flex; flex-direction:column; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:34px 30px; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; position:relative; } [data-theme="gradient"] .price { backdrop-filter: blur(14px); } .price:hover { transform: translateY(-8px); box-shadow: var(--card-shadow); } .price.featured { border-color: transparent; box-shadow: var(--glow); } .price.featured::after { content:""; position:absolute; inset:-1px; border-radius: var(--radius); padding:1px; background: var(--accent-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } .price .tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px; background: var(--accent-grad); color:#0c0c12; } .price h3 { font-size:1.15rem; margin-bottom:6px; } .price .desc { color: var(--muted); font-size:.92rem; min-height:42px; } .price .amt { font-size:2.8rem; font-weight:800; margin:14px 0 2px; } .price .amt span { font-size:1rem; font-weight:600; color: var(--muted); } .price .amt .from { display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); margin-bottom:4px; } .price .amt-sub { font-size:1.5rem; font-weight:800; margin-bottom:4px; } .price .amt-sub span { font-size:.95rem; font-weight:600; color: var(--muted); } .price-note { font-size:.82rem; color: var(--muted); margin-top:16px; line-height:1.5; } .price ul { list-style:none; margin:22px 0 28px; display:grid; gap:13px; } .price li { display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color: var(--muted); } .price li svg { width:19px; height:19px; flex:none; stroke: var(--accent); margin-top:2px; } .price li.off { opacity:.4; } .price li.off svg { stroke: var(--muted); } .price .btn { width:100%; justify-content:center; margin-top:auto; } /* ============================================================ Contact + Socials ============================================================ */ .contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; } .contact-copy h2 { font-size: clamp(2rem,4vw,2.8rem); margin-bottom:16px; } .contact-copy p { color: var(--muted); font-size:1.05rem; margin-bottom:30px; } .socials { display:grid; gap:14px; } .social { display:flex; align-items:center; gap:15px; padding:16px 18px; background: var(--surface); border:1px solid var(--border); border-radius:14px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } [data-theme="gradient"] .social { backdrop-filter: blur(10px); } .social:hover { transform: translateX(6px); border-color: var(--accent); box-shadow: var(--glow); } .social .si { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; background: var(--surface-2); border:1px solid var(--border); } .social .si svg { width:21px; height:21px; fill: var(--text); } .social .stxt b { display:block; font-size:.98rem; } .social .stxt span { color: var(--muted); font-size:.85rem; } /* Form */ .form-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:34px; box-shadow: var(--card-shadow); } [data-theme="gradient"] .form-card { backdrop-filter: blur(16px); } .field { margin-bottom:18px; } .field label { display:block; font-size:.86rem; font-weight:600; margin-bottom:8px; color: var(--text); } .field input, .field textarea { width:100%; font-family:inherit; font-size:.98rem; color: var(--text); background: var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; transition: border-color .25s, box-shadow .25s; } [data-theme="gradient"] .field input, [data-theme="gradient"] .field textarea { background: rgba(0,0,0,.2); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(126,200,227,.2); } .field textarea { resize:vertical; min-height:130px; } .form-msg { margin-top:14px; font-size:.92rem; font-weight:600; color: var(--accent); opacity:0; transition: opacity .3s; } .form-msg.show { opacity:1; } .form-msg.error { color: var(--error); } /* ============================================================ Footer ============================================================ */ footer { border-top:1px solid var(--border); padding:40px 0; text-align:center; color: var(--muted); font-size:.9rem; } footer .logo { justify-content:center; margin-bottom:14px; font-size:1.05rem; } footer .footer-contact { margin-top:8px; } footer .footer-a11y { max-width:620px; margin:16px auto 0; font-size:.82rem; line-height:1.6; } footer .footer-a11y a { color: var(--text); border-bottom:1px solid var(--border); transition: color .25s, border-color .25s; } footer .footer-a11y a:hover { color: var(--accent); border-color: var(--accent); } footer .footer-contact a { color: var(--text); border-bottom:1px solid var(--border); transition: color .25s, border-color .25s; } footer .footer-contact a:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ Reveal animation ============================================================ */ .reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity:1; transform:none; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .grid-3, .grid-pricing { grid-template-columns: repeat(2,1fr); } .about-grid, .contact-grid { grid-template-columns: 1fr; gap:40px; } .about-visual { max-width:420px; margin:0 auto; width:100%; } } @media (max-width: 820px) { .nav-links { position:fixed; inset: var(--nav-h) 0 auto 0; flex-direction:column; gap:4px; background: var(--bg-2); border-bottom:1px solid var(--border); padding:16px 24px 24px; transform: translateY(-130%); transition: transform .4s var(--ease); align-items:stretch; } .nav-links.open { transform:none; } .nav-links a { padding:13px 14px; } .menu-btn { display:grid; } } @media (max-width: 620px) { section { padding: 80px 0; } .grid-3, .grid-pricing { grid-template-columns: 1fr; } .hero-stats { gap:30px; } .nav-actions .desktop-cta { display:none; } }