/* ============================================================ Orbit Studio — styles.css Struktura: 1) Design tokeny 2) Reset + základ 3) Sdílené komponenty (eyebrow, .btn, .work-link, footer) 4) Homepage — vše pod body.home 5) Case study — vše pod body.case 6) Lightbox galerie Každá stránka si v nese třídu "home" nebo "case", aby se styly obou stránek nepomíchaly (obě používají h1, footer, .wrap, .eyebrow… s jinými hodnotami). ============================================================ */ /* --- 1) Design tokeny --------------------------------------- Zdroj: vizual.md — tokeny se nemění bez změny vizual.md. vizual.md definuje --muted a --rule pro světlé pozadí (průhledná černá). Web je tmavá inverze: alfy zůstávají (.55 a .12), základ je off-white nad inkoustem. */ :root{ --ink:#0A0A0A; /* pozadí webu / text na světlé */ --ink-2:#131313; /* o stupeň světlejší plocha (karty, galerie) */ --off:#FAFAF7; /* --bg z vizual.md; tady barva textu */ --accent:#FF5C2B; /* jediný akcent — nikdy plocha */ --muted:rgba(250,250,247,.55); /* sekundární text, labely (alfa .55 dle vizual.md) */ --rule:rgba(250,250,247,.12); /* linky, oddělovače (alfa .12 dle vizual.md) */ --maxw:1120px; /* šířka obsahu case study */ } /* --- 2) Reset + základ -------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* plynulý posun na kotvy (case study) */ body{ background:var(--ink); color:var(--off); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } /* Respekt k systémovému nastavení „omezit pohyb": vypne rotaci orbit patternu i všechny přechody */ @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto} } /* --- 3) Sdílené komponenty ---------------------------------- Sdílí se jen to, co je na obou stránkách opravdu stejné. Rozměry (padding, font-size…) se liší → zůstávají per page, protože refactor nesmí nic viditelně změnit. */ /* Eyebrow — mono label s oranžovou linkou před textem */ .eyebrow{ display:flex;align-items:center; font-family:'JetBrains Mono',monospace; text-transform:uppercase; color:var(--muted); } .eyebrow::before{content:"";background:var(--accent);flex:none} /* Tlačítko — oranžová pilulka s tečkou */ .btn{ display:inline-flex;align-items:center; background:var(--accent);color:var(--ink); text-decoration:none;font-weight:700; border-radius:100px; } .btn:hover{transform:translateY(-2px)} /* Sekundární odkaz na vybranou práci (zatím jen homepage) */ .work-link{ display:inline-flex;align-items:center;gap:9px; color:var(--off);text-decoration:none; font-family:'JetBrains Mono',monospace;font-size:clamp(11px,1.5vh,13px); letter-spacing:1.5px;text-transform:uppercase; padding:6px 2px;transition:color .15s ease; } .work-link .lbl{color:var(--muted)} .work-link .arw{color:var(--accent);transition:transform .15s ease} .work-link:hover{color:var(--off)} .work-link:hover .lbl{color:var(--off)} .work-link:hover .arw{transform:translateX(3px)} /* Footer — mono patička, obsah a rozměry řeší per-page sekce */ footer{ font-family:'JetBrains Mono',monospace; text-transform:uppercase;color:var(--muted); display:flex;justify-content:space-between;flex-wrap:wrap; border-top:1px solid var(--rule); } footer a{text-decoration:none} footer a:hover{color:var(--accent)} /* === Homepage =============================================== */ body.home{ overflow:hidden; /* žádné posouvání */ height:100%; /* fallback pro prohlížeče bez dvh */ height:100dvh; /* přesně jedna obrazovka (dvh = i s lištou prohlížeče na mobilu) */ display:flex; flex-direction:column; } /* Záchranná síť: na nízkých oknech (telefon naležato, malé okno) povol scroll, jinak by se CTA oříznulo bez možnosti se k němu dostat */ @media (max-height:540px){ body.home{height:auto;min-height:100dvh;overflow:auto} } /* Orbit pattern background */ .orbit{ position:fixed; top:50%; right:-8vw; transform:translateY(-50%); width:min(1100px,120vw); aspect-ratio:1/1; z-index:0; pointer-events:none; } .orbit svg{width:100%;height:100%;display:block} .spin{transform-origin:560px 400px;animation:spin 160s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Layout */ .home .wrap{ position:relative; z-index:1; flex:1; min-height:0; /* dovolí obsahu se smrsknout místo přetečení */ display:flex; flex-direction:column; justify-content:center; max-width:1180px; width:100%; margin:0 auto; padding:clamp(16px,3vh,48px) clamp(20px,6vw,80px); } /* Header logo */ .brand{display:flex;align-items:center;flex:none;padding-top:6px} .brand .logo{height:clamp(26px,4.4vh,36px);width:auto;display:block} /* Hero — mezery i velikost písma se škálují podle výšky okna, aby se vše vešlo na jednu obrazovku */ .hero{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(12px,3vh,48px) 0; } .home .eyebrow{ gap:12px; font-size:clamp(10px,1.6vh,12px); letter-spacing:3px; margin-bottom:clamp(12px,2.6vh,26px); } .home .eyebrow::before{width:34px;height:2px} .home h1{ font-weight:700; font-size:clamp(2rem,min(8vw,10vh),6rem); line-height:1.02; letter-spacing:-.035em; max-width:15ch; } .home h1 .a{color:var(--accent)} .sub{ margin-top:clamp(14px,2.6vh,26px); font-size:clamp(.95rem,min(2.4vw,2.4vh),1.35rem); color:var(--muted); max-width:34ch; line-height:1.45; } .sub br + br{display:none} /* na malých výškách stačí jeden řádek mezery */ @media (min-height:640px){.sub br + br{display:inline}} .home .cta{margin-top:clamp(18px,4.4vh,44px);display:flex;gap:16px;flex-wrap:wrap;align-items:center} .home .btn{ gap:10px; font-size:1rem; padding:clamp(11px,1.8vh,15px) clamp(20px,3vh,26px); transition:transform .15s ease,opacity .15s ease; } .home .btn .dot{width:8px;height:8px;border-radius:50%;background:var(--ink)} /* Footer */ .home footer{ position:relative;z-index:1; flex:none; max-width:1180px;width:100%;margin:0 auto; padding:clamp(12px,2.2vh,22px) clamp(20px,6vw,80px); gap:16px; font-size:12px;letter-spacing:2px; } .home footer .live{display:inline-flex;align-items:center;gap:8px} .home footer .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)} .home footer a{color:var(--off)} /* === Case study ============================================= */ body.case{font-weight:400;line-height:1.6} .case .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} /* --- nav --- */ .case nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)} .case nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .case .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--off)} .case .logo svg{width:30px;height:30px;flex:none} .case .logo b{font-weight:800;letter-spacing:-.01em} .case .logo span{font-weight:400;letter-spacing:.22em;font-size:13px;color:var(--muted)} .case .logo i{font-style:normal;color:var(--accent);margin:0 2px} .nav-back{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s} .nav-back:hover{color:var(--accent)} /* --- eyebrow --- */ .case .eyebrow{gap:14px;font-size:12px;letter-spacing:.2em} .case .eyebrow::before{width:36px;height:1px} /* --- hero --- */ .case header{padding:96px 0 64px;border-bottom:1px solid var(--rule)} .case h1{ font-size:clamp(38px,6.2vw,76px);font-weight:800;line-height:1.02; letter-spacing:-.03em;margin:28px 0 26px;max-width:16ch; } .case h1 em{font-style:normal;color:var(--accent)} /* .case .lede (ne jen .lede): musí být specifičtější než .case p níž, jinak by mu obecný odstavec přepsal velikost a šířku */ .case .lede{font-size:clamp(17px,1.9vw,21px);color:#C9C9C4;max-width:60ch;line-height:1.55} .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)} .meta div{display:flex;flex-direction:column;gap:6px} .meta dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .meta dd{font-size:15px;font-weight:500;color:var(--off)} /* --- sections --- */ .case section{padding:80px 0;border-bottom:1px solid var(--rule)} .case h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:22px 0 28px} .case h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px} .case p{color:#C9C9C4;max-width:68ch} .case p + p{margin-top:16px} /* --- approach list --- */ .steps{margin-top:44px;display:grid;gap:1px;background:var(--rule)} .step{background:var(--ink);padding:30px 0 30px 0;display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start} .step .n{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);padding-top:4px;letter-spacing:.08em} .case .step p{margin:0;font-size:15.5px} .step ul{margin-top:12px;list-style:none;display:grid;gap:7px} .step li{color:#C9C9C4;font-size:15px;padding-left:18px;position:relative} .step li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--accent)} /* --- results --- */ .results{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);margin-top:44px;border:1px solid var(--rule)} .result{background:var(--ink-2);padding:32px 26px} .result .big{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1;margin-bottom:12px} .case .result p{font-size:14.5px;color:#B4B4AF;margin:0} /* --- gallery --- */ .gal{display:grid;gap:20px;margin-top:44px} .gal-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .case figure{margin:0;border:1px solid var(--rule);background:var(--ink-2)} .case figure img{width:100%;height:100%;display:block;object-fit:cover} .case figcaption{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 18px;border-top:1px solid var(--rule)} .hero-img img{aspect-ratio:auto} /* .case .credit ze stejného důvodu jako .case .lede — přebíjí .case p */ .case .credit{margin-top:28px;font-size:13.5px;color:var(--muted);max-width:68ch} .case .credit a{color:var(--muted);text-decoration:underline;text-underline-offset:3px} .case .credit a:hover{color:var(--accent)} /* --- cta --- */ .case .cta{padding:96px 0;text-align:center;border-bottom:none} .case .cta h2{max-width:22ch;margin:22px auto 30px} .case .btn{ gap:12px; font-size:16px; padding:18px 34px; transition:transform .18s ease, filter .18s ease; } .case .btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)} .case .btn:hover{filter:brightness(1.06)} .case footer{padding:36px 0;font-size:12px;letter-spacing:.1em;gap:20px} .case footer a{color:var(--muted)} @media (max-width:640px){ .case .wrap{padding:0 22px} .case header{padding:64px 0 48px} .case section{padding:60px 0} .step{grid-template-columns:1fr;gap:10px} .step .n{padding-top:0} } /* === Lightbox galerie ======================================= */ /* Styly k /assets/js/lightbox.js — overlay se vytváří až klikem */ .gal figure{cursor:zoom-in} .lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.96); display:flex;align-items:center;justify-content:center;padding:4vmin;cursor:zoom-out} .lb img{max-width:100%;max-height:100%;object-fit:contain} .lb .x{position:absolute;top:18px;right:24px;font:400 32px/1 Inter,sans-serif; color:#FAFAF7;background:none;border:none;cursor:pointer}