/* ============================================================ ADVTRIP — strona marketingowa (advtrip.pl) Odświeżenie wg design handoff (Claude Design). Tokeny: brand/tokens.css. Rajdhani — self-host (assets/fonts); IBM Plex Sans/Mono — Google Fonts (w ). ============================================================ */ :root{ --adv-orange:#E8741E; /* Pantone 158 C — akcent, ADV, CTA */ --adv-orange-600:#D26416; /* hover/pressed */ --adv-terrain:#0E1217; /* tło główne */ --adv-terrain-2:#0B0E12; /* tło głębsze (paski, stopka) */ --adv-surface:#16191F; /* karty */ --adv-ink:#E7E9EC; /* tekst główny */ --adv-muted:#A7AEB7; /* tekst drugorzędny */ --adv-faint:#8A929C; /* etykiety, opisy kart */ --adv-dim:#6E7681; /* wygaszony */ --adv-line:rgba(255,255,255,.08); --adv-step:#23272F; /* cyfry kroków */ --font-display:"Rajdhani",system-ui,sans-serif; --font-ui:"IBM Plex Sans",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; } /* — Self-host Rajdhani (nagłówki/liczby/wordmark) — */ @font-face{font-family:"Rajdhani";src:url("assets/fonts/Rajdhani-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap;} @font-face{font-family:"Rajdhani";src:url("assets/fonts/Rajdhani-Bold.ttf") format("truetype");font-weight:700;font-display:swap;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;padding:0; background:var(--adv-terrain); color:var(--adv-ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--adv-orange);color:var(--adv-terrain);} a{color:inherit;} img{max-width:100%;} .wrap{max-width:1240px;margin:0 auto;} .eyebrow{ font-family:var(--font-mono);font-size:12px;letter-spacing:.3em; color:var(--adv-orange);text-transform:uppercase;margin-bottom:16px; } /* ====== NAV ====== */ .nav{ position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center; padding:22px 56px;border-bottom:1px solid var(--adv-line); } .brand{display:flex;align-items:center;gap:11px;} .brand .wordmark{ font-family:var(--font-display);font-weight:700;font-size:26px;line-height:.8;letter-spacing:.01em; } .brand .wordmark .adv{color:var(--adv-orange);} .brand .wordmark .trip{color:#fff;} .nav-right{ display:flex;align-items:center;gap:30px; font-family:var(--font-mono);font-size:12px;letter-spacing:.12em; color:var(--adv-muted);text-transform:uppercase; } .nav-links{display:flex;align-items:center;gap:30px;} .nav-links a{color:var(--adv-muted);text-decoration:none;} .nav-links a:hover{color:var(--adv-ink);} .btn-apk{ display:inline-flex;align-items:center;gap:7px; background:var(--adv-orange);color:var(--adv-terrain);text-decoration:none; padding:10px 16px;font-weight:600; } .btn-apk:hover{background:var(--adv-orange-600);} /* ====== HERO ====== */ .hero{ position:relative;padding:74px 56px 84px;border-bottom:1px solid var(--adv-line);overflow:hidden; background:radial-gradient(120% 80% at 88% -10%, rgba(232,116,30,.13), transparent 46%), var(--adv-terrain); } .hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;} .hero::before{background-image:repeating-radial-gradient(circle at 92% -4%, transparent 0 44px, rgba(232,116,30,.05) 45px 47px);} .hero::after{ background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:46px 46px; } .hero-grid{ position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center; max-width:1240px;margin:0 auto; } .hero-eyebrow{ display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px; letter-spacing:.22em;color:var(--adv-orange);text-transform:uppercase;margin-bottom:24px; } .hero-eyebrow .bar{width:28px;height:2px;background:var(--adv-orange);display:inline-block;} .hero h1{ margin:0;font-family:var(--font-display);font-weight:700;font-size:78px;line-height:.96; letter-spacing:.005em;color:#fff; } .hero h1 .accent{color:var(--adv-orange);} .lead{margin:26px 0 0;max-width:540px;font-size:17px;line-height:1.65;color:var(--adv-muted);} .lead strong{color:var(--adv-ink);} /* suwak demo */ .slider-demo{ margin:34px 0 30px;max-width:520px;background:var(--adv-surface); border:1px solid var(--adv-line);padding:20px 22px; } .slider-demo .row{ display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px; letter-spacing:.14em;color:var(--adv-faint);text-transform:uppercase;margin-bottom:14px; } .slider-demo .row .val{color:var(--adv-orange);} .slider-track{ position:relative;height:6px;border-radius:3px; background:linear-gradient(90deg,#3A4049 0 18%,var(--adv-orange) 18% 100%); } .slider-knob{ position:absolute;left:72%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%; background:var(--adv-orange);border:3px solid var(--adv-terrain);box-shadow:0 0 0 1px var(--adv-orange); } .slider-ends{ display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px; letter-spacing:.1em;color:var(--adv-dim);margin-top:12px; } .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;} .btn{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.02em;padding:15px 26px; } .btn-primary{background:var(--adv-orange);color:var(--adv-terrain);} .btn-primary:hover{background:var(--adv-orange-600);} .btn-ghost{background:transparent;color:var(--adv-ink);border:1px solid rgba(255,255,255,.18);padding:15px 24px;} .btn-ghost:hover{border-color:rgba(255,255,255,.4);} .hero-meta{margin-top:22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--adv-dim);} /* phone */ .phone-col{position:relative;display:flex;justify-content:center;} .phone-hud{ position:absolute;top:-12px;right:4px;z-index:2;font-family:var(--font-mono);font-size:11px; letter-spacing:.14em;color:var(--adv-faint);text-align:right;line-height:1.7; } .phone-hud .live{color:var(--adv-orange);} .phone{ width:300px;border-radius:42px;background:#000;padding:11px; box-shadow:0 30px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.10); } .phone-screen{position:relative;border-radius:32px;overflow:hidden;background:var(--adv-terrain);aspect-ratio:1080/2240;} .phone-screen img{width:100%;height:100%;object-fit:cover;display:block;} /* ====== SEKCJE ogólnie ====== */ .section{padding:96px 56px;border-bottom:1px solid var(--adv-line);} .section--alt{background:var(--adv-terrain-2);} .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;flex-wrap:wrap;gap:20px;} .section-head h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:52px;line-height:1.02;color:#fff;} .section-head .intro{margin:0;max-width:380px;font-size:15px;line-height:1.65;color:var(--adv-faint);} /* ====== FUNKCJE ====== */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .card{position:relative;background:var(--adv-surface);border:1px solid var(--adv-line);padding:28px 26px 30px;} .card:hover{border-color:rgba(255,255,255,.16);} .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;} .card-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--adv-orange);} .badge-soon{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--adv-terrain);background:var(--adv-orange);padding:3px 8px;} .card h3{font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.05;color:#fff;margin:0 0 10px;} .card p{font-size:14px;line-height:1.6;color:var(--adv-faint);margin:0;} /* ====== PASEK NAWIERZCHNI ====== */ .surface{padding:64px 56px;border-bottom:1px solid var(--adv-line);background:var(--adv-terrain-2);} .surf-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:center;} .surf-grid h3{margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:34px;color:#fff;line-height:1.05;} .surf-grid p{margin:0;font-size:15px;line-height:1.65;color:var(--adv-faint);max-width:380px;} .surf-svg{display:block;width:100%;height:86px;} .surf-legend{display:flex;gap:26px;margin-top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--adv-muted);flex-wrap:wrap;} .surf-legend span{display:flex;align-items:center;gap:8px;} .surf-legend .sw{width:16px;height:4px;display:inline-block;} .surf-legend .pct{margin-left:auto;color:var(--adv-orange);} /* ====== JAK TO DZIAŁA ====== */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .step{border-top:2px solid var(--adv-orange);padding-top:22px;} .step-num{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:.8;color:var(--adv-step);} .step h3{font-family:var(--font-display);font-weight:700;font-size:27px;color:#fff;margin:14px 0 10px;} .step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--adv-faint);} /* ====== POBIERZ ====== */ .download{ position:relative;overflow:hidden; background:radial-gradient(110% 120% at 12% 0%, rgba(232,116,30,.12), transparent 50%), var(--adv-terrain); } .download h2{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:52px;color:#fff;} .download .sub{margin:0 0 44px;font-size:16px;line-height:1.6;color:var(--adv-muted);max-width:560px;} .dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .dl-card{background:var(--adv-surface);border:1px solid var(--adv-line);padding:34px;display:flex;flex-direction:column;} .dl-card--apk{border-color:var(--adv-orange);} .dl-card h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:28px;color:#fff;} .dl-card p{margin:12px 0 24px;font-size:14.5px;line-height:1.6;color:var(--adv-faint);flex:1;} .dl-card .btn{align-self:flex-start;font-size:18px;padding:14px 24px;} .dl-disabled{ align-self:flex-start;display:inline-flex;align-items:center;gap:9px;color:var(--adv-dim); padding:14px 24px;border:1px solid rgba(255,255,255,.14); font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em; } .dl-note{margin-top:20px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--adv-dim);line-height:1.6;} /* ====== PORADNIK ====== */ .poradnik-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:20px;} .poradnik-head h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:46px;color:#fff;line-height:1.04;} .poradnik-all{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--adv-orange);text-decoration:none;text-transform:uppercase;} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .post-card{text-decoration:none;background:var(--adv-surface);border:1px solid var(--adv-line);padding:28px;display:flex;flex-direction:column;gap:14px;} .post-card:hover{border-color:rgba(255,255,255,.16);} .post-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--adv-orange);} .post-title{font-family:var(--font-display);font-weight:700;font-size:23px;color:#fff;line-height:1.1;} .post-desc{font-size:13.5px;line-height:1.55;color:var(--adv-faint);} .post-more{font-family:var(--font-mono);font-size:11px;color:var(--adv-orange);margin-top:auto;} /* ====== FAQ ====== */ .faq-wrap{max-width:920px;margin:0 auto;} .faq-wrap h2{margin:0 0 44px;font-family:var(--font-display);font-weight:700;font-size:46px;color:#fff;line-height:1.04;} .faq{display:flex;flex-direction:column;} .faq-item{border-top:1px solid rgba(255,255,255,.10);} .faq-item summary{ list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 2px;font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff; } .faq-item summary::-webkit-details-marker{display:none;} .faq-plus{flex-shrink:0;color:var(--adv-orange);font-size:24px;transition:transform .2s;font-family:var(--font-ui);} .faq-item[open] .faq-plus{transform:rotate(45deg);} .faq-answer{padding:0 2px 24px;font-size:15px;line-height:1.7;color:var(--adv-muted);max-width:760px;} .faq-answer strong{color:var(--adv-ink);} /* ====== FOOTER ====== */ footer{padding:64px 56px 48px;background:var(--adv-terrain-2);} .foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;} .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px;} .foot-brand .wordmark{font-family:var(--font-display);font-weight:700;font-size:24px;} .foot-desc{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--adv-dim);max-width:420px;line-height:1.7;} .foot-links{display:flex;gap:30px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--adv-muted);text-transform:uppercase;flex-wrap:wrap;} .foot-links a{color:var(--adv-muted);text-decoration:none;} .foot-links a:hover{color:var(--adv-ink);} .foot-bottom{ margin-top:40px;padding-top:22px;border-top:1px solid var(--adv-line); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#5b626b;line-height:1.7; } .foot-bottom a{color:#5b626b;} /* ====== FOCUS (a11y) ====== */ a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--adv-orange);outline-offset:3px;} /* ====== RESPONSYWNOŚĆ ====== */ @media (max-width:820px){ .nav,.section,.surface,.hero,footer,.download{padding-left:20px !important;padding-right:20px !important;} .hero{padding-top:48px;padding-bottom:56px;} .hero h1{font-size:46px;line-height:1;} .section-head h2,.download h2{font-size:34px;} .surf-grid h3{font-size:30px;} .hero-grid,.features-grid,.steps,.dl-grid,.posts,.surf-grid{grid-template-columns:1fr;gap:34px;} .nav-links{display:none;} .phone-col{order:-1;} .section-head{margin-bottom:36px;} } @media (max-width:520px){ .hero h1{font-size:40px;} .btn,.btn-ghost{font-size:17px;padding:13px 20px;} } /* ============================================================ PORADNIK / artykuły (poradnik/*.html) — ten sam system marki. Strony poradnika używają starszych klas (.doc/.back/.updated/.box/.foot…); poniższe reguły renderują je spójnie z nową marką (bez zmian w HTML poradnika). ============================================================ */ header{border-bottom:1px solid var(--adv-line);} header .nav{border-bottom:0;} /* linia na
, nie na wewn. pasku */ /* wordmark tekstowy (poradnik: ADVTRIP) — homepage używa .wordmark, więc bez kolizji */ .brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:.01em;color:var(--adv-orange);text-decoration:none;} .brand b{color:#fff;font-weight:700;} .nav-cta{ background:var(--adv-orange);color:var(--adv-terrain) !important;text-decoration:none;padding:10px 16px; font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; } .nav-cta:hover{background:var(--adv-orange-600);} /* kontener dokumentu + proza */ .doc{max-width:820px;margin:0 auto;padding:64px 56px 84px;} .doc .back{ display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--adv-orange);text-decoration:none;margin-bottom:28px; } .doc .back:hover{color:var(--adv-orange-600);} .doc h1{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1.04;color:#fff;margin:0 0 14px;} .doc h2{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1.12;color:#fff;margin:44px 0 14px;} .doc h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:#fff;margin:32px 0 10px;} .doc p{font-size:16px;line-height:1.75;color:var(--adv-muted);margin:0 0 18px;} .doc ul,.doc ol{margin:0 0 20px;padding-left:22px;color:var(--adv-muted);font-size:16px;line-height:1.75;} .doc li{margin:0 0 8px;} .doc li::marker{color:var(--adv-orange);} .doc a{color:var(--adv-orange);text-decoration:none;border-bottom:1px solid rgba(232,116,30,.35);} .doc a:hover{border-bottom-color:var(--adv-orange);} .doc strong{color:var(--adv-ink);} .doc .updated{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--adv-faint);text-transform:uppercase;margin:0 0 36px;} /* kroki „krok po kroku" — duże pomarańczowe numery, jak sekcja „Jak to działa" */ .doc .steps-flow{margin:40px 0 8px;} .doc .step-row{ display:grid;grid-template-columns:64px 1fr;gap:26px; padding:34px 0;border-top:1px solid var(--adv-line); } .doc .step-row:first-child{border-top:0;padding-top:8px;} .doc .step-n{ font-family:var(--font-display);font-weight:700;font-size:54px;line-height:.78; color:var(--adv-orange); } .doc .step-row h2{margin:0 0 12px;font-size:26px;} .doc .step-row > .step-body > :last-child{margin-bottom:0;} @media (max-width:520px){ .doc .step-row{grid-template-columns:42px 1fr;gap:16px;padding:26px 0;} .doc .step-n{font-size:38px;} .doc .step-row h2{font-size:23px;} } /* karty wpisów na liście poradnika (h2/p zamiast spanów) */ .post-card h2{font-family:var(--font-display);font-weight:700;font-size:23px;color:#fff;line-height:1.15;margin:0;} .post-card p{font-size:14px;line-height:1.55;color:var(--adv-faint);margin:0;} /* callout */ .box{ background:var(--adv-surface);border:1px solid var(--adv-line);border-left:3px solid var(--adv-orange); padding:22px 24px;margin:34px 0;font-size:15px;line-height:1.65;color:var(--adv-muted); } .box strong{color:var(--adv-ink);} .box a{color:var(--adv-orange);text-decoration:none;} /* stopka poradnika (.foot / .foot-small) */ .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;} .foot-small{ margin-top:24px;padding-top:20px;border-top:1px solid var(--adv-line); font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#5b626b;line-height:1.7; } @media (max-width:820px){ .doc{padding-left:20px !important;padding-right:20px !important;padding-top:44px;} .doc h1{font-size:34px;} .doc h2{font-size:24px;} }