/* Fonts are linked from (see src/partials/head.html), not @import-ed here — an @import chains a second round-trip after this file has already been downloaded and parsed. */ /* ============================================================ KANJOWORKS — 夜の支配者 base.css — tokens, reset, typography, primitives ============================================================ */ :root{ --ink:#08080a; --ink-2:#0d0e11; --char:#141619; --char-2:#1b1e23; --steel:#2b2f37; --steel-2:#3a3f48; --gray:#7c828e; --gray-2:#9aa0aa; --bone:#e9e6df; --warm:#f4f1ea; --white:#fff; /* Brand red is #a00000 — taken from the logo and the original theme. It is dark, so it only carries white text on top of it (10:1 contrast). --red-ui is the same hue lifted until small text passes AA on black. */ --red:#a00000; /* brand — solid fills, badges, bars */ --red-ui:#ec1c24; /* on-dark tint — small text, hairlines, icons */ --red-hot:#ff3b43; /* hover peak / glow */ --red-deep:#6d0000; /* deeper shade */ --red-glow:rgba(236,28,36,.5); --display:'Anton','Oswald','Archivo Black',Impact,sans-serif; --head:'Oswald','Anton',sans-serif; --body:'Inter','Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace; --jp:'Noto Sans JP','Hiragino Sans',sans-serif; --pad:clamp(18px,4.2vw,76px); --maxw:1720px; --gut:clamp(12px,1.4vw,22px); --sect:clamp(40px,4.6vw,72px); /* section rhythm — reference sits ~48-64px apart, not a screen */ --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.76,0,.24,1); --e-race:cubic-bezier(.2,.9,.15,1); --t-fast:.28s; --t-mid:.55s; --t-slow:.9s; --hdr-h:76px; --z-hdr:400; --z-mega:390; --z-cart:600; --z-menu:700; --z-load:900; --z-cur:1000; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} body{ background:var(--ink); color:var(--bone); font-family:var(--body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{overflow:hidden} img,svg,video{display:block;max-width:100%} /* is an inline wrapper — make it transparent to layout so the img inside still fills the absolutely-positioned media boxes */ picture{display:contents} img{color:transparent} /* no alt-text flash before the placeholder kicks in */ a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5,p{margin:0} ::selection{background:var(--red);color:#fff} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{background:var(--steel);border:2px solid var(--ink)} ::-webkit-scrollbar-thumb:hover{background:var(--red-ui)} /* ============================== TYPOGRAPHY ============================== */ /* Display type stacks tight, but not tighter than Czech allows: in Anton a háček tops out at .89em and an acute (Á Í Ó Ú Ý) at 1.11em above the baseline, so any multi-line heading set under line-height 1 draws the second line's accents through the letters above it. 1 keeps háčky clear and lets acutes just kiss the line above. Single-line hero titles may still override this locally. */ .d1,.d2,.d3,.d4{ font-family:var(--display); font-weight:400; line-height:1; letter-spacing:-.015em; text-transform:uppercase; } .d1{font-size:clamp(3.4rem,12.4vw,13.5rem)} .d2{font-size:clamp(2.8rem,8.4vw,8.6rem)} .d3{font-size:clamp(2.1rem,5.2vw,4.9rem)} .d4{font-size:clamp(1.5rem,3vw,2.7rem)} .italic-race{transform:skewX(-9deg);transform-origin:left bottom;display:inline-block} .outline{color:transparent;-webkit-text-stroke:1.4px rgba(233,230,223,.5)} .outline-red{color:transparent;-webkit-text-stroke:1.4px var(--red)} .red{color:var(--red-ui)} .bone{color:var(--bone)} .dim{color:var(--gray)} .eyebrow{ font-family:var(--mono);font-size:10px;letter-spacing:.34em; text-transform:uppercase;color:var(--gray);font-weight:400; } .eyebrow--red{color:var(--red-ui)} .meta{ font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--gray); } .jp{font-family:var(--jp);font-weight:400;letter-spacing:.14em} .lead{ font-size:clamp(15px,1.25vw,19px);line-height:1.65; color:var(--gray-2);max-width:56ch;font-weight:300; } .sect-tag{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:var(--gray); } .sect-tag i{display:block;width:26px;height:1px;background:var(--red-ui);font-style:normal} .sect-tag b{color:var(--red-ui);font-weight:500} /* ============================== LAYOUT ============================== */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .wrap-full{width:100%;padding-inline:var(--pad)} .sect{padding-block:var(--sect)} .grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)} .hr-full{height:1px;background:rgba(233,230,223,.1)} .sect-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:32px;flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,32px); } /* ============================== GRAIN ============================== */ .grain{ position:fixed;inset:-50%;z-index:300;pointer-events:none; opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 7s steps(9) infinite; } @keyframes grainShift{ 0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 20%{transform:translate(-8%,2%)} 30%{transform:translate(4%,-6%)} 40%{transform:translate(-2%,7%)} 50%{transform:translate(-6%,3%)} 60%{transform:translate(7%,0)} 70%{transform:translate(0,6%)} 80%{transform:translate(3%,-3%)} 90%{transform:translate(-4%,4%)} } .vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 36%,rgba(0,0,0,.78) 100%)} /* ============================== BUTTONS ============================== */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px; padding:0 30px;height:54px; font-family:var(--head);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase; border:1px solid rgba(233,230,223,.22); color:var(--bone);background:transparent; overflow:hidden;isolation:isolate; transition:color var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out); will-change:transform; } .btn::before{ content:'';position:absolute;inset:0;z-index:-1;background:var(--bone); transform:translateY(101%);transition:transform .5s var(--e-out); } .btn:hover{color:var(--ink);border-color:var(--bone)} .btn:hover::before{transform:translateY(0)} .btn .ar{transition:transform .45s var(--e-out)} .btn:hover .ar{transform:translateX(5px)} .btn--red{background:var(--red);border-color:var(--red);color:#fff} .btn--red::before{background:#fff} .btn--red:hover{color:var(--ink);border-color:#fff} .btn--solid{background:var(--bone);border-color:var(--bone);color:var(--ink)} .btn--solid::before{background:var(--red)} .btn--solid:hover{color:#fff;border-color:var(--red-ui)} .btn--sm{height:42px;padding:0 20px;font-size:11px} .btn--lg{height:62px;padding:0 40px;font-size:13.5px} .btn--block{width:100%} .tlink{ position:relative;display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--bone);padding-bottom:5px; } .tlink::after{ content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red-ui); transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out); } .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink svg{transition:transform .45s var(--e-out)} .tlink:hover svg{transform:translateX(6px)} /* ============================== REVEAL ============================== */ [data-rv]{opacity:0;will-change:transform,opacity} [data-rv="up"]{transform:translate3d(0,42px,0)} [data-rv="fade"]{transform:none} [data-rv="left"]{transform:translate3d(-40px,0,0)} [data-rv="right"]{transform:translate3d(40px,0,0)} [data-rv="clip"]{opacity:1;clip-path:inset(0 0 100% 0)} [data-rv="scale"]{transform:scale(1.1);opacity:1;clip-path:inset(0 0 100% 0)} [data-rv="logo"]{transform:translate3d(0,26px,0) scale(.97)} [data-rv].rv-in{ opacity:1;transform:none;clip-path:none; transition:opacity .95s var(--e-out),transform 1.05s var(--e-out),clip-path 1.1s var(--e-io); } /* Only the wipe reveals keep a clip box once they are in. A generic inset(0) on every revealed element would keep clipping to the border box forever — and display type set at line-height < 1 paints its accents (Á Í Ó Ú Ý, háčky) and descenders (, Q) outside that box, so Czech copy lost its diacritics. */ [data-rv="clip"].rv-in,[data-rv="scale"].rv-in{clip-path:inset(0 0 0 0)} /* Safety net: if the reveal transition never gets an animation frame (unfocused / throttled / low-power tab), the element would stay at the transition's start value — invisible — forever. app.js drops this class on anything still at opacity 0 shortly after it was told to reveal. */ [data-rv].rv-instant,[data-rv].rv-instant *{transition:none!important} [data-rv].rv-instant{opacity:1!important;transform:none!important;clip-path:none!important} .rv-instant .rv-line > span,.rv-line.rv-instant > span{transform:none!important} /* Line-mask reveal. The mask has to be taller than the line box: Anton's acute accents sit 1.11em above the baseline and the box at line-height .78-.92 ends around .82-.88em, commas/Q descend .12em below a box whose bottom sits ~on the baseline. Padding gives the ink room, the negative margins hand the space back so the layout does not move. The hidden span travels far enough for its overhanging ink to clear the mask too. */ .rv-line{display:block;overflow:hidden;padding:.36em .15em .26em;margin:-.36em -.15em -.26em} .rv-line > span{display:block;transform:translateY(calc(100% + .7em));transition:transform 1s var(--e-out)} .rv-in .rv-line > span,.rv-line.rv-in > span{transform:translateY(0)} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important} .rv-line > span{transform:none!important} } /* ============================== MARQUEE ============================== */ .marquee{ position:relative;overflow:hidden;display:flex;width:100%; border-block:1px solid rgba(233,230,223,.1); background:var(--ink); } .marquee__row{display:flex;flex:0 0 auto;align-items:center; animation:mq var(--mq-dur,34s) linear infinite} .marquee:hover .marquee__row{animation-play-state:paused} .marquee--rev .marquee__row{animation-direction:reverse} @keyframes mq{to{transform:translateX(-100%)}} .marquee__item{ display:inline-flex;align-items:center;gap:clamp(20px,3vw,46px); padding:clamp(11px,1.1vw,17px) clamp(12px,1.6vw,26px); font-family:var(--display);font-size:clamp(15px,1.5vw,25px);letter-spacing:.02em; text-transform:uppercase;white-space:nowrap;color:var(--bone); } .marquee__item .sep{color:var(--red-ui);font-family:var(--body);font-weight:300} .marquee--mono .marquee__item{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gray)} /* ============================== MEDIA ============================== */ .media{position:relative;overflow:hidden;background:var(--char);isolation:isolate} .media img,.media video{width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--e-out),filter .7s var(--e-out)} .media--zoom:hover img{transform:scale(1.06)} .media__tint{position:absolute;inset:0;background:var(--red);mix-blend-mode:color; opacity:0;transition:opacity .6s var(--e-out);pointer-events:none} .media:hover .media__tint{opacity:.16} .brackets{position:absolute;inset:12px;pointer-events:none;opacity:0;transition:opacity .4s var(--e-out)} .brackets::before,.brackets::after{content:'';position:absolute;width:16px;height:16px;border:1px solid var(--red-ui)} .brackets::before{top:0;left:0;border-right:0;border-bottom:0} .brackets::after{bottom:0;right:0;border-left:0;border-top:0} /* ============================== CURSOR ============================== */ .cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cur); border-radius:50%;mix-blend-mode:difference} .cursor{width:38px;height:38px;border:1px solid rgba(233,230,223,.7); margin:-19px 0 0 -19px;transition:width .35s var(--e-out),height .35s var(--e-out), margin .35s var(--e-out),background-color .35s var(--e-out),border-color .35s var(--e-out),opacity .3s} .cursor-dot{width:4px;height:4px;background:var(--bone);margin:-2px 0 0 -2px;transition:opacity .3s} .cursor__label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink);opacity:0;transition:opacity .25s;white-space:nowrap; } body.cur-hover .cursor{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--bone);border-color:transparent} body.cur-hover .cursor__label{opacity:1} body.cur-hover .cursor-dot{opacity:0} body.cur-link .cursor{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--bone)} @media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none!important}} /* ============================== LOADER ============================== */ .loader{ position:fixed;inset:0;z-index:var(--z-load);background:var(--ink); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; } .loader.is-done{transform:translateY(-100%);transition:transform 1.05s var(--e-io) .15s} .loader__logo{overflow:hidden;line-height:0} .loader__logo span{display:block;animation:lgIn 1.05s var(--e-out) both} .loader__logo img{width:min(620px,68vw);height:auto} @keyframes lgIn{from{transform:translateY(105%);opacity:0}to{transform:translateY(0);opacity:1}} .loader__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,5vh,54px); display:flex;align-items:center;gap:18px} .loader__track{flex:1;height:1px;background:rgba(233,230,223,.14);position:relative;overflow:hidden} .loader__fill{position:absolute;inset:0;background:var(--red-ui);transform:scaleX(0);transform-origin:left} .loader__pct{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bone); min-width:52px;text-align:right} /* ============================== FORM ============================== */ .field{ width:100%;height:52px;padding:0 16px;background:transparent; border:1px solid rgba(233,230,223,.18);color:var(--bone); font-size:13px;letter-spacing:.04em;transition:border-color .3s,background .3s; } .field::placeholder{color:var(--gray);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase} .field:focus{outline:none;border-color:var(--red-ui);background:rgba(236,28,36,.05)} .swatch{ min-width:38px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(233,230,223,.2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; color:var(--gray-2);transition:all .25s var(--e-out); } .swatch:hover{border-color:var(--bone);color:var(--bone)} .swatch.is-on{background:var(--bone);border-color:var(--bone);color:var(--ink)} .swatch:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through} .price{font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--bone)} .price--old{color:var(--gray);text-decoration:line-through;font-weight:400;margin-right:8px;font-size:13px} .price--sale{color:var(--red-ui)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .flex{display:flex}.ac{align-items:center}.jb{justify-content:space-between} :focus-visible{outline:2px solid var(--red);outline-offset:3px} /* ============================================================ IMAGE PLACEHOLDERS Applied automatically to an image's container when the file at assets/img/ is missing. Drop the real photo in and the placeholder disappears — no markup changes needed. ============================================================ */ .ph{position:relative;background:#101319;overflow:hidden;min-height:60px} .ph::before{ content:'';position:absolute;inset:0; background:repeating-linear-gradient(45deg,#151921 0 9px,#0e1116 9px 18px); box-shadow:inset 0 0 0 1px rgba(233,230,223,.07); } .ph::after{ content:attr(data-ph); position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:16px;text-align:center; font-family:var(--mono);font-size:10px;line-height:2;letter-spacing:.22em; text-transform:uppercase;color:var(--steel-2); border:1px dashed rgba(233,230,223,.12);margin:10px; } .ph--sm::after{font-size:8px;letter-spacing:.14em;margin:5px;padding:6px;line-height:1.7} /* compact section head — title, JP tag and lead sit on ONE baseline like the reference ("NOVINKY 新着アイテム Čerstvé věci z naší garáže."), link at right */ .sect-head--row{align-items:baseline;gap:18px 32px} .sect-head__l{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px);flex-wrap:wrap} .sect-head__ttl{ font-family:var(--display);font-size:clamp(1.9rem,3.2vw,3.1rem);line-height:.9; letter-spacing:-.01em;text-transform:uppercase;color:var(--warm); } .sect-head__jp{font-family:var(--jp);font-weight:700;font-size:clamp(12px,1vw,15px); letter-spacing:.2em;color:var(--red-ui)} .sect-head__lead{font-size:clamp(12px,.9vw,13.5px);letter-spacing:.06em;text-transform:uppercase; color:var(--gray-2);font-weight:300;font-family:var(--head)}