/* ========================================================================== Vasilevo.net — public site (BETA). THEME: light & clean. Soft off-white canvas, teal-green fibre accent, Space Grotesk display. Mobile-first, framework-free. Same class names as the markup. ========================================================================== */ :root { --brand: #0ca678; /* teal-green fibre accent (actions/speed) — reads on white */ --brand-700: #099268; --ink: #0c1322; /* headings (near-black navy) */ --ink-2: #0b0f17; --teal: #0ca678; --teal-700: #099268; --bg: #f6f8fb; /* page background (soft off-white) */ --surface: #ffffff; /* cards / raised */ --surface-2: #eef2f7; /* alt sections */ --card: #ffffff; --line: #e6ebf2; --line-2: #d4dde8; --text: #39465b; /* body text (dark slate) */ --muted: #6c7a90; --logo-red: #e2231a; --glow: 0 10px 26px rgba(12,166,120,.22); --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 24px rgba(20,35,65,.08); --shadow-lg: 0 22px 50px rgba(20,35,65,.12); --maxw: 1160px; --nav-h: 98px; --ease: cubic-bezier(.2,.7,.2,1); /* theme-dependent surfaces (overridden per data-theme below) */ --on-brand: #04231a; /* text on a brand-coloured fill */ --nav-bg: rgba(255,255,255,.82); --band-bg: linear-gradient(135deg, #eafaf4, #ffffff); --btn-light-bg: rgba(12,18,34,.04); --btn-light-bg-h: rgba(12,18,34,.08); --logo-filter: none; /* footer logo: invert only on dark themes */ } /* ===== Alternate themes — toggled by the nav theme switcher (data-theme on ) ===== */ [data-theme="dark"] { --brand:#22e3a6; --brand-700:#15c490; --teal:#22e3a6; --teal-700:#15c490; --ink:#ffffff; --bg:#0b0f17; --surface:#121826; --surface-2:#0e1420; --card:#121826; --line:#1f2a3b; --line-2:#2c384b; --text:#c4d0e3; --muted:#8294b0; --glow:0 0 26px rgba(34,227,166,.40); --shadow:0 12px 32px rgba(0,0,0,.45); --shadow-lg:0 28px 64px rgba(0,0,0,.6); --on-brand:#04231a; --nav-bg:rgba(11,15,23,.78); --band-bg:linear-gradient(135deg,#0f1626,#15213a); --btn-light-bg:rgba(255,255,255,.06); --btn-light-bg-h:rgba(255,255,255,.12); --logo-filter:brightness(0) invert(1); } [data-theme="ocean"] { --brand:#2563eb; --brand-700:#1d4ed8; --teal:#2563eb; --teal-700:#1d4ed8; --ink:#0b1530; --bg:#f4f7fc; --surface:#ffffff; --surface-2:#e9eff7; --card:#ffffff; --line:#e2e8f3; --line-2:#cdd9ec; --text:#3a4763; --muted:#6b7896; --on-brand:#ffffff; --glow:0 10px 26px rgba(37,99,235,.20); --band-bg:linear-gradient(135deg,#e8f0ff,#ffffff); --nav-bg:rgba(255,255,255,.85); } [data-theme="warm"] { --brand:#e2231a; --brand-700:#c01a12; --teal:#e2231a; --teal-700:#c01a12; --ink:#241712; --bg:#faf6f1; --surface:#ffffff; --surface-2:#f3ece3; --card:#ffffff; --line:#ece2d6; --line-2:#ddcfbd; --text:#4a4039; --muted:#897b6c; --on-brand:#ffffff; --glow:0 10px 26px rgba(226,35,26,.18); --band-bg:linear-gradient(135deg,#fdeee8,#ffffff); --nav-bg:rgba(255,253,250,.86); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.01em; font-family: "Space Grotesk", "Inter", sans-serif; } h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 500; font-family: "Inter", sans-serif; } p { margin: 0 0 1rem; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .eyebrow { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-family: "Space Grotesk", sans-serif; } .eyebrow::before { content: "// "; opacity: .6; } .muted { color: var(--muted); } .center { text-align: center; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1rem; line-height: 1; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; font-family: "Space Grotesk", sans-serif; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--glow); } .btn-primary:hover { background: var(--brand-700); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-light { background: var(--btn-light-bg); color: var(--ink); border-color: var(--line-2); } .btn-light:hover { background: var(--btn-light-bg-h); transform: translateY(-2px); } .btn-teal { background: var(--brand); color: var(--on-brand); box-shadow: var(--glow); } .btn-teal:hover { background: var(--brand-700); transform: translateY(-2px); } .btn-lg { padding: 17px 32px; font-size: 1.06rem; } /* ---- Navbar ---- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; gap: 18px; height: var(--nav-h); } .nav__logo { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:1.15rem; } .nav__logo img { height: 78px; width:auto; } .nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; } .nav__links a { color: var(--text); font-weight: 600; font-size: .96rem; position: relative; } .nav__links a:not(.btn):hover { color: var(--brand); } .nav__links a:not(.btn)::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--brand); transition:width .2s var(--ease); } .nav__links a:not(.btn):hover::after { width:100%; } .nav__toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--ink); cursor: pointer; margin-left:auto; } /* Top-nav primary CTA ("Order now") uses black text per brand preference. */ .nav .btn-primary { color: #000; } .lang { font-size: .8rem; font-weight: 800; border:1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; color: var(--muted); } /* ---- Hero ---- */ .hero { position: relative; color: var(--text); overflow: hidden; background: var(--bg); } .hero__bg { position:absolute; inset:0; background: radial-gradient(60% 80% at 80% -10%, rgba(34,227,166,.16), transparent 60%), radial-gradient(50% 60% at 0% 110%, rgba(34,227,166,.10), transparent 60%); } .hero__bg::after { content:""; position:absolute; inset:0; background-image: url('../../img/DSC_4083_small.jpg'); background-size: cover; background-position: center; opacity: .06; mix-blend-mode: normal; } .hero__glow { display:none; } .hero__inner { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(64px, 10vw, 120px); max-width: 780px; } .hero h1 { color: var(--ink); } .hero p.lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--muted); max-width: 560px; } .hero__cta { display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px; } .hero__stats { display:flex; gap: 36px; margin-top: 48px; flex-wrap: wrap; } .hero__stats .num { font-size: 1.9rem; font-weight: 700; color: var(--ink); font-family:"Space Grotesk",sans-serif; } .hero__stats .lbl { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; } .pill { display:inline-flex; align-items:center; gap:8px; background: rgba(34,227,166,.08); border:1px solid rgba(34,227,166,.25); color:var(--brand); padding:7px 14px; border-radius:999px; font-size:.85rem; font-weight:600; margin-bottom:22px; font-family:"Space Grotesk",sans-serif; } .pill .dot { width:8px; height:8px; border-radius:50%; background: var(--brand); box-shadow:0 0 0 4px rgba(34,227,166,.25); } /* ---- Sections ---- */ .section { padding: clamp(56px, 8vw, 96px) 0; } .section--alt { background: var(--surface-2); } .section__head { max-width: 640px; margin: 0 auto clamp(34px,5vw,54px); text-align: center; } /* ---- Package cards ---- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); position: relative; display:flex; flex-direction:column; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .plan:hover { transform: translateY(-6px); border-color: var(--line-2); } .plan--featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 18px 50px rgba(34,227,166,.14); } .plan__tag { position:absolute; top:-12px; left:24px; background:var(--brand); color:var(--on-brand); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; font-family:"Space Grotesk",sans-serif; } .plan__name { font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; } .plan__speed { font-size: 2.7rem; font-weight: 700; color: var(--ink); line-height:1; margin: 8px 0 2px; font-family:"Space Grotesk",sans-serif; } .plan__speed small { font-size: 1rem; font-weight:600; color:var(--muted); text-shadow:none; } .plan__price { margin: 14px 0 18px; } .plan__price .amt { font-size: 1.9rem; font-weight: 700; color: var(--brand); font-family:"Space Grotesk",sans-serif; } .plan__price .per { color: var(--muted); font-weight:600; } .plan__features { list-style:none; padding:0; margin:0 0 22px; } .plan__features li { padding: 7px 0; border-top: 1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:.95rem; } .plan__features li:first-child { border-top:0; } .plan__features i { color: var(--brand); } .plan .btn { width: 100%; justify-content: center; margin-top: auto; } /* ---- Feature grid ---- */ .features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; } .feature { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .feature__ic { width:52px; height:52px; border-radius: 14px; display:grid; place-items:center; font-size:1.4rem; color:var(--on-brand); background: var(--brand); margin-bottom: 16px; box-shadow: var(--glow); } .feature--teal .feature__ic { background: var(--brand); } .feature--navy .feature__ic { background: #1b2740; color: var(--brand); box-shadow:none; } /* ---- Coverage / CTA band ---- */ .band { background: var(--band-bg); border:1px solid var(--line-2); color: var(--text); border-radius: var(--radius); padding: clamp(34px,5vw,56px); position:relative; overflow:hidden; } .band h2 { color: var(--ink); } .band__glow { position:absolute; right:-60px; bottom:-120px; width:340px; height:340px; background: radial-gradient(circle, rgba(34,227,166,.22), transparent 60%); } /* ---- Footer ---- */ .footer { background: var(--surface-2); color: var(--muted); padding: 56px 0 28px; border-top:1px solid var(--line); } .footer a { color: var(--text); } .footer a:hover { color: var(--brand); } .footer .nav__logo img { filter: var(--logo-filter) !important; } .footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; } .footer h4 { color: var(--ink); font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; font-family:"Space Grotesk",sans-serif; } .footer ul { list-style:none; padding:0; margin:0; } .footer li { margin-bottom: 9px; } .footer__bottom { border-top:1px solid var(--line); margin-top: 40px; padding-top: 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; } /* ---- Mobile ---- */ @media (max-width: 860px) { .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom:1px solid var(--line); padding: 8px 20px 20px; box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .25s var(--ease); margin-left:0; } .nav__links.open { transform: translateY(0); } .nav__links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); } .nav__links .btn { margin-top: 12px; justify-content:center; } .nav__toggle { display:block; } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } .hero__stats { gap: 24px; } }